Hello everyone and welcome to another round of Front-End News.
- Is your code ready for Android 10?
- Mozilla releases Firefox 69
- We’ll talk about best practices for publishing an NPM package…
- and what cool things you can do with browser developer tools
Next, I have some conference-related info, the usual software updates section, and the new Developer Of The Week. So stay with me until the end to find out all the details.
As always, I have also prepared a video version for those that prefer listening instead of reading. If you enjoy this format, I would appreciate it if you would subscribe to the YouTube channel as well.
Is your code ready for Android 10?
Android 10, the latest version of Google’s operating system, became available this week on 3rd of September. The updates already started rolling out for all Google Pixel variants. The rest of partner devices should receive these updates by the end of the year.
For the first time in a while, Google didn’t choose a dessert name for this edition of Android, moving instead to a simpler numerical naming scheme. This is part of a process that redesigned the Android identity, including a new logo and color palette. The little green droid lost his body, in exchange for a more expressive head, that is now always next to the Android wordmark.
The changes this new version brings are many and not exactly the subject of this channel. What matters for developers is whether their apps will continue working on the new platform and what upgrades they will have to perform to make use of the newest features that are now available. You can find a handy guide for the process in the official release article.
Some of the new features that you will have to include are the support for Dark Theme, the new gesture navigation system or the optimization for foldable devices. There are also changes and updates for the notification system, use of biometrics, use of codecs or improved networking APIs.
So don’t waste any more time and start checking your code. The latest Android version is already out there for the Google Pixel owners and will come soon to the rest of compatible devices.
Sources and references:
- https://android-developers.googleblog.com/2019/09/welcoming-android-10.html
- https://www.android.com/android-10/
- https://www.androidcentral.com/google-android-brand-redesign-2019
Firefox 69 has been released
Firefox 69 rolled out, bringing over support for new CSS logical overflow properties, JavaScript public instance fields as well as the Resize Observer and Microtask APIs.
Developers can also enjoy new debugging features, including console message grouping, event listener breakpoints, and text label checks.
Starting with Firefox 69 you can now use the new overflow-block and overflow-inline properties which control the overflow of an element’s content in the block or inline dimension respectively. Depending on the writing-mode property, they map to the existing overflow-x and overflow-y properties. This makes the content easier to localize, especially when adapting to languages using a different writing direction.
JavaScript classes can now include public instance fields. They allow you to specify properties you want the class to have from the start. This way the code is both more logical and self-documenting.
The Resize Observer API is one of the JavaScript solutions to the lack of native container queries. The Microtask API offers a low-level method that enables us to directly schedule a callback, with a reliable running order.
There are also a lot of interesting goodies that were added to the developer tools:
- you can now use event listener breakpoints or you can step through async functions;
- console messages can now be grouped;
- selecting an item to inspect will display in the info bar if that object is a flex or grid item…
- and the accessibility inspector now allows you to check for text labels.
More details are available in the official blog notification and the release notes linked below:
- https://hacks.mozilla.org/2019/09/firefox-69-a-tale-of-resize-observer-microtasks-css-and-devtools/
- https://www.mozilla.org/en-US/firefox/69.0/releasenotes/
Best practices for publishing an NPM package
I don’t often mention individual articles and tutorials. But this one is a valuable exception — and it might as well be considered a developer handbook in its own right. It is available on the pathof.dev website, but I wasn’t able to find the name of the author (just their GitHub handle).
The article is a comprehensive guide on the best practices for creating and publishing a new npm package. It is divided into several sections, each covering an important step of the process. You learn how to set up your new package, how to write your code and how to build the module. There are also indications on the things you have to do before publishing, the publishing process itself and the maintenance needed after your module becomes publicly available.
This looks like something that should be on the reading list for both aspiring and seasoned maintainers. And if you do read it, please let us all know what you think about it.
Cool things to do with developer tools
Debugging TypeScript in Firefox DevTools
Browser developer tools have become very effective over the years. A new article on the Mozilla Hacks blog shows us how you can use Firefox DevTools to debug your TypeScript applications. Indeed, you can’t do that natively — you need to configure your project to compile the TypeScript code into JavaScript and create a source-map file in the process.
The article has step-by-step instruction on how to compile TypeScript into JavaScript, how to generate the source-map and how the actual debugging process works. So now you have one more tool available to help you develop TypeScript apps faster and easier. Happy coding!
What’s New In Chrome 78 DevTools
Google Chrome developers continue their series of articles dedicated to the new features that will come in future versions on the Chrome Developer Tools. The newest entry is aimed at version 78 of Chrome.
Here are the main features that will be available:
- You can now use the Audits panel in combination with other DevTools features like Request Blocking and Local Overrides.
- The Background Services section of the Application panel now supports Payment Handler events.
- The Audits panel is now running Lighthouse 5.2 and ads new options to optimize third-party resources
- There is a new marker for Largest Contentful Paint in the Performance panel
- And you can now report DevTools issues directly from the Main Menu
These changes are already available in the Canary release of Google Chrome that you can install and run in parallel with the latest stable version.
Conference updates
This summer was a prolific one for industry events. And this week two of these events published their presentations on YouTube. So, even if you were not able to attend, you can now binge-watch all the talks.
JSFoo: VueDay 2019
The first playlist is from VueDay 2019, an event that took place recently in Bangalore India. It is part of the JSFoo family of events organized by HasGeek and is focused on the VueJS ecosystem.
- https://www.youtube.com/playlist?list=PL279M8GbNsetq9zfE2yXEuKcUhZR0mnz3
- https://jsfoo.in/2019-vueday/
React Rally 2019
The second playlist is from React Rally 2019. This is a community conference that happens in Salt Lake City, Utah, USA. As the name implies, the event is focused on React and topics interesting to React developers.
Call for Papers for VueConf 2020
Speaking of conferences, VueConf has opened a call for papers for the 2020 edition. The event will take place in Austin, Texas in early March. You have until October 15 to submit your proposal and you will find out over the next couple of weeks if you have been accepted or not.
For the full set of guidelines, please check the official page linked below.
Software updates and releases
Babel 7.6.0
Today the software updates and releases section is opened by Babel who advanced to v7.6.0. Notable updates include private static accessors support, parser support for V8 intrinsic runtime functions and update on the spec for nullish coalescing operator.
Release Notes for Safari Technology Preview 91
Webkit published the release notes for Safari Technology Preview 91. Some of the highlights are disabling legacy TLS 1.0 and TLS 1.1, exposing Geolocation interfaces to the global window object and a lot of improvements to the Web Inspector.
Node v12.10.0
Node got updated to v12.10.0. This includes updating npm to v6.10.3, adding a recursive option for rmdir() and allowing data to be read into a static buffer. Full details are available in the release notes.
Visual Studio Code v1.38
Microsoft continues to release monthly updates for the Visual Studio Code. The August release (v1.38) brings over the option to preserve case in Search and Replace, validation for string array settings, multi-line search using the Find functionality and support for TypeScript 3.6. For the full list of changes please check the official release notes.
Sass Module System preview
Sass users can now test the beta preview of the upcoming Sass Module System. Check the blog post below to find out how to install and how to use the new features.
The Developer of the Week
This episode the title of Developer of the Week goes to Chris Coyier. Chris is a web designer and a developer and got his first claim to fame with CSS Tricks. It started as a blog about how to build websites, it grew over time into an entire ecosystem.
The other thing he is well known for is being a co-founder of CodePen. CodePen is a social development environment for front-end web designers and developers. CodePen is a front-end focused IDE in the browser, allowing people to write HTML, CSS, JavaScript, and other related languages.
I’m not sure even he knows how many articles he wrote so far, not only on CSS Tricks and CodePen but on many other websites, magazines, and blogs. The list of interviews alone is several pages long. Chris also speaks and runs workshops at events all over the world like An Event Apart, Smashing Conf, and Webstock.
Chris got his name on the cover of two books. He’s a co-author for “Digging into WordPress”, together with Jeff Star.
The second one, “Practical SVG”, has been published by A Book Apart and it can teach you techniques for a solid workflow, from software basics to build tools to optimization.
Along with Dave Rupert, Chris is the co-host of a podcast called “ShopTalk”, a show about (you guessed it), building websites. He is also a frequent presence on “CodePen Radio”, a podcast all about what it’s like running a small web software business. The good, the bad, and the ugly.
Chris is a very positive person. He thinks the web is an incredible, inspiring, and empowering place and helping people know it better is good for everyone. So go and check his blog, his Twitter profile, and his podcast to get your dose of optimism.
- https://chriscoyier.net/
- https://twitter.com/chriscoyier
- https://digwp.com/book/
- https://abookapart.com/products/practical-svg
- https://shoptalkshow.com/
- https://blog.codepen.io/radio/
- https://codepen.io/chriscoyier
Question of the Day
Do you have a CodePen account already? If not, why don’t you?
Please leave your answers in the comment section or send them to https://twitter.com/frontendnexus.
That’s all there is in this edition. Follow Front End Nexus on Twitter at https://twitter.com/frontendnexus to be notified as soon as a new update happens. I also want to encourage you to subscribe to the YouTube channel at https://www.youtube.com/channel/UCgACtqiDmnSaskDIBsK54ww. I can unlock some more options once the channel hits 100 subscribers, so your support is highly appreciated.
Have a great and productive week and I will see you next time!
Top comments (0)