May 31

A career as a developer in any sector is pretty challenging. The profession can appear even more daunting when you are a junior developer. The lack of formal training about real-world software development scenarios during college days leaves the developers to learn on their own. Hence, they make many novice mistakes that stick for a long time. Without proper guidance, the initial habits can slow down the junior developer’s career progression.

Everyone makes several of these beginner’s mistakes during the initial phases of their career. If you are passionate about making it big in your development sector, here is a list of the top ten common mistakes you need to be aware of as a junior developer.

Focusing on Code Instead of the Big Picture

It’s easy to get bogged down in the details when you’re starting out. But it’s important to remember that code is only a small part of the development process. Focusing on the big picture will help you understand the overall goal of your project and help you make better decisions. To come up with good solutions, you need to spend time thinking. You have to remember that the author of React did not come up with the idea for the framework in a day. You have to focus on your target and follow up on whatever you need to get to that target.

Not Knowing Their Self Worth

When developers are fresh out of their institutions or when they are out in the market looking for a job, they most likely have no idea about their worth. Depending on individuals, they either overestimate their capability or underestimate it. In either case, not knowing is not helpful to get the right start to their career.

Developers who overestimate their capabilities tend to have high expectations from their first job. They feel they are doing the company a favor. This mindset reflects in the interviews and, later, in their work.

Again, developers who underestimate their abilities tend to take the very first offer they get. They do not try to find out if they are paid as per the market standard. They also prefer not to ask what kind of work they will be offered or whether the work culture is flexible and a good fit for them.

It is not always easy to negotiate during your first job search. Circumstances can compel you to start earning as early as possible. If that is the case, surely you can latch on to the first software job you get. Once you start making money, you can further your career in your own time and money. You can also find out if a position is suitable for you by doing a bit of research on the internet. Learn about the company culture from the reviews provided by employees on various sites.

Not Reading Documentation

Junior developers rarely read documentation, or they only read it superficially. They often skip it and start working on a subject or solving their problem. But the fact is that documentation is an important source of information. And you need to read it in-depth if you want to be a successful developer.

Documentation can help you learn the syntax and usage of a language or library, as well as how to use a tool or library properly. It can also help you understand the API for a particular software system. So, be sure to read the documentation.

Not Asking Questions

A common mistake junior developers often make is they do not ask questions proactively. Some developers are shy in asking questions. Others might be hesitant because they think their query might be a silly on.

Whichever might be the reason, they need to overcome the hurdle to be successful in their career. They should ask questions every time they do not understand. People will be more than happy to explain when they are on the topic.

Sometimes, the question will not have a straightforward answer. People might give their opinion based on their knowledge. If you are not satisfied, you can ask someone else to confirm your understanding. The idea is to clear out any doubt as quickly and as confidently as possible.

Lacking of Practice

Junior developers often underestimate the importance of practice. It’s not enough to just learn the theory — you also need to practice what you have learned.

Practice makes a man perfect, and the more you practice, the better you will become at your work. Try to find opportunities to practice your skills, whether it’s through tutorials, exercises, or projects. No one is born as a great developer. They become one by working hard and practicing‌.

They should practice according to their field of work. If you are a software developer, work hard on your problem-solving skills, programming languages, and accuracy and attention to details. These sometimes may seem very easy for you, but if you want to develop these skills, then you have to practice them. Everything takes practice!

Conclusion

This list summarizes experiences shared by other developers over the year and my experience as well. As a unique individual, your experiences might vary from others. If you remain vigilant and stay away from these mistakes, you can achieve a great start as a developer. Hence, understand the mistakes and take action based on your situation. I am sure, armed with the above knowledge and perseverance, you can achieve the professional and personal goals you set for yourself.

Tags:

May 30

Python is a very popular programming language today and often does not need an introduction. It is widely used in various business sectors, such as programming, web development, machine learning, and data science. Given its widespread use, it’s not surprising that Python has surpassed Java as the top programming language. In this article, you will discover the top ten reasons why you should learn Python.

What is the Python

Python is a high-level, object-oriented programming language with built-in data structures and dynamic semantics. It supports multiple programming paradigms, such as structures, object-oriented, and functional programming, which was created by Guido van Rossum. It is an interpreted, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. Python is dynamically typed and garbage-collected. It supports different modules and packages, which allows program modularity and code reuse.

Python was initially started as a successor for the ABC programming language. According to the LaTeX-based early Python documentation (1991), the goal of Python was to offer a better programming language for scripting by filling the gap between C and traditional Shell scripting languages. The issue is that you can’t access C-based operating system APIs natively in Bash. On the other hand, writing Shell scripts in C is indeed more time-consuming than Bash. Python became one of the most popular languages because of the simple syntax, full-featured standard library, rich open-source library ecosystem, and advanced frameworks. New features like type hints and impressive open-source libraries/frameworks make Python suitable for enterprise apps.

Better Practical Alternative

A lot of tech companies do a series of interviews to find top engineering candidates. These interviews usually include technical, HR, and management, etc. In technical interviews, interviewers often ask candidates to write pseudocodes for various algorithmic challenges. Pseudocodes are good, but they come with a small problem. Pseudocodes typically don’t have a standard syntax, so candidates often tend to borrow some syntax from their favorite languages. As a result, candidates write various pseudocodes for one technical problem.

What if we have a standard pseudocode syntax? How about pseudocode syntax, which actually works as a programming language? Writing the Python code is undoubtedly more productive than writing traditional pseudocodes. Almost all on-site development interviews typically test candidates’ analytical skills — not how many fancy syntaxes they know in a specific programming language, so using Python in technical interviews saves everyone’s time.

Usability & Flexibility

Programmers initially used Python on personal computers for various general-purpose scripting requirements like automation. Later, programmers started writing GUI apps and web apps with Python. Now, Python programmers can use the Kivy. Again, not only is Python easy to learn but also, it’s flexible. Over 125,000 third-party Python libraries exist that enable you to use Python for machine learning, web processing, and even biology. Also, its data-focused libraries like pandas, NumPy, and matplotlib make it very capable of processing, manipulating, and visualizing data — which is why it’s favored in data analysis. It’s so accommodating, it’s often called the “Swiss Army Knife” of computer languages.

Career & Earning Potential

Going hand-in-hand with lightning speed growth, Python programming is in high demand for jobs. Based on the number of job postings on one of the largest job search platforms, LinkedIn.com, Python ranks #2 in the most in-demand programming languages of 2020.

As Python is the second-highest paid computer language, you can expect an average salary of USD 110,026 per year. Nothing to cry about! If you can land a job with Selby Jennings, you’ll earn the most. The average salary there is USD 245,862. Amazing!

Python Security

The Python Software Foundation and the Python developer community take security vulnerabilities ‌seriously. A Python Security Response Team has been formed that does triage on all reported vulnerabilities and recommends appropriate countermeasures. To reach the response team, send an email to security at python dot org. Only the response team members will see your email, and it will be treated confidentially.

The PSRT mailing list is tightly controlled, so you can have confidence that your security issue will only be read by a highly trusted cabal of Python developers. If for some reason you wish to further encrypt your message to this mailing list (for example, if your mail system does not use TLS), you can use our shared OpenPGP key, which is also available on the public key servers.

Incredibly supportive community

While programming is often misinterpreted as a solo-sport, one of the greatest tools a programmer will ever have is the support of their community. Thanks to online forums, local meet-ups, and the open source community, programmers continue to learn from and build on the success of their predecessors. GitHub is where developers store project code and collaborate with other developers. With over 1.5M repositories on GitHub and over 90,000 users committing or creating issues in these repositories, Python has the second largest GitHub community.

In addition to online communities, Python User Groups are places where developers can meet others working with Python to share resources and solutions and cheesy Python jokes.

Conclusion

Now that you know the reasons to learn Python Programming, and how it can give you a career boost, the next step is simple. You just have to learn the code and start utilizing it. Python has become the language of choice for AI researchers, who have produced numerous packages for it. Reusing, recycling and improving other programmers’ code is fundamental to being a successful programmer, which is why Python’s robust programming communities help make it a solid programming language to learn.

Tags: , ,

May 24

The Windows Subsystem for Linux (WSL) is a feature of the Windows operating system that enables you to run a Linux file system, along with Linux command-line tools and GUI apps, directly on Windows, alongside your traditional Windows desktop and apps. You can now preview Windows Subsystem for Linux (WSL) support for running Linux GUI applications (X11 and Wayland) on Windows in a fully integrated desktop experience. Now we have 2 different WSL here. In this article, let’s try to see how both WSL 1 WSL 2 are different from each other.

Comparing features

As you can tell from the comparison table above, the WSL 2 architecture outperforms WSL 1 in several ways, with the exception of performance across OS file systems, which can be addressed by storing your project files on the same operating system as the tools you are running to work on the project.

WSL 2 is only available in Windows 11 or Windows 10, Version 1903, Build 18362 or later. Check your Windows version by selecting the Windows logo key + R, type winver, select OK. (Or enter the ver command in Windows Command Prompt). You may need to update to the latest Windows version. For builds lower than 18362, WSL is not supported at all.

WSL 2 enables Linux GUI applications to feel native and natural to use on Windows.

  • Launch Linux apps from the Windows Start menu
  • Pin Linux apps to the Windows task bar
  • Use alt-tab to switch between Linux and Windows apps
  • Cut + Paste across Windows and Linux apps

You can now integrate both Windows and Linux applications into your workflow for a seamless desktop experience.

What’s new in WSL 2

WSL 2 is a major overhaul of the underlying architecture and uses virtualization technology and a Linux kernel to enable new features. The primary goals of this update are to increase file system performance and add full system call compatibility.

WSL 2 architecture

VM experience is often slow to boot up, isolated, consumes a lot of resources, and requires your time to manage it. WSL 2 does not have these attributes. WSL 2 provides the benefits of WSL 1, including seamless integration between Windows and Linux, fast boot times, a small resource footprint, and requires no VM configuration or management. While WSL 2 does use a VM, it is managed and run behind the scenes, leaving you with the same user experience as WSL 1.

Integration of Linux kernel

The Linux kernel in WSL 2 is built by Microsoft from the latest stable branch, based on the source available at kernel.org. This kernel has been specially tuned for WSL 2, optimizing for size and performance to provide an amazing Linux experience on Windows. The kernel will be serviced by Windows updates, which means you will get the latest security fixes and kernel improvements without needing to manage it yourself. The WSL 2 Linux kernel is open source.

Increased file IO performance

File intensive operations like git clone, npm install, apt update, apt upgrade, and more are all noticeably faster with WSL 2.

The actual speed increase will depend on which app you’re running and how it is interacting with the file system. Initial versions of WSL 2 run up to 20x faster compared to WSL 1 when unpacking a zipped tarball, and around 2-5x faster when using git clone, npm install and cmake on various projects.

Full system call compatibility

Linux binaries use system calls to perform functions such as accessing files, requesting memory, creating processes, and more. Whereas WSL 1 used a translation layer that was built by the WSL team, WSL 2 includes its own Linux kernel with full system call compatibility. Benefits include:

  • A whole new set of apps that you can run inside of WSL, such as Docker and more.
  • Any updates to the Linux kernel are immediately ready for use. (You don’t have to wait for the WSL team to implement updates and add the changes).

How to install WSL and update to WSL 2

Before installing any Linux distributions on Windows, you must enable the “Windows Subsystem for Linux” optional feature.

Open PowerShell as Administrator and run:

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

To only install WSL 1, you have to restart your machine and move on to install your Linux distribution of choice. You can download it from the Windows store.

To update to WSL 2, you must have a running Windows 10, updated to version 2004, Build 19041 or higher.Before installing WSL 2, you must enable the “Virtual Machine Platform” optional feature.

Open PowerShell as Administrator and run:

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Restart your machine to complete the WSL install and update to WSL 2.

To activate WSL 2 you need to update the kernel component. You can do it by visiting here and install the update by following the steps.

You can check the WSL version assigned to each of the Linux distributions you have installed by opening the PowerShell command line and entering the command (only available in Windows Build 19041 or higher): wsl -l -v

wsl --list --verbose

To set a distribution to be backed by either version of WSL please run:

wsl --set-version <distribution name> <versionNumber>

Make sure to replace <distribution name> with the actual name of your distribution and <versionNumber> with the number ‘1’ or ‘2’. You can change back to WSL 1 at any time by running the same command as above but replacing the ‘2’ with a ‘1’.

If you want to make WSL 2 your default architecture you can do so with this command:

wsl --set-default-version 2

Conclusion

Due to the limitations in WSL1 Microsoft re-invented the WSL1 and introduced WSL2 which is available in Windows 10 version 2004 update. Instead of using a compatibility layer which converts Linux system calls to windows system calls, WSL2 offers its own isolated Linux kernel running on a thin version of the Hyper-V hypervisor. And this gives WSL2 much more opportunity to handle things better than WSL1. Hopefully this guide and informations will help you to understand why WSL2 is a better choice over WSL1.

Tags: , ,

May 23

File compression is a key technology for digitization, as it can sustainably relieve the resources of network-based infrastructures. AVIF (AV1 Image File Format) is a modern image file format specification for storing images that offer a much more significant file reduction when compared to other formats like JPG, JPEG, PNG, and WebP. Compared to JPEG, AVIF compresses files more efficiently and provides higher image quality. Major global corporations in the digital industry are interested in the implementation of the new image format.

What is AVIF?

AVIF or AV Image Format is an open and royalty-free image format based on the AV1 codec, and similar to AV1 – AVIF provides a very high compression rate. Being royalty-free makes it one of the best among its peers.

A consortium of leading digital economy players was founded in 2015, tasked with the improvement of image file compression. The Alliance for Open Media (AOMedia), whose members include Amazon, Cisco, Facebook, Google (including YouTube), Mozilla, Microsoft, Netflix, Intel, AMD, Tencent and Apple, focuses on data traffic online. Because images use up over half of the average bandwidth of a website, improved image compression not only benefits the performance of individual websites, but the overall performance of the web is optimized because smaller files accelerate data traffic, reduce energy consumption, and use less storage space.

For the new technology to become established as a standard, it should not incur any licensing fees and should be freely usable as an open source format. In March 2018, AOMedia published the specification of a new free video codec. Since then, a final first version of AOMedia Video 1 (AV1 for short) has been officially launched.

The industrial consortium’s efforts have resulted not only in a license-free, open video codec for moving images, but also in the AV1 Image File Format (AVIF) for still images. AVIF combines the efficient compression algorithms of the AV1 video codec with the container technology of the HEIF format (High Efficiency Image File), which has been used by Apple for some time now. It is a static image format developed by Alliance for Open Media (AOMedia) in conjunction with Google, Cisco, and Xiph.org from an extraction of the keyframes of the video format AV1.

Advantages of AVIF

AVIF offers many advantages. Among its major ones are:

  • AV1 and AVIF formats are open source codecs. There are no additional costs for using AOMedia technology. This doesn’t just benefit the big players, but the entire open source community.
  • The fact that AVIF is free of charge is a major advantage over the HEIF format, which is currently still a preferred format for Apple.
  • The AVIF format meets the requirements of a modern image format by combining high image quality (especially for HDR images with greater color depth than 8 bits) and many functions (similar to HEIF, the format is superior to the JPEG format in this regard).
  • Compared to the established JPEG format, AVIF currently reduces the image size by an average 50 percent (similar to the comparably efficient HEIF format). In addition, AVIF is more efficient than its competitor WebP, which has failed to establish itself.
  • Highly efficient AVIF compression reduces the load times of websites, conserves network bandwidth, and reduces data streams for video-on-demand, cloud, and web space providers.
  • Many AVIF advantages extend beyond its online use. Image archives, photographers, printers, etc. can also benefit from the format’s development to receive higher resolution images that relieve available resources.

With these advantages, there lies a single disadvantage, which is its availability in the market. AVIF is a fairly new image format; though it’s gaining a lot of praise worldwide, AVIF still lacks browser support. Browsers are a primary medium for most images that we see in everyday life. Hence browser compatibility is crucial.

Current support for AVIF

Compared to the popular JPEG format, which has been around since the early 1990s, AVIF is a relatively new file format for static images. The newcomer has yet to prove itself in practical tests. It is therefore difficult to reliably predict the future of the image format. However, due to its many advantages, the chances of a nationwide implementation are high.

The video-on-demand provider Netflix is an important pioneer in the application of the new technology. The streaming specialist is currently testing the AVIF format in order, for example, to convert the platform’s user interface from SDR to HDR (e.g., to improve previews). A gradual introduction of the format is planned, whereby it is used for a continuously increasing number of content and platforms.

Browsers and operating systems are also getting used to the new technology. Even with Windows adopting AVIF to save space in their systems and giving a push to increase the importance of this format, content providers still have to rely on JavaScript if they want to use this image format. In addition, although AVIF has been recently adopted and rolled out in Google Chrome as well, it still doesn’t enjoy complete universal cross browser availability as Firefox and Safari still have to give support for it.

Conclusion

AVIF has all the prerequisites to establish itself successfully and define a new image standard online to replace JPEG. Once the remaining technical hurdles are resolved (e.g., slow and resource-guzzling coding processes), the multifunctional image format and the AV1 video codec offer high quality. Finally, this is also an important step towards sustainability, as AVIF conserves energy, and network and storage resources. Although AVIF has the backing of big top tech companies and some of them like Netflix, Google and Microsoft have already implemented this format. Currently, AVIF looks like a future car packed with extraordinary features, but people are still skeptical about involving it in their lives.

Tags:

May 22

After a long time, Bootstrap v5.2.0-beta1 was released last week. This version of bootstrap is the biggest release update till now and is being billed as the framework’s most significant release since Bootstrap 5.0 two years ago. This version features a redesigned document, all components of CSS Variable, responsive offcanvas, new helpers and utilities, improved buttons and inputs, and many underlying improvements. Builders are offering CSS variables for all components and new helpers and utilities in the latest planned upgrade to the Bootstrap web development framework. Let’s look at some major changes in Bootstrap 5.2.0.

Redesigned documents

The development team rewrites the whole home page, To better show Bootstrap All functions of. Changes include simplifying the navigation bar, Cancel sub navigation, and changing the sidebar to always show links to each page to improve discoverability. It also shows Updated Quick Start Guide. It is now through CDN Use Bootstrap Step-by-step guide.

The updated navigation bar also has a new version selector, which starts from v5.2.0 And higher. On any page, click versions and view options to navigate to previous minor versions of the same page. When a page does not exist in the old version, you will see the disabled version in the drop-down list. Official expression, it currently has no plans to link pages across major versions.

Document search is now powered by the latest version of Algolia DocSearch Provide support , Brings improved design. You can even display your recent searches.

Design adjustment

In order to cooperate with the redesign of documents, the development team made some detailed border radius updates for the buttons and input methods. Components now have improved theming and CSS variables for real-time customization. Color-mode support will be added soon, starting with dark mode.

It is easier to modify custom components. Here are two examples:

New.text-bg-color helpers have been added. Developers can now use the.text-bg-* helpers to set background colour with contrasting foreground colour instead of setting individual.text-* and.bg-* utilities.

Font-weight utilities have been expanded to include.fw-semibold for semibold fonts.

Component CSS variables

With this release, all components now include CSS variables to enable real-time customization, easier theming, and (soon) color mode support starting with dark mode. Every component page has been updated to include a reference guide of the relevant CSS variables.

--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$body-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Values for virtually every CSS variables are assigned via Sass variable, so customization via CSS and Sass are both well supported. Also included for several components are examples of customizing via CSS variables.

New _maps.scss

Bootstrap v5.2.0-beta1 introduces a new Sass file with _maps.scss that pulls out several Sass maps from _variables.scss to fix an issue where updates to an original map were not applied to secondary maps that extend it. It’s not ideal, but it resolves a longstanding issue for folks when working with customized maps.

For example, updates to $theme-colors were not being applied to other maps that relied on $theme-colors (like the $utilities-colors and more), which created broken customization workflows. To summarize the problem, Sass has a limitation where once a default variable or map has been used, it cannot be updated. There’s a similar shortcoming with CSS variables when they’re used to compose other CSS variables.

This is also why variable customizations in Bootstrap have to come after @import “functions”;, but before @import “variables”; and the rest of the import stack. The same applies to Sass maps—you must override the defaults before they get used. The following maps have been moved to the new _maps.scss:

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

New helpers and utilities

  • Added a new .text-bg-{color}helpers. Now you can use .text-bg-* helpers To set the background color with a contrasting foreground color, Instead of setting up a separate .text-* and .bg-* utilities.
  • Expanded font-weightutilities, Include for semibold fonts Of .fw-semibold.
  • Expanded border-radius utilities , Includes two new sizes :.rounded-4 and .rounded-5, To provide more options.

Responsive offcanvas

Offcanvas component now has responsive variations. The original .offcanvas class remains unchanged—it hides content across all viewports. To make it responsive, change that .offcanvas class to any .offcanvas-{sm|md|lg|xl|xxl} class.

Coming soon: Dark mode!

Much of the work they have done in v5.2.0-beta1 has been in support of adding dark mode to Bootstrap. Yes, it’s finally coming in their next minor release!

They have also mentioned “We’re adding tons of new global CSS variables, cleaning up docs styles, and better supporting overall customization”.

Coming In V5.3.0

There’s lots to look forward to in their next minor release, though they’ll likely have some bug fixes along the way.

  • Dark mode! As mentioned above, they’re actively working to bring more nuanced color options and color modes to Bootstrap.
  • An attribute toggle plugin to programmatically toggle classes and attributes by only writing HTML.
  • CSS variables for forms!
  • CSS variables for forms!
  • Sticky headers for tables
  • Mixins and functions for modifying the utilities API.
  • An option for “always floating” floating forms.

Conclusion

More advancements in this direction are expected as Version 5 development progresses. Version 5.2.0 includes investments in helpers and utilities to make it easier to modify custom components. The project website provides access to Bootstrap v5.2.0-beta1. You can Head to https://getbootstrap.com to get the latest release. Hopefully the next update will be beneficial to those who have been wanting the above mentioned features.

Tags: ,

May 19

It’s time again for a Flutter stable release and they are incredibly proud to announce Flutter 3! Only three months ago, they announced Flutter support for Windows. Now they have announced that Flutter will be stable for macOS and Linux, in addition to Windows!

It is said that Flutter has merged 5248 pull requests! They have announced several things as part of this release, including the update on Flutter’s support for macOS and Linux, significant performance improvements, mobile and web updates — and much more! In addition, they have announced about the reduction in support for older versions of Windows, and a short list of breaking changes. In today’s discussion we will deep dive into the latest Flutter release. So, let’s get down to business!

Flutter 3 brought joy to desktop platforms

With the release of Flutter 3, the labor of adding platforms is complete as developers on the stable channel can now build apps for macOS as well as Linux devices and expect first-class support. For Linux, this effort has been assisted by Canonical, developers of Ubuntu, who have been using Flutter to create core experiences within Ubuntu, including parts of the setup flow. Meanwhile, part of supporting macOS is that both Flutter and the underlying Dart programming language now have native support for Apple Silicon. Better yet, you can ship Flutter apps in the Universal Binary format, allowing them to run effectively on both Apple Silicon and Intel based Macs. This Apple Silicon support also extends to developers, with the Flutter and Dart SDKs both now ready to run on the latest generations of Mac Linux and macOS have reached stable and these following features have been included:

macOS system menu bar

You can now create platform-rendered menu bars on macOS using the PlatformMenuBar widget, which supports insertion of platform-only menus, and control over what appears in the macOS application menus.

Full support for international text input

International text input, including for languages that make use of text input method editors (IMEs) such as Chinese, Japanese, and Korean is fully-supported on all three desktop platforms, including third-party input methods such as Sogou and Google Japanese Input.

Accessibility

Flutter has included new accessibility services. Windows, macOS, and Linux all of them support this accessibility services such as screen-readers, accessible navigation, and inverted colors.

Universal binaries by default on macOS

As of Flutter 3, Flutter macOS desktop apps are built as universal binaries, with native support for both existing Intel-based Macs and Apple’s latest Apple Silicon devices.

Deprecating Windows 7/8 for development

With this release, they have been raising the recommended Windows version for development to Windows 10. While they aren’t blocking development on older versions (Windows 7, Windows 8, Windows 8.1), these versions are no longer supported by Microsoft and they will provide limited testing on these releases. But while they promised to offer ‘best effort’ support for older versions, they encouraged us to upgrade.

Mobile updates

Udates to mobile platforms includes the following:

Foldable phone support

The Flutter 3 release supports foldable mobile devices. In a collaboration spearheaded by Microsoft, new features and widgets will allow you to create dynamic and delightful experiences on foldable devices.

As part of this work, MediaQuery now contains a list of DisplayFeatures, describing the bounds and states of device elements like hinges, folds, and cutouts. Additionally, the DisplayFeatureSubScreen widget now positions its child widget without overlapping the bounds of DisplayFeatures, and has already been integrated with the framework’s default dialogs and pop-ups, making Flutter aware and responsive to these elements out of the box.

iOS variable refresh rate support

Flutter now supports variable refresh rate on iOS devices with ProMotion displays, including iPhone 13 Pro and iPad Pro. On these devices, Flutter apps can render at refresh rates reaching 120 hz, which were previously limited to 60 hz. This results in a smoother experience during fast animations such as scrolling. See flutter.dev/go/variable-refresh-rate for more details.

Simplified iOS releases

They have added new options to the flutter build ipa command to simplify releasing iOS apps. When you’re ready to distribute to TestFlight or the App Store, run flutter build ipa to build an Xcode archive (.xcarchive file) and an app bundle (.ipa file). You can optionally add –export-method ad-hoc, –export-method development, or –export-method enterprise. Once the app bundle is built, upload it to Apple through the Apple Transport macOS app or on the command line using xcrun altool (run man altool for App Store Connect API key authentication instructions). After uploading, your app is available for release to TestFlight or the App Store. After setting up your initial Xcode project settings, such as display name and app icon, you no longer need to open Xcode to release your app.

Web updates

Updates for web apps include the following:

Image decoding

Flutter web now automatically detects and uses the ImageDecoder API in browsers that support it. As of today, most Chromium-based browsers (Chrome, Edge, Opera, Samsung Browser, and more) have added this API.

The new API decodes images asynchronously off the main thread using the browser’s built-in image codecs. This speeds up image decoding by 2x, and it never blocks the main thread, removing all jank that was previously caused by images.

Web app lifecycles

The new lifecycle API for Flutter web apps gives you the flexibility to control the bootstrap process of your Flutter app from the hosting HTML page, and helps Lighthouse analyze the performance of your app.

Conclusion

Now that Flutter 3 has reached the six major platforms — Android, iOS, Web, Windows, macOS, and Linux — the big question some may have is “what’s next?” For Google, creating support for those platforms was intended to give Flutter a strong foundation to build upon. Now that the foundation has been laid, Google will continue to build upon it in two key avenues: improving developer productivity and expanding what Flutter can do.

Tags: ,

May 15

React 18 was released in March 2022. Officially, React 18 is now ready to use! This release focuses on performance improvements and updating the rendering engine. React 18 sets the foundation for concurrent rendering APIs that future React features will be built on top of.

In my opinion, the latest feature that revolutionized the React Ecosystem was React Hooks, introduced in React 16.8 back in 2019. Since then, we have seen many versions being released. But without any major changes, what will happen in React 18? In this tutorial, we will have a quick look at the features released in React 18, and explain a few major concepts such as concurrent rendering, automatic batching, and transitions.

New Features

Automatic Batching

React 18 features automatic batching. To understand batching, let’s consider the example of grocery shopping from the same React Working Group discussion.

Let’s say that you are making pasta for dinner. If you were to optimize your grocery trip, you would create a list of all the ingredients that you need to buy, make a trip to the grocery store, and get all your ingredients in one trip. This is batching.

Without batching, you would start cooking, find out you need an ingredient, go to the grocery store and buy the ingredient. When you come back and continue cooking, you’ll find out you need another ingredient, you’ll then go to the grocery store again to buy that ingredient

In React, batching helps to reduce the number of re-renders that happen when a state changes, when you call setState. With this new exciting feature, React will combine multiple setState() calls into a single re-render to improve performance. Before this, if we had multiple setState() inside of a setTimeout(), React will re-render for every state update which sometimes causes performance issues if we have larger components. Previously, React batched state updates in event handlers.

You may already be familiar with this. This feature was available in React 17, but now it comes out of the box.

// React 17
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // The component will be rendered twice.
  }, 1000);


// React 18
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // The component will be rendered only once.
  }, 1000);

Transitions

This new feature lets the dev split the state update into two categories: urgent and low priority.

Transitions can be used to mark UI updates that do not need urgent resources for updating. For some actions, like selecting in a dropdown or updating an input, you want the action to respond immediately, so now we could distinguish between an urgent update and a non-urgent one. These non-urgent updates are called transitions. By marking non-urgent UI updates as “transitions”, React will know which updates to prioritize. This makes it easier to optimize rendering and get rid of stale rendering.

Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or keypresses come in.

import { startTransition } from 'react';

// Updating state with urgent priority
setInputValue(input);

// Inside startTransition the updates won't be urgent
// and can be interrupted
startTransition(() => {
  setSearchQuery(input);
});

New Suspense Features

Finally, we will have Suspense on the server. In the server-rendered apps, we will have only one Suspense API.

In a client-rendered app, you load the HTML of your page from the server along with all the JavaScript that is needed to run the page and make it interactive.

If, however, the JavaScript bundle is huge, or you have a slow connection, this process can take a long time and the user will be waiting for the page to become interactive, or to see meaningful content. For optimizing the user experience and avoiding the user having to sit on a blank screen, we can use server rendering.

Server rendering is a technique where you render the HTML output of your React components on the server and send HTML from the server. This lets the user view some UI while JS bundles are loading and before the app becomes interactive. Server rendering further enhances the user experience of loading the page and reducing the time to interact.

Before React 18, this part was often the bottleneck of the app and would increase the time it took to render the component. Now React 18 adds support for Suspense on the server. With the help of suspense, you can wrap a slow part of your app within the Suspense component, telling React to delay the loading of the slow component. This can also be used to specify a loading state that can be shown while it’s loading.

Strict mode

Strict mode in React 18 will simulate mounting, unmounting, and re-mounting the component with a previous state. This sets the ground for a reusable state in the future where React can immediately mount a previous screen by remounting trees using the same component state before unmounting.

Strict mode will ensure components are resilient to the effects of being mounted and unmounted multiple times.

IE11 no longer supported

IE11 is no longer supported since React 18. If your app needs to continue bringing support to IE11, you will need to stay at React 17. x.

Conclusion

Some cool features like Automatic Batching or Adding Suspense should improve the performance of React in the latest release. I’m really excited to see how these new features will perform in a real-life app, but they look more than promising. In a summary, React 18 sets the foundation for future releases and focuses on improving the user experience.

Upgrading to React 18 should be straightforward and your existing code should not break after the update. The upgrade process should not take more than an afternoon.

Tags:

May 01

Google Play is officially launching its own version of privacy-related “nutrition labels” for apps. They are introducing a new section in Play Store listings that requires developers to describe the data their app gathers and how they will use it. This will be like a privacy label giving users crucial information at a glance, which should be enough to help them decide if they would like to proceed with the installation.

According to Google, users want to understand the purpose of the apps to collect their data and whether the developer is sharing it with third parties, as well as how developers protect that data. The new section is titled ‘Data safety’ and will appear alongside the usual sections like ‘About this app’ and ‘Ratings and reviews’. It will function as a privacy label, providing users with key information shortly, which should be enough to let them decide whether or not to install the app. Not only will developers declare what data they collect, but also what data they share with third parties, essentially disclosing the purpose behind the collection. Google showed off its version last year but is only beginning to roll it out this week. According to them, it will begin to roll out the new Google Play Data safety section to users on a gradual basis so that Android users won’t see this new section immediately but over the next couple of weeks.

Suzanne Frey, Vice President of Product, Android Security, and Privacy at Google said in a blog post, “You alone are responsible for making complete and accurate declarations in your app’s store listing on Google Play,”

Failure to do so would lead to policy violations, leading to the suspension of the app in the Google Play Store.

“Google Play reviews apps across all policy requirements; however, we cannot make determinations on behalf of the developers of how they handle user data. Only you possess all the information required to complete the Data safety form”. “When Google becomes aware of a discrepancy between your app behavior and your declaration, we may take appropriate action, including enforcement action,” explained Frey.

If the user wants to learn more about a particular entry, tapping on the corresponding item will collapse the menu to reveal more information on what is collected or shared. The third pillar of the Data Safety section will be the app’s security practices, which describe the security mechanisms employed to protect the collected data, like the MASVS standard. This third section also clarifies whether users are given the option to ask for the deletion of their data at any time. And finally, Data Safety will specify if the app follows Google Play Families Policy, which is geared toward children’s protection.

Developers can begin declaring how collected data is used starting today, with the deadline to complete their submissions being July 20th, 2022.

Google told that developers would provide this information themselves, which Google will not confirm. However, if it is discovered that a developer has misrepresented their data use disclosures, they will be required to fix the provided information. Google is essentially relying on developers, to be honest in the information they provide to users in this section.

While Google’s move is beneficial to Android users, a similar feature called ‘Privacy Nutrition Labels’ was already introduced by Apple in 2020. Apple also released a similar feature as part of numerous privacy-enhancing features in last year’s iOS 14. This is another case where competition in the mobile OS space has brought positive developments, giving users more insight and control over how their data are handled by the various software that runs on their smartphones.

While both sets of labels focus on informing users about how apps collect and manage data and user privacy, there are some key differences. Apple’s labels largely focus on what data is being collected, including data used for tracking purposes, and on informing the user what’s linked to them. Google’s labels, meanwhile, put a bigger focus on whether you can trust the data that’s collected is being handled responsibly by allowing developers to disclose if they follow best practices around data security. The labels also give Android developers a way to make their case as to why they collect the data directly on the label, so users can understand how the data is used — for app functionality, personalization, etc. — to help inform the user’s decision to download the app. They can also see if the data collection is required or optional.

Up until now, Android apps on the Play Store had to list a link to their Privacy Policy under the “Additional Information” section and provide a contact email. Since this privacy policy is hosted on an external location, it’s subject to modifications, might be vague, may not disclose all the crucial details about data collection and protection, and may even lead to a broken link.

This Data Safety gives users a clear understanding of what happens with their data without requiring them to spend time digging into sections, while it also empowers Google with enforcement. Moreover, since reading large texts of legal jargon isn’t exactly what users look forward to when browsing the Google Play Store for new apps, almost nobody checks these.

App privacy labels have already been accused of being an unreliable source of information following their launch on the App Store. According to a report by The Washington Post last year, many of the labels they reviewed in a spot-check provided false information. For instance, apps claiming they collected no data were actually found to be doing the opposite — collecting it and sharing it. Google is confident about the step it is taking and also claims to be honest about this Data Safety feature they are bringing.

With a large number of scam apps, malware, and usury apps found on Google Play, this new Data Safety section will not only be useful for Android users but also allow Google to find policy violators more quickly. For more information on the new system, what it includes, and how it works, check out Google’s support page.

Tags: , ,