//JavaScript - Frameworks - Libs

Node.js 12 to LTS and Node.js 13 is here!

Announce that Node.js 12 was promoted to Long Term Support(LTS) yesterday and that Node.js 13 was released today.

These releases deliver faster startup and better default heap limits, updates to V8, TLS, llhttp, new features including diagnostic report, bundled heap dump capability and updates to Worker Threads, N-API, and more.

Node.js 12 becomes the newest LTS release along with 10 and 8. Please note that 8 goes end-of-life in December (an exception to the regular LTS cycle due to the EOL of OpenSSL 1.02 so you should already be planning your migration off it to either 10 or 12).

medium.com

Announcing core Node.js support for ECMAScript modules

Node.js 13.2.0 ships support for ECMAScript modules, known for their import and export statements. This support was previously behind the--experimental-module flag, which is no longer required; however the implementation remains experimental and subject to change.

medium.com

React Query

Hooks for fetching, caching and updating asynchronous data in React.

Features:

  • Transport, protocol & backend agnostic data fetching
  • Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
  • Parallel + Dependent Queries
  • Mutations + Automatic Query Refetching
  • Multi-layer Cache + Garbage Collection
  • Load-More Pagination + Scroll Recovery
  • Request Cancellation
  • React Suspense Support

github.com

IOC! - This library implements dependency injection for javascript.

Features:

  • Similar syntax to InversifyJS
  • Can be used without decorators
  • Less Features but straight forward
  • Can bind dependencies as classes, factories and static values
  • Supports binding in singleton scope
  • Cached - Resolves only once in each dependent class by default
  • Cache can switched off directly at the inject decorator
  • Made with unit testing in mind
  • Supports dependency rebinding and container snapshots and restores
  • Lightweight - Just around 750 Byte gzip and 650 Byte brotli compressed
  • Does NOT need reflect-metadata which size is around 50 kb
  • 100% written in Typescript

github.com

Visualises JavaScript, TypeScript and Flow codebases as meaningful and committable architecture diagrams

  • Associates source files with configured architectural components
  • Renders grouped components and dependency graph including Node.js modules
  • Supports JavaScript, TypeScript and Flow source code and Vue/Nuxt
  • Exports codebase architecture visualisation as SVG, PNG or Plant UML diagram
  • Integrates into development flow, so your CI, VCS, README and PRs are happy

arkit.pro

Vue CLI version 4!

Vue CLI v4 comes with greatly improved Nightwatch, Jest and PWA support, as well as many other small tweaks across all the core packages.

Lots of underlying major dependencies have been upgraded:

  • core-js 3
  • Nightwatch 1.x
  • Jest 24
  • Mocha 6
  • workbox-webpack-plugin 4
  • And a lot more…

github.com

Prettier 1.19

This release adds the long awaited --vue-indent-script-and-style option, support for TypeScript 3.7 and some cutting edge JavaScript syntax. Not to mention a whole bunch of bug fixes and improvements!

prettier.io

Plexis

This is the main monorepo codebase of Plexis.js a production-ready string manipulation library that's community-driven.

For the past few years managing, contributing or even starting an open-source project could be hard, especially for newcomers. Plexis was born and driven by the JavaScript community. Our initial goal is to provide a production-ready set of utilities and help people understand how an open-source project is maintained. Plexis is driven by our contributors and it should always stay that way.

github.com

Arcsecond 2.0.x

Arcsecond is a zero-dependency, Fantasy Land compliant JavaScript Parser Combinator library largely inspired by Haskell's Parsec.

github.com

Type coercion in JavaScript

In this blog post examines the role of type coercion in JavaScript. Will go relatively deeply into this subject and, e.g., look into how the ECMAScript specification handles coercion.

2ality.com

@babel/preset-modules

A Babel preset that enables async/await, Tagged Templates, arrow functions, destructured and rest parameters, and more in all modern browsers (88% of traffic).

It works around bugs and inconsistencies in modern JavaScript engines by converting broken syntax to the closest non-broken modern syntax. Use this in place of @babel/preset-env's target.esmodules option for smaller bundle size and improved performance.

github.com

relative-deps

Relative deps introduces an additional dependency section in package.json, called relativeDependencies. This section contains paths to the local sources of any dependency, that will be built and installed over the publicly available versions, when needed.

github.com

//Browsers - Web

web-extension-starter

Web Extension starter to build "Write Once Run on Any Browser" extension.

Features:

  • Cross Browser Support (Web-Extensions API)
  • Browser Taylored Manifest generation
  • Automatic build on code changes.
  • Auto packs browser specific build files
  • ES6 modules support
  • SASS styling

github.com

A Comparison of Static Form Providers

Let’s attempt to coin a term here: “Static Form Provider.” You bring your HTML <form>, but don't worry about the back-end processing that makes it work. There are a lot of these services out there!

Static Form Providers do all tasks like validating, storing, sending notifications, and integrating with other APIs. It’s lovely when you can delegate big responsibilities like this. The cost? Typically a monthly or annual subscription, except for a few providers and limited plans. The cost is usually less than fancier “ form builders” that help you build the form itself and process it.

itnext.io

Puppeteer

Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:The ideal reader of the book has zero knowledge of Svelte, has maybe used Vue or React, but is looking for something more, or a new approach to things.

  • Generate screenshots and PDFs of pages.
  • Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. "SSR" (Server-Side Rendering)).
  • Automate form submission, UI testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
  • Capture a timeline trace of your site to help diagnose performance issues.
  • Test Chrome Extensions.

pptr.dev

Getting your sites ready for the new Microsoft Edge

This morning released Microsoft Edge Beta version 79, which is the final Beta before the new Microsoft Edge is generally available, also known as the “Release Candidate.” On January 15th expect to release the “Stable” channel, at which point Microsoft Edge will be generally available to download on Windows and macOS.

The new Microsoft Edge is built on the Chromium engine, providing best in class compatibility with extensions and web sites, with great support for the latest rendering capabilities, modern web applications, and powerful developer tools across all supported platforms.

blogs.windows.com

//Html-Css

The two-value syntax of the CSS Display property

The display property is how we change the formatting context of an element and its children. In CSS some elements are block by default, and others are inline. This is one of the first things you learn about CSS.

The display property enables switching between these states. For example, this means that an h1, usually a block element, can be displayed inline. Or a span, initially an inline element, can be displayed as a block.

More recently we have gained CSS Grid Layout and Flexbox. To access these we also use values of the display property — display: grid and display: flex. Only when the value of display is changed do the children become flex or grid items and begin to respond to the other properties in the grid or flexbox specifications.

hacks.mozilla.org

Recursive Sans & Mono

Recursive Mono & Sans is a variable type family built for better code & UI. It is inspired by casual script signpainting, but designed primarily to meet the needs of programming environments and application interfaces.

recursive sans and mono

github.com

Open Doodles

Open Doodles is a set of free illustrations that embraces the idea of Open Design. You can copy, edit, remix, share, or redraw these images for any purpose without restriction under copyright or database law (CC0 license.)

open doodles

opendoodles.com

//Tegnology

Metrics

User-centric performance metrics are a critical tool in understanding and improving the experience of your site in a way that benefits real users.

web.dev

Pika

Pika is a new kind of package registry for the modern web. 100% ESM. Write once, run natively on every platform.

pika.dev

GSAP 3 Is Available Now!

GSAP 3 is the most significant upgrade we have ever had. There's a LOT to cover, so we broke this into a few articles. First, here are a few tasty morsels:

  • Roughly HALF the file size of the old TweenMax...but it has even more features.
  • New plugin for animating things along motion paths (you can even edit the motion path in the browser!)
  • Simplified API (no more TweenLite, TweenMax, TimelineLite, and TimelineMax - they're consolidated into a simple "gsap" object, yet we've maintained backward compatibility with the vast majority of legacy code!)
  • Timeline defaults that get inherited by child animations
  • 15 brand-new super-useful utility methods like interpolate(), random(), snap(), mapRange(), etc.
  • Keyframes
  • Effects extensibility
  • Animate to/from a width or height of "auto"
  • Built in modern ES6 modules format (but of course we provide files that work all the way back to IE9!)
  • Much, much more...

greensock.com

Announcing CodeSandbox CI and all-new Embeds

Maintaining open source projects, while enormously fulfilling, can be time-consuming and stressful. After a busy Hacktober, we know from first-hand experience what it's like, and we wanted to help library maintainers make the best use of their time. Today we're pleased to launch CodeSandbox CI: A free continuous integration service purpose-built for open source library maintainers.

codesandbox CI

codesandbox.io

Get started with Web Bundles

Bundling a full website as a single file and making it shareable opens up new use cases for the web. Imagine a world where you can:

  • Create your own content and distribute it in all sorts of ways without being restricted to the network
  • Share a web app or piece of web content with your friends via Bluetooth or Wi-Fi Direct
  • Carry your site on your own USB or even host it on your own local network

The Web Bundles API is a bleeding edge proposal that lets you do all of this.

web bundles

web.dev

//News-Interesting

Myth Busting PWAs – The New Edge Edition

By busting 9 Myths on PWAs, we’ll see that PWAs are stronger than ever. It’s an approach that more and more developers are now considering in order to target multi-devices using a unique code base. As the New Edge is now based on the Chromium open-source project, this leverages new possibilities for PWA developers as well as for people using the WebView in their native apps. Indeed, the new WebView2 control will also offer the Chromium engine as explained in this article: Microsoft Edge WebView2 (developer preview). Both Win32 and UWP developers will be able to benefit from this new control.

pwa myth busting

davrous.com

7 Most Popular Node.js Frameworks in 2019

Node.js is an open-source, cross-platform, runtime environment that allows developers to run JavaScript outside of a browser. Ryan Dahl introduced Node to the world back in 2009, and it's since grown into one of the most popular and well-liked technologies.

dev.to

JavaScript frameworks security report 2019

In this report, we investigate the state of security for both the Angular and React ecosystems. This report by no means intends to venture into any rivalries that may exist between the two in terms of whether one or the other is a true framework – we are not comparing them as competitive frameworks at all. Instead, we review them each as viable frontend ecosystem alternatives for building your JavaScript projects, while focusing on security risks and best practices for each and the differences between them.

snyk.io

The Svelte Handbook

The ideal reader of the book has zero knowledge of Svelte, has maybe used Vue or React, but is looking for something more, or a new approach to things.

freecodecamp.org

//For fun

Advantages and Disadvantages of a Monolithic Repository

Monolithic source code repositories (repos) are used by several large tech companies, but little is known about their advantages or disadvantages compared to multiple per-project repos. This paper investigates the relative tradeoffs by utilizing a mixed-methods approach. This paper also backs up the claims made by these engineers with a large-scale analysis of developer tool logs. Engineers also appreciate the centralization of dependency management in the repo. In contrast, multiple-repository (multi-repo) systems afford engineers more flexibility to select their own toolchains and provide significant access control and stability benefits. In both cases, the related tooling is also a significant factor; engineers favor particular tools and are drawn to repo management systems that support their desired toolchain.

people.engr.ncsu.edu (PDF)

HTMHell

A collection of bad practices in HTML, copied from real websites.

htmhell.dev