In Japan, as far as natural disasters are concerned, this month was pretty hectic 😳We've had the biggest typhoon in 25 years
in the western region and right after that a big earthquake
hitting the northern region of Japan!
Fortunately, so far nothing too concerning has happened to our small team here in central Tokyo *knocks on wood*
and thus we're able to bring you our September Update! 😊
Run your app inside of the editor
Meet the new Live tab, which allows you to run your app straight inside of Laska!
What's really neat about this is that you can edit your app inside of the browser while it is running! The app will hot-reload any changes you made, and preview them in the current state you are in. This is especially useful for data-driven apps, where you can't always predict how your UI will look.
The Timer App in action
You can switch between different components, edit their visuals, and then go back to the Live tab to see what it looks like in the state in which you last saw your app.
Starting today, you can use the special screen
variable to build responsive components! The screen variable contains a width and a height, which is equal to the device's width or height. Inside of the editor, it'll equal the size of the viewport. Here's an example of a hamburger menu used on our live site
Inside of the Header, we only want to display the full links menu when the width of our screen is larger than 550 pixels. Therefore, we can use the following expression at the Is Visible box for the component that contains our links:
It's also easier now to edit layouts while they are in a constrained state, such as the mobile view menu which only appears when the user is a compact screen.
Shadows & Elevation
You can now add Shadows (iOS) and Elevation (Android) to components! Since a picture says more than a thousand words, here goes:
Android's elevation levels
The settings can be found under a new section called Shadows when having selected a component that supports it.
You can now resize the Project Browser.
When deleting files/components, a confirmation dialog will popup.
Added various warning & error detection mechanisms.
Added more information about the status of the server when previewing your app.
Added back Code Preview (we had this temporarily disabled).
Tooltips are now shown when a property only works on a certain platform.
TextInput's Underline Color is only supported on Android.
An issue where sometimes you could not drag files/components downwards has been resolved.
Fixed the JSON control not resetting to the default properly in some cases.
Fixed an issue where extracting a component would sometimes not insert the extracted component back into the current component.
Fixed TextInput's border not rendering correctly in the editor.
When changing a property while editing text in WYSIWYG mode, you will no longer lose your changes.
Expressions in Code Mode will no longer be wrapped in parentheses if they can be omitted (e.g. State).
When saving in Code Mode, newlines and semicolons will no longer be stripped.
Special variable names like props, state are now only written when they are actually used.
Icons will now load only the fonts that are actually in use by the app.
Fixed Image's resizeMode prop not being rendered.
Fixed a crash when using a custom image style name twice.
The CLI's console output now has colors! Yay! 🖌🎨👩🎨
If you are using the CLI, please make sure to update to the latest version.
You can update by running npm install -g laska
That's it for now!