The latest set of JavaScript related releases, updates, news, tips and secrets. Stay up-to-date with JS!

Browsers news

WebAssembly: How and why

WebAssembly is a new type of code that can be run in modern browsers. It was created to get better performance on the web. It’s a low-level binary format that has a small size, so it’s fast to load and execute. You do not write WebAssembly, you compile other higher level languages to it.

WebAssembly is a language for a conceptual machine that’s the least common denominator of the popular real world hardware. When the browser downloads the WebAssembly code it can quickly turn it to any machine’s assembly.

WebAssembly module in an application

  • Why we need WebAssembly:

Think about the cases where you need to use software outside of the browser: video games, video editing, 3D rendering, or music production. These applications do a lot of calculations and require a high degree of performance.


  • What WebAssembly brings to the table:
  1. speed
  2. portability
  3. flexibility

Read more on blog.logrocket.com

Windows 2000 in browser 

Now you can test other browsers directly without leaving the browser: WebAssembly allows you to emulate the full Windows 2000.

Windows 2000 in browser

Try it on bellard.org.

Mozilla Removes 23 dangerous Firefox Add-Ons

Mozilla removed today 23 Firefox add-ons that snooped on users and sent data to remote servers, a Mozilla engineer has told Bleeping Computer today.

The list of blocked add-ons includes "Web Security," a security-centric Firefox add-on with over 220,000 users, which was at the center of a controversy this week after it was caught sending users' browsing histories to a server located in Germany.

List of banned add-ons:

  • YouTube Download & Adblocker Smarttube
  • Popup-Blocker
  • Facebook Bookmark Manager
  • Facebook Video Downloader
  • YouTube MP3 Converter & Download
  • Simply Search
  • Smarttube - Extreme
  • Self Destroying Cookies
  • Popup Blocker Pro
  • YouTube - Adblock
  • Auto Destroy Cookies
  • Amazon Quick Search
  • YouTube Adblocker
  • Video Downloader
  • Google NoTrack
  • Quick AMZ

More info on bleepingcomputer.com.

Evolving the Firefox Brand

With the rapid evolution of the internet, people need new tools to make the most of it. So Firefox is creating new types of browsers and a range of new apps and services with the internet as the platform. From easy screen-shotting and file sharing to innovative ways to access the internet using voice and virtual reality, these tools will help people be more efficient, safer, and in control of their time online. Firefox is where purpose meets performance.

Today, Firefox sharing their two design system approaches to ask for your feedback.

Evolving the Firefox Brand

Find out more on blog.mozilla.org.

Exploiting a Microsoft Edge Vulnerability to Steal Files

Attackers can use social engineering tricks to get access to your local files. It appears that when users are tricked into downloading and running a malicious HTML file, attackers would get access to the local files since the download HTML file will be loaded via the file:// protocol – meaning both become the same protocols raising no alarms.

The good news is that Microsoft has fixed the security vulnerabilities. Albeniz said that users should be safe from this attack if they are using the updated versions of Edge and Windows Mail and Calendar applications. 


Read more on netsparker.com.

Front-end

Icon Fonts vs SVGs

Icon fonts are text files that can be modified using CSS. Consequently, they scale much better than raster images, so changing the size of an icon font doesn’t degrade its visual quality. Changing the color or adding a shadow is just as simple as editing text. 

pros:

  • Size
  • Scalability
  • Performance

SVGs (Scalable Vector Graphics) allow vector graphics to be displayed in the browser. They not only offer superior scaling, but they often render more quickly and reliably than icon fonts. They are also much smaller in size than your typical JPG or PNG as well as most icon font libraries.

pros:

  • Flexibility
  • Positioning
  • Accessibility

More info on keycdn.com.

The trick to viewport units on mobile

The idea struck me that CSS Custom Properties and a few lines of JavaScript might be the perfect way to get the consistent and correct sizing I needed.

In JavaScript, you can always get the value of the current viewport by using the global variable window.innerHeight. This value takes the browser's interface into account and is updated when its visibility changes. The trick is to store the viewport value in a CSS variable and apply that to the element instead of the vh unit.

As a result, we can now use --vh as our height value like we would any other vh unit, multiply it by 100 and we have the full height we want.

An element gets cropped at the bottom when the address bar is in view (left) but what we want is the full thing (right).

Learn more on css-tricks.com.

GitHub.com removed jQuery from frontend

The problem of choosing a new framework for frontend was solved radically - it was decided to do without frameworks in principle. Instead, the following means were used:

  • querySelectorAll
  • fetch for ajax
  • delegated-events for event handling
  • polyfills for standard DOM stuff
  • CustomElements on the rise

Check for more via Mislav Marohnić's Twitter.

Switch font color for different backgrounds with CSS

The challenge:

  • Change the font color to either black or white depending on the background color
  • Apply the same sort of logic to borders, using a darker variation of the base color of the background to improve button visibility, only if background is really light
  • Automatically generate a secondary, 60° hue-rotated color
.btn {
       /* sets the background for the base class */
       background: rgb(var(--red), var(--green), var(--blue));
      
       /* calculates perceived lightness using the sRGB Luma method 
       Luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255 */
       --r: calc(var(--red) * 0.2126);
       --g: calc(var(--green) * 0.7152);
       --b: calc(var(--blue) * 0.0722);
       --sum: calc(var(--r) + var(--g) + var(--b));
       --perceived-lightness: calc(var(--sum) / 255);
        
       /* shows either white or black color depending on perceived darkness */
       color: hsl(0, 0%, calc((var(--perceived-lightness) - var(--threshold)) * -10000000%)); 
      }
      

Switch font color for different backgrounds with CSS

Learn more on css-tricks.com.

On Switching from HEX & RGB to HSL

  • Hue

The Hue determines what color of the rainbow something is. The value of the hue is the angle of that color on the color wheel.

  • Saturation

Colors can be vivid (rich) or dull. The less of the color there is, the more is turns into a shade of grey, depending on the hue and lightness you start with. 

  • Lightness

Where Lightness parameter going below 50% means you’re starting to add black to the hue and creating a new shade of the color, and going above 50% means you’re adding white, creating a tint.


Read more on sarasoueidan.com.

Node.js / JavaScript

Babel 7 Released

After almost 2 years, 4k commits, over 50 pre-releases, and a lot of help Babel community are excited to announce the release of Babel 7. It's been almost 3 years since the release of Babel 6! 

  • Drop support for un-maintained Node versions: 0.10, 0.12, 4, 5
  • Move to the @babel namespace by switching to using "scoped" packages
  • Remove (and stop publishing) any yearly presets (preset-es2015, etc)
  • Also drop the "Stage" presets (@babel/preset-stage-0, etc)
  • Some packages have renames: any TC39 proposal plugin will now be -proposal instead of -transform
  • babel-upgrade is a new tool we've started that tries to automatically make upgrade changes: currently with dependencies in package.json and .babelrc config.

Babel 7 Released

Learn more on dartlang.org.

Vue CLI 3.0 Released

  • Feature Rich (Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end Testing.)
  • Extensible (The plugin system allows the community to build and share reusable solutions to common needs.)
  • No Need to Eject (Vue CLI is fully configurable without the need for ejecting. This allows your project to stay up-to-date for the long run.)
  • Graphical User Interface (Create, develop and manage your projects through an accompanying graphical user interface.)
  • Instant Prototyping (Instantly prototype new ideas with a single Vue file.)
  • Future Ready (Effortlessly ship native ES2015 code for modern browsers, or build your vue components as native web components.)

Find out more on cli.vuejs.org.

Bundlephobia

JavaScript bloat is more real today than it ever was. Sites continuously get bigger as more (often redundant) libraries are thrown to solve new problems. Until of-course, the big rewrite happens.

This thing lets you understand the performance cost of npm installing a new npm package before actually adding it to your bundle.