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: , ,

Apr 30

Two years after Epic Games revealed Unreal Engine 5 with a gorgeous tech demo, the next-gen game engine is officially available, Epic Games announced on Tuesday. The latest edition of the benchmark game development engine touts a new “fully dynamic global illumination” tool, plus a geometry system that allows creators to build games with “massive amounts of geometric detail.” After being available in Early Access since May 2021 and Preview since February 2022, Epic Games has now released Unreal Engine 5 which will no doubt go on to power some of the biggest upcoming releases.

Epic announced Unreal Engine 5’s launch with a Twitch and YouTube live stream showing high-performance visuals and real-time rendering. Unreal Engine 5 will also use a new World Partition system that, Epic says, “changes how levels are managed and streamed,” by dividing up the game world into a grid and streaming only its necessary cells.

Unreal Engine 5 is Epic’s latest in the line of game engines available to game developers big and small. While the release of a new game engine isn’t typically news that excites folks until video games start getting made with them, Epic first revealed Unreal Engine 5 with a blockbuster tech demo Called Lumen in the Land of Nanite, the tech demo was made to specifically demonstrate two of the marquis features of Unreal Engine 5. Lumen is a dynamic illumination tool where the light adapts to the world naturally and easily.

“With this release, we aim to empower both large and small teams to really push the boundaries of what’s possible, visually and interactively. UE5 will enable you to realize next-generation real-time 3D content and experiences with greater freedom, fidelity, and flexibility than ever before.” — Epic Games.

Epic also said that developers would be able to continue using “workflows supported in UE 4.27” but get access to the redesigned Unreal Editor, better performance, improved path tracing, and the list goes on.

A “preview” version of Unreal Engine 5 has been available for a while now, but on Tuesday it officially took Unreal Engine 4’s place as the current Unreal version: Unreal Engine 5 is out now. We can expect new Unreal-based games to use the latest engine, as well as many in-progress games, such as Stalker 2, the next Tomb Raider (also announced that day), and games from developers such as Remedy, Obsidian, and Ninja Theory. The video embedded above is a new UE5 tech demo compilation from Gears of War studio The Coalition.

Two new starter samples have also been made for developers: Lyra Starter Game, City Sample

Lyra Starter Game

Lyra Starter Game is a sample gameplay project built alongside Unreal Engine 5 development to serve as an excellent starting point for creating new games, as well as a hands-on learning resource. We plan to continue to upgrade this living project with future releases to demonstrate our latest best practices.

City Sample

The City Sample is a free downloadable sample project that reveals how the city scene from The Matrix Awakens: An Unreal Engine 5 Experience was built. The project—which consists of a complete city with buildings, vehicles, and crowds of MetaHuman characters—demonstrates how we used new and improved systems in Unreal Engine 5 to create the experience.

You will also find plenty of Linux and Vulkan improvements for Unreal Engine 5 including: Nanite and Lumen (with software ray tracing only) on Linux, the Unreal Build Tool was also upgraded to support Clang’s sanitizers for Linux (and Android), Vulkan and Linux support was also added to their “GameplayMediaEncoder”, compliant 64-bit image atomics in Vulkan that fixes all validation issues with 64-bit atomics and allows the use of RADV driver (AMD + Linux) for Nanite and Lumen, multiple crashes were solved for Linux. There are some features specific to open-world games, too, which may be useful for CD Projekt Red’s new Witcher game; the studio announced last month that it’s switching to Unreal Engine 5. One of those features is World Partition, which handles the on-the-fly loading and unloading of open worlds as players move through them. Adoption of UE5 will mean different things for different studios, but the big themes are workflow streamlining and high-fidelity geometry and lighting. The 2020 Unreal Engine 5 reveals video leads with its new “micro polygon geometry system,” Nanite, and its “global illumination solution,” Lumen. With Nanite and Lumen, Epic says that developers can import film-quality 3D assets with “massive amounts of geometric detail” and set up dynamic lights without worrying about certain complex technical steps, especially those to do with optimization. The engine handles the ‘making it run on our PCs’ part, or at least more of it.

UE5 also includes new modeling and animation tools, “a fundamentally new way of making audio,” and other features meant to simplify the work of game development and keep as much of it as possible in the Unreal Engine development environment. In fact, using Epic’s Quixel Megascans (super detailed environment models) and MetaHumans (realistic, customizable human models), which are free to use in Unreal Engine projects, you can make a playable game without ever minimizing the UE5 dev kit.

Another interesting fact about Unreal Engine 5 is, like the previous version, Unreal Engine 5 is free to download and use; Epic doesn’t collect royalties on indie games until they’ve earned over $1 million in revenue. It is now available on the Epic Games launcher. If you already had the UE5 preview version installed, it’s about a 5 GB update.

Tags: ,

Nov 07

Last week, Browserling, world’s leading cross-browser testing company, announced that they’re launching a network of online developer tools that offer simple, free and easy to use utilities for programmers.

They’re starting with four sites in the network and will be expanding their network to thirty websites. Each site in their network covers one specific programming category. There are no ads, popups, blinking download buttons, or other garbage. Just useful utilities that work in your browser. All utilities are created by skilled software engineers and they just do the right thing.

Let’s review first four sites in the network.

#1 Online JSON Tools


Online JSON Tools for Programmers
Online JSON Tools

Online JSON Tools is the first website in Browserling’s online tools network. It’s all about working with JSON data structures and objects. You can perform all the most common operations, such as minify JSON, beautify JSON, validate JSON, escape and unescape JSON, convert JSON to XML, CSV, TSV, and YAML, and encode/decode JSON to/from base64 encoding.

Soon you’ll also be able to syntax highlight JSON and edit it in your browser, display a summary of JSON object statistics, flatten JSON objects, convert JSON to HTML tables and LaTeX tables, compare two JSON structures, and encode and decode JSON to and from percent-encoding.

#2 Online String Tools


Online String Tools for Programmers
Online STRING Tools

Online String Tools is the second and the largest website in Browserling’s online tools network. It’s all about working with strings. There are over 100 tools in this website and many more are getting added every week. Online String Tools allow you to encode, decode, convert, filter, replace, and generate strings right in your browser.

For example, you can URL-encode and URL-decode strings, HTML-encode and HTML-decode strings, base64-encode and base64-decode strings, slash-escape and slash-unescape strings, generate random strings and generate strings from regular expressions. You can split strings, join strings, convert strings to binary and ASCII codes. And much more.

The upcoming tools in Online String Tools website will be a multi-replace string tool that allows you to replace multiple strings at once, online diffing tool that will show changes between two strings, Levenshtein distance calculator, which will also let you view the distance visually, a string rewriting system, Zalgo string generator, and a string typo generator.

#3 Online CSV Tools


Online CSV Tools for Programmers
Online CSV Tools

Online CSV Tools is all about working with Comma Separated Values (CSV) files and data. It currently offers over 20 CSV tools. You can convert CSV to JSON, XML, TSV, and YAML. Encode and decode CSV to and from base64 encoding, and perform various row and column operations, such as swap CSV rows, replace, append, insert, and delete CSV columns and transpose CSV.

Here’s a list of CSV tools that Browserling has planned adding in the next few months. You’ll be able to convert CSV to a PDF document and HTML, Excel, and LaTeX tables, then create images of CSV data, generate SQL queries from CSV files, merge CSV files, change quoting of CSV fields, delete empty CSV rows and columns, minify CSV and also diff two CSV files to find differences.

#4 Online XML Tools


Online XML Tools for Programmers
Online XML Tools

Online XML Tools is a collection of useful XML utilities for working with Extensible Markup Language documents and data structures. You can beautify XML, minify XML, escape and unescape XML, validate XML, and convert XML to various other data formats, such as JSON, CSV, YAML and XML. You can also encode and decode XML that’s been stored in base64 encoding.

Some of the upcoming tools in XML tools collection will be XML syntax highlighter and XML editor, then you’ll be able to view XML document statistics, and compare two XML files for visual differences.

#5 And beyond

Browserling is adding 25 or more sites to their network in the next 2-3 years. Here’s a list of upcoming sites:

  • Online TSV (Tab Separated Values) Tools
  • Online YAML (Yet Another Markup Language) Tools
  • Online PDF Tools
  • Online IMAGE Tools
  • Online AUDIO Tools
  • Online BROWSER Tools
  • Online CSS Tools
  • Online JS (JavaScript) Tools
  • Online CRYPTO Tools
  • Online RANDOM Tools
  • Online FILE Tools
  • Online TIME Tools
  • … and many more!

If you love what Browserling is doing you can follow @browserling on Twitter or follow Browserling on Facebook.