//JavaScript - Frameworks - Libs

React Native for Windows

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

This repository adds support for the Windows 10 SDK, which allows you to build apps for all devices supported by Windows 10 including PCs, tablets, 2-in-1s, Xbox, Mixed reality devices etc.

Learn more on github.com.

Effector

Effector is an effective multi store state manager for Javascript apps (React/Vue/Node.js), that allows you to manage data in complex applications without the risk of inflating the monolithic central store, with clear control flow, good type support and high capacity API. Effector supports both TypeScript and Flow type annotations out of the box.

Effector follows five basic principles:

  • Application stores should be as light as possible - the idea of adding a store for specific needs should not be frightening or damaging to the developer.
  • Application stores should be freely combined - data that the application needs can be statically distributed, showing how it will be converted in runtime.
  • Autonomy from controversial concepts - no decorators, no need to use classes or proxies - this is not required to control the state of the application and therefore the api library uses only functions and simple js objects
  • Predictability and clarity of API - A small number of basic principles are reused in different cases, reducing the user's workload and increasing recognition. For example, if you know how .watch works for events, you already know how .watch works for stores.
  • The application is built from simple elements - space and way to take any required business logic out of the view, maximizing the simplicity of the components.

Learn more on github.com.

Storeon: “Redux” in 173 bytes

Meet Storeon, a tiny state manager for modern front-end applications close in spirit to Redux, implemented in a single file that boils down to 173 bytes of minified and gzipped JavaScript.

Storeon is ready to be used in React projects or, if you care about bundle size as much as I do, with my favorite 3 kB React alternative, Preact. In both cases, the whole Storeon library, including the code to connect it to your components will never increase your front-end bundle by more than 300 bytes. Also, size is not the only feature of Storeon.

  • It is fast. It tracks which parts of the application’s state were changed and re-renders only components affected by those changes.
  • It supports React’s and Preact’s hooks.
  • It is fully compatible with Redux DevTools.
  • It has a concise and straightforward API with documentation that fits on a napkin.

Read more on evilmartians.com.

reattempt

reattempt is a modern JavaScript library for the browser and Node.js that lets you retry asynchronous functions when they fail - because some functions deserve a second chance, or a third or maybe even several dozen or so.

  •  Very lightweight: ~550 bytes minified+gzipped
  •  Modern asynchronous JavaScript support with Promises and Async/Await
  •  Flexible API that covers many cases
  •  Targeted for both the browser and Node.js
  •  Type-safety with TypeScript and a built-in decorator

More about on github.com.

dinoql

A customizable GraphQL style query language for interacting with JavaScript objects. Use dinoql to traverse JavaScript objects the same way you query APIs with GraphQL.

The main objective is to use the same idea of GraphQL, however instead of being for API, it will be for javascript objects.

  •  GraphQL syntax.
  •  Safe access (no runtime errors to keys that does not exist).
  •  Aliases support (You can rename your keys in the query).
  •  Many resolvers implemented by default.
  •  Build your own resolver.
  •  Fragments support(share piece of query logic).
  •  Variables support(dynamic queries).
  •  Parse your queries in build time.
  •  Filter values according to the value.
  •  Caching support
  •  Customizable.

Learn more on github.com.

runpkg

Runpkg turns a static file into an interactive and informative browsing experience. It lets you navigate any JavaScript package on npm thanks to unpkg.com a very popular and reliable CDN mirror of the npm registry. You can use the tool to learn more about the inner workings of your project's dependencies; find out how modules work, what they depend on, the size of specific imports as other useful metadata.

Learn more on github.com.

After three years of silence, a new jQuery prototype pollution vulnerability emerges once again (Resolved)

On March 26th, 2019, almost three years after the last jQuery security vulnerability was disclosed, we recently learned about a new security vulnerability affecting the same popular jQuery frontend library.

This security vulnerability referred to and manifests as prototype pollution, enables attackers to overwrite a JavaScript application object prototype. When that happens, properties that are controlled by the attacker can be injected into objects and then either lead to denial of service by triggering JavaScript exceptions, or tamper with the application source code to force the code path that the attacker injects.

Read more on snyk.io.

Uppy

Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly with any application. It’s fast, easy to use and lets you worry about more important problems than building a file uploader.

  • Fetch files from local disk, remote urls, Google Drive, Dropbox, Instagram, or snap and record selfies with a camera;
  • Preview and edit metadata with a nice interface;
  • Upload to the final destination, optionally process/encode

Read more on github.com.


//Browsers - Web

What's New In DevTools (Chrome 75)

Meaningful preset values when autocompleting CSS functions

Some CSS properties, like filter, take functions for values. For example, filter: blur(1px) adds a 1-pixel blur to a node. When autocompleting properties like filter, DevTools now populates the property with a meaningful value so that you can preview what kind of change the value will have on the node.

Clear site data from the Command Menu

Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu and then run the Clear Site Data command to clear all data related to the page, including: Service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache, and Application Cache.

View all IndexedDB databases

Previously Application > IndexedDB only allowed you to inspect IndexedDB databases from the main origin. For example, if you had an <iframe> on your page, and that <iframe> was using IndexedDB, you wouldn't be able to see its database(s). As of Chrome 75, DevTools shows IndexedDB databases for all origins.

View a resource's uncompressed size on hover

Suppose that you're inspecting network activity. Your site uses text compression to reduce the transfer size of resources. You want to see how large the page's resources are after the browser uncompresses them. Previously this information was only available when using large request rows. Now you can access this information by hovering over the Size column.

Read more on developers.google.com.

The new evergreen Googlebot

Googlebot is the crawler that visits web pages to include them within Google Search index. The number one question we got from the community at events and social media was if we could make Googlebot evergreen with the latest Chromium. Today, we are happy to announce that Googlebot now runs the latest Chromium rendering engine (74 at the time of this post) when rendering pages for Search. Moving forward, Googlebot will regularly update its rendering engine to ensure support for latest web platform features.

Read more on webmasters.googleblog.com.

Picture-in-Picture for arbitrary content

Add support for requesting a Picture-in-Picture window that can contain arbitrary HTML content instead of a video layer. This content can be either interactive or not.

The original Picture-in-Picture API is limited to HTMLVideoElement. It takes the video layer and moves it into a window that follows display rules specific to Picture-in-Picture. Various partners expressed interest for a more flexible API. The feature requests fell into two categories: customising the look & feel and customising the user experience. The former can technically be done using canvas elements but the latter requires a different model that would require user interaction and therefore no longer be compatible with Android, iOS and macOS APIs.

Find out more on chromestatus.com.

Shimport

A 2kb shim for import and export. Allows you to use JavaScript modules in all browsers, including dynamic import().

Learn more on Github.


//Html-Css

Responsive layout with CSS grid, part 2: auto-fill & auto-fit

Here we’re going to look at another feature of CSS grid which helps you build a reponsive layout: auto-fill and auto-fit. These keywords values can be used as values when defining column widths in a CSS grid.

auto-fill

Instead of repeating a width multiple to create a set number of columns, we can instead tell the browser to fit as many columns as possible given the specified length.

`grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));`

auto-fit

Let’s swap out auto-fill with auto-fit in the first auto-fill example:

`grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));`

auto-fit will behave mostly like auto-fill, but if there’s only one row and there’s space for more columns, but no elements to put in those columns, it will make the width of the empty columns 0.

Learn more on blog.jonstodle.com.

Brand New Sass Docs

Announced the launch of a full rewrite and redesign of the Sass documentation, going live today after eight months of work!

In addition to reorganizing and rewriting all the documentation, we've added a special example widget that makes it easy to see how Sass stylesheets translate into CSS. It has tabs for both SCSS and the indented syntax, so you can use whichever you prefer, or switch between them to see the difference.

The Sass function documentation is included in the rewrite. Functions are now organized into easy-to-understand sections.

Find out more on sass.logdown.com.

CSSFX

Beautifully simple click-to-copy CSS effects

A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.

cssfx

More info here: cssfx.dev.


//Tegnology

Introducing Mozilla WebThings

The Mozilla IoT team is excited to announce that after two years of development and seven quarterly software updates that have generated significant interest from the developer & maker community, Project Things is graduating from its early experimental phase and from now on will be known as Mozilla WebThings.

Mozilla WebThings is an open platform for monitoring and controlling devices over the web, including:

  • WebThings Gateway – a software distribution for smart home gateways focused on privacy, security and interoperability
  • WebThings Framework – a collection of reusable software components to help developers build their own web things

Web Things

Find out more on hacks.mozilla.org.

Announcing AMP Real URL

Google’s AMP Crawler downloads the content of your website and stores it in the AMP Cache many times a day. If your site has AMP Real URL enabled Cloudflare will digitally sign the content we provide to that crawler, cryptographically proving it was generated by you. That signature is all a modern browser (currently just Chrome on Android) needs to show the correct URL in the address bar when a visitor arrives to your AMP content from Google’s search results.

cloudflare

Learn more on blog.cloudflare.com.

Open-Registry

Open-Registry is a community-effort of regaining control of one of the most important part of the JavaScript ecosystem, the module registry.

It's purpose is to allow people to control the development, funding and support of the registry itself, by making it fully open-source and transparent for it's user and the public.

It's funded, developed and maintained fully by it's own users.

Open-Registry is for JavaScript developers who want to make sure all the modules in a JavaScript registry survives the test of time and who want the registry to make changes only because it's users want so, not because a company needs to improve profits.

Learn more on open-registry.dev.

bento-starter

 bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications using tools like Vue.js, Firebase, Progressive Web Apps support, dynamic offline support... The goal of this project is to provide a powerful and well configured stack (with CI/CD, hosting...) so you can focus on writing your web application very quickly.

As this project is a template project and not a CLI, you have access to the entire app configuration so you can change it according to your needs.

Find out more on github.com.

hybrids

Hybrids is a UI library for creating Web Components, which favors plain objects and pure functions over class and this syntax. It provides simple and functional API for creating custom elements.

  • The simplest definition — just plain objects and pure functions
  • Composition over inheritance — easy re-use, merge or split property definitions
  • No global lifecycle callbacks — no did* or will* and only in the independent property definition
  • Super fast recalculation — built-in cache mechanism secures performance and data flow
  • Templates without external tooling — template engine based on tagged template literals
  • Developer tools included — Hot module replacement support for fast and pleasant development

Read more on github.com.


//News

GitHub Package Registry

GitHub Package Registry is a software package hosting service, similar to npmjs.org, rubygems.org, or hub.docker.com, that allows you to host your packages and code in one place. You can host software packages privately or publicly and use them as dependencies in your projects.

Read more on github.com.

Rush

Rush makes life easier for JavaScript developers who build and publish many NPM packages at once. If you’re looking to consolidate all your projects into a single repo, you came to the right place! Rush is a fast, professional solution for managing this scenario.GitHub Package Registry is a software package hosting service, similar to npmjs.org, rubygems.org, or hub.docker.com, that allows you to host your packages and code in one place. You can host software packages privately or publicly and use them as dependencies in your projects.

Read more on rushjs.io.


//For fun

Service Workers

Learn Service Workers inside and out with the new PWA Mastery Game.

A collaborative project by geddski & Google Developers.

Learn more on serviceworkies.com.


Design Patterns Game

“Gang of Four” patterns in JavaScript.

Design Patterns - get familiar with the design patterns implemented in JavaScript, test yourself (or someone else) or simply for fun. Enjoy!

Find out more on designpatternsgame.com.