//JavaScript - Frameworks - Libs

An Intro to Imba: the JavaScript-compatible language for lightning fast DOM updates

Imba is an open-source programming language we created specifically for building web apps. It compiles to JavaScript and works inside the existing JS ecosystem, meaning you can use it with Node, npm, and Webpack.

The big benefit with Imba is that it results in much faster apps than if you were to use virtual DOM-based libraries like React and Vue. The increased speed is thanks to how Imba handles DOM updates.

imba JavaScript compatible language

www.freecodecamp.org

Just ____

Just is a library that organizes build tasks for your JS projects. It consists of

  • a build task build definition library
  • sane preset build flows for node and browser projects featuring TypeScript, Webpack and jest
  • project scaffold tool that generates no-ejection needed repos that tracks template changes

just library

github.com

Elix

Elix is a community-driven collection of high-quality web components for common user interface patterns.

Most applications make use of common, general-purpose user interface patterns such lists, menus, dialogs, carousels, and so on. Such patterns can be efficiently implemented and packaged as web components. Their modular nature lets you easily incorporate web components into your web application, and their standard definition ensures good results across browsers.

github.com

grasp

JavaScript structural search, replace, and refactor.

Grasp is a command line utility that allows you to search and replace your JavaScript code - but unlike programs such as grep or sed, it searches the structure behind your code (the abstract syntax tree), rather than simply the text you've written - this allows you to:

  • Search your code with unparalleled power
  • Quickly and easily refactor your code
  • Implement basic macros in a single line

github.com

5 ES2019 features you can use today

ECMAScript 2015, also known as ES6, was a major release that took six years to finalize. Since then, Technical Committee 39 (TC39), the body in charge of developing the ECMAScript standard, has been releasing a new edition of the standard every year. This annual release cycle has streamlined the process and made new features rapidly available, which the JavaScript community has welcomed.

This year, ECMAScript 2019 (or ES2019 for short) will be released. The new features include Object.fromEntries(), trimStart(), trimEnd(), flat(), flatMap(), description property for symbol objects, optional catch binding, and more.

blog.logrocket.com

Getting Started With Glimmer-Native

NativeScript is a platform for building truly native mobile apps using a variety of different web frameworks. Up until now Angular and Vue.js have been your options–but now the Glimmer-Native project gives you the option to build native apps with Glimmer.js as well! Glimmer-Native is currently in alpha, and input from the community is welcomed to help it get built out.

codingitwrong.com

Hermes JS Engine

Hermes is a JavaScript engine optimized for fast start up of React Native apps on Android. It features ahead-of-time static optimization and compact bytecode.

If you're only interested in using pre-built Hermes in a new or existing React Native app, you do not need to follow this guide or have direct access to the Hermes source. Instead, just follow these instructions to enable Hermes.

If you want to know how to build and hack on Hermes directly, and/or integrate Hermes built from source into a React Native app then read on.

github.com

RxJS: A Simple Introduction

Modern web apps of today are heavily event-driven, meaning they react to (and rely on) a range of external services and data sources to make them tick. One of the core libraries to make this happen is ReactiveX, also known as Reactive Extensions.

The ReactiveX library has been implemented in a range of languages, the most widely adopted of which being RxJS, the Javascript implementation. RxJS is particularly useful as it can be integrated within any Javascript application, whether server or client side, that has attributed to its huge growth in adoption.

medium.com

Macro Decorators

Sometimes, writing code for JavaScript getters and setters can get repetitive. Macro decorators allow you to DRY up your code by creating a decorator that can duplicate a getter/setter's functionality in multiple places!

pzuraq.github.io

Freezeframe.js

Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.

Version 4+ is built with modern javascript in mind. It's transpiled with webpack/babel, so it should work in most environments, but we are no longer supporting the jquery plugin.

github.com

//Browsers - Web

Security.txt

Security.txt is a proposed standard which allows websites to define security policies. The security.txt file sets clear guidelines for security researchers on how to report security issues, and allows bug bounty programs to define a scope. Security.txt is the equivalent of robots.txt, but for security issues.

github.com

CORS – Cross-Origin Communication in the Modern Web

So here is a situation you’re in. You just built a really cool blogging app using the latest and greatest JavaScript framework. You scaffold the application using Nuxt.js, build the components using Vue.js and use Vuex for state management. On the back-end side, you create an API using Node.js, FeathersJS and Express. Your back-end serves the blog post data to your front-end through an API.

Before pushing your code to a server, you decide to test whether everything is working correctly. Your Vue app is running at http://localhost:3000 while the API server is running at http://localhost:8000. You visit http://localhost:3000 in your web browser and you notice a bug. No data has been loaded from the API! Oh No!

alazierplace.com

Reinventing Firefox for Android: a Preview

At Firefox, they’re passionate about providing solutions for people who care about safety, privacy and independence. For several months, they’ve been working on a new strategy for our Android products to serve you even better. They’re very happy to announce a pilot of our new browser for Android devices that is available to early adopters for testing as of now. We’ll have a feature-rich, polished version of this flagship application available for this fall.

blog.mozilla.org

Firefox Version 68.0

Dark mode in reader view expands so that windows are also dark on the controls, sidebars and toolbars.

Improved extension security and discovery:

  • New reporting feature in about:addons allows you to report security and performance issues with extensions and themes.
  • Redesigned extensions dashboard in about:addons provides easy access to information about your extensions, including data and settings access required by each extension.
  • Find high quality, secure extensions via the Recommended Extensions program in about:addons, which now displays user count and ratings for each extension. "Recommended” badges for these extensions also appear on AMO. More extensions will be added over time.

Cryptomining and fingerprinting protections are added to strict content blocking settings in Privacy & Security preferences.

WebRender will roll out to Windows 10 users with AMD graphics cards.

Windows Background Intelligent Transfer Service (BITS) update download support, which allows Firefox update downloads to continue when Firefox is closed.

mozilla.org

//Html-Css

Lightweight Charts

TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts.

The Lightweight Charting Library is the best choice for you if you want to display financial data as an interactive chart on your web page without affecting your web page loading speed and performance.

It is the best choice for you if you want to replace static image charts with interactive ones. The size of the library is close to static images but if you have dozens of image charts on a web page then using this library can make the size of your web page smaller.

github.com

Style Dictionary

A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language. It provides a single place to create and edit your styles, and exports these properties to all the places you need - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

github.com

Periodic table of HTML elements

periodic table of HTML elements

madebymike.com.au

Add Cool Effects with CSS Blend Mode

Web design, and particularly CSS, has taken on a predictable pattern in recent years. First, we create special effects that make heavy use of images, outside libraries or both. Then CSS comes along and adds these capabilities – greatly reducing the need for outside resources. That means much of the behind-the-scenes horsepower we need is simply built into the browser.

CSS blend mode is one such revelation. It allows elements to display colors from both the foreground and background layers. This works in much the same way that Photoshop blend modes do – making for some interesting effects.

speckyboy.com

//Tegnology

Bringing service workers to Google Search

Search for just about any topic on Google, and you're presented with an instantly recognizable page of meaningful, relevant results. What you probably didn't realize is that this search results page is, under certain scenarios, served by a powerful piece of web technology called a service worker.

Rolling out service worker support for Google Search without negatively impacting the performance required dozens of engineers working across multiple teams. This is the story of what shipped, how performance was measured, and what tradeoffs were made.

web.dev

Mocking a Blog Backend with Mirage and JSON API

Mirage is a fantastic mocking library. It allows us to build frontend apps really fast, without the need of a real backend API.

Today we are going to create a blog with commenting capabilities:

  • a posts listing page
  • a single post page
  • a list of comments and a textarea to add new comments

emberigniter.com

Design patterns in Node.js: a practical guide

Design patterns are part of the day to day of any software developer, whether they realize it or not.

In this article, we will look at how to identify these patterns out in the wild and look at how you can start using them in your own projects.

blog.logrocket.com

How React Hooks can replace React Router

Since the advent of React Hooks, a lot of things have changed. Some things we didn’t have issues with before have started causing concern. The features and possibilities that come with Hooks have redefined how we approach certain concepts in React, and routing happens to be one of them.

blog.logrocket.com

//News

When will npm@6.9.1 be released (and other PRs merged?)

On March 22, npm fired several members of the open source and community team for discussing workplace conditions and other labor organizing activities. As a result, core employee contributors to the npm cli were removed from the project, and others have left in solidarity or put their work on hold.

gist.github.com

//For fun

Relearn CSS layout

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.

every-layout.dev

GraphQL: The Documentary (Official Release)

"GraphQL: The Documentary" explores the story of why and how GraphQL came to be and the impact it's having on big #tech companies worldwide, including Facebook, Twitter, Airbnb and Github.

youtube.com

Version Museum

Version Museum showcases the visual history of popular websites, operating systems, applications, and games that have shaped our lives. Much like walking through a real-life museum, this site focuses on the design changes of historic versions of technology, rather than just the written history behind it.

versionmuseum.com

User Inyerface

Welcome to User Inyerface, a challenging exploration of user interactions and design patterns.

To play the game, simply fill in the form as fast and accurate as possible.

userinyerface