![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
We have a bunch of great articles this week. Let's start with some vanilla JavaScript flavor and "a must read" article by Joel Thoms, "7 Tricks with Resting and Spreading JavaScript Objects". Don't miss out a bunch of awesome tips and tricks.
Next, we have a recommendation for React developers. You can join Austin Roy and learn how to "Add Animations to React Apps with React-Lottie".
Vue developers will for sure enjoy "A Guide to Custom Directives in Vue" by Nwose Lotanna.
Finally, we recommend you to check out part 3 of a great series by Rob Eisenberg, "How do we React?" and learn more about our favorite JavaScript framework, Aurelia.
General
How to manipulate CSS colors with JavaScript
I know you're here to learn about manipulating colors - and we'll get there. But before we do, we need a baseline understanding of how CSS notates colors. CSS uses two different color models: RGB and HSL. Let's take a quick look at both.
Authored by: LogRocket
Accessing Element IDs in DOM as window/global variables
During my early web development days, element IDs was one of the first things I learned on how to manipulate elements from JS land. With reference to elements by their IDs So many to think about const so_many = document.getElemntByID('so_many') we can: 1: change the inner html of the element (innerHTML) So many to think about const so_many = document.getElemntByID('so_many') so_many.innerHTML = "I'm flying without wings" 2.
Authored by: Chidume Nnamdi
Write Your First Service Worker in 5 Minutes
What is a service worker? A service worker is a little file that will allow you to cache files and other assets on a user's machine. How is this different from server-side caching? Because the assets are stored on a user's machine, rather than a server, there is no need to go across a network.
Authored by: David Walsh
A Homepage for the JavaScript Specification
Ecma TC39, the JavaScript Standards Committee, is proud to announce that we have shipped a website for following updates to the JavaScript specification. This is the first part of a two-part project aimed at improving our information distribution and documentation. The website provides links to our most significant documents, as well as a list of proposals that are near completion.
Authored by: Mozilla Hacks
I Don't Hate Arrow Functions
TL;DR Arrow functions are fine for certain usages, but they have so many variations that they need to be carefully controlled to not break down the readability of the code. While arrow functions clearly have a ubiquitous community consensus (though not unanimous support!), it turns out there's a wide variety of opinions on what makes ...
Authored by: David Walsh
JavaScript
6 Tricks with Resting and Spreading JavaScript Objects
Resting and spreading can be used for more than just resting arguments and spreading arrays. Here are six lesser known tricks when using rest and spread with JavaScript objects. Clone an object while simultaneously adding additional properties to the cloned object. In this example user is cloned and password is added into userWithPass.
Authored by: Bit
Introduction to Iterables and Iterators in JavaScript
In this post, we'll take a quick peek at JavaScript iterables and how to implement them with JS objects using iterators.
Authored by: Vijay Prasanna
Reduce, Reduce, Reduce
After my last article on map, filter, and reduce there was an outpour of requests to do an article on just reduce. This time let's dive into all the fun things you can do with reduce. Before we do that though, let's make sure we really understand how it works.
Authored by: Matthew Gerstman (Slytherin)
TypeScript
Writing readable code with TypeScript enums
This post looks at enums in TypeScript, their types and properties as well as the syntax and practical examples of how they are used.
Authored by: Viclotana™
Using The Non-Null Assertion Operator To Fix .shift() and .pop() Errors In TypeScript 3
Ben Nadel uses the "Non-Null Assertion" operator (!) in TypeScript to tell the compiler that an expression always evaluates to a non-null value. This can fix "possibly undefined" compiler errors thrown when using the Array methods .shift() and .pop().
Authored by: Ben Nadel
Sending HTTP requests, understanding multipart/form-data
The HTTP is a protocol allowing you to fetch resources such as JSON data and HTML documents. Two sides of the connection, the client and the server, communicate by exchanging messages. The message sent by the client is a request. The message sent by the server is a response.
Authored by: Marcin Wanago
Angular
Proof-of-Concept: InVision Screen Flow In Angular 7.2.7
Ben Nadel shares an idea that he wants to pitch to the Product Team at InVision. It's called "Screen Flow", and it automatically renders a Prototype as a directed, acyclic graph based on the embedded hotspots. He's looking for feedback so that he can polish the idea and gather "evidence of value" before he attempts to pitch it internally at InVision.
Authored by: Ben Nadel
Internationalize Your Angular App with ngx-translate
At some point, your web application may require serving a multilingual user base. Internationalization, or i18n for short, is the process by which you make your app usable for those with a different native language. While Angular has some built-in i18n functionality, ngx-translate is a third-party package which makes the process dead simple.
Authored by: Alligator
React
Add Animations to React Apps with React-Lottie
So your designer just came up with an amazing new animation on Adobe After Effects for your web application, fantastic! Just one problem, how do you convert this to a format usable within your web app? No worries, the awesome folks at Airbnb Design have your back.
Authored by: Scotch Development
React Component Types: A complete Overview
There a various React Component Types that make it difficult for React beginners to get started with React. This tutorial goes through each React Component Type by example ...
Authored by: Robin Wieruch
Getting Started with React (2019 Edition) ― React Starter
React is the uber popular JavaScript library that is almost everywhere you look these days. Learning React opens up a whole new way to build front-end experiences like websites, mobile apps, and more. Much has changed since React came out and now is a great time to jump into the React fray.
Authored by: Scotch Development
Styling in React Native
Explore the best ways to style a React Native application If you are just started with React Native or even you are experienced with it, you may find the styling a little bit challenging for the first time.
Authored by: Bit
React Function Components by Example
Everything you need to know about React Function Components -- also known as React Functional Components. You will learn about them step by step with examples along the way ...
Authored by: Robin Wieruch
Aurelia
How do we React? - Part 3
You may have noticed that most other frameworks don't have HoCs, render props or anything like React.Children. These account for a lot the differences between React and other frameworks. How would you solve these use cases if you had to switch to [other framework]?
Authored by: Rob Eisenberg
Vue
A Guide to Custom Directives in Vue
A directive generally is some special token in the markup that tells the library to do something to a DOM element. In Vue, the concept of directive is drastically simpler than that in Angular. A Vue directive can only appear in the form of a prefixed HTML attribute.
Authored by: Bit
Starting with Vue.js: how about using it?
Starting with Vue.js: how about using it? Vue.js seems to be another JavaScript UI library with a strong community support. If you've got a project coming up... - Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.
Authored by: MA-NO WebDesign&Dev
Node.js
12-factor Node.js application configuration management without the `config` npm package · Code with Hugo
The config npm package is great ( npmjs.com/package/config), but it encourages confusing and non- 12-factor-app-compliant patterns. We'll look at some of the patterns it encourages and why they'll bring you struggles down the road as well a simple, single-file, no-dependency way to define your configuration.
Authored by: Hugo Di Francesco
Setting Up a Node Project With Typescript
Node, a run-time environment that makes it possible to write server-side JavaScript, has gained a lot of adoption since its release in 2011. Writing server-side JavaScript is incredible but can get messy as the codebase grows, owing to the nature of the JavaScript language; dynamic and weak typed.
Authored by: Scotch Development
Libraries and Tools
Build Light-Weight REST and Realtime Apps with FeathersJS
In the barest of definitions, Feathers is a simple minimalistic realtime framework for web applications built over Express. What this means is that with Feathers, you can keep using middlewares but in addition, you get realtime, RESTful services and ORM support out of the box. In this post, we'
Authored by: Scotch Development
Sublime Text 3.2 Is Out! Git Integrated and Still Blazing Fast
Sublime Text has a special place in my heart. It's the editor that made me love editors. Before that it was Notepad++ or Coda and trying to get files onto a server using FTP. Those were the days! When uploading a file could bring down the whole site because you didn't close a PHP tag.
Authored by: Scotch Development
Schematics: A Plug-in System for JavaScript Projects
Schematics is a tool from the Angular team that allows you to manipulate projects with code. You can create files, update existing files, and add dependencies to any project that has a package.json file. That's right, Schematics aren't only for Angular projects! In this post,
Authored by: Scotch Development
Testing
Testing React Components with Jest and Enzyme
In the last article , we scratched the surface of unit testing with in React. The problem with that article is that it's a bit on the Hello World level and not nearly enough to really be able to start testing. When we write tests, we have a lot more than a simple, stateless component.
Authored by: DiscoverSDK
Other
Implementing a Custom Filter ― The Ultimate Guide to JavaScript Algorithms
In JavaScript, the .filter() function is often used to loop through an array and extract the elements that pass a certain condition specified in a callback function. Ever wondered how this works? In this article, we build on our understanding of JavaScript and proficien
Authored by: Scotch Development
9 Generic steps to becoming JS web developer
Programming doesn't always refer to the same thing. Differences between separate fields of this activity can be really huge. AI, IoT, software, drivers, web 🤯 - many programmers have specialization in only one of these fields. But, for self-taught beginners, who decided to just learn how to code, this diversity doesn't play such a significant role.
Authored by: areknawo
Fast, Bump-Allocated Virtual DOMs with Rust and Wasm - Mozilla Hacks - the Web developer blog
Dodrio is a new virtual DOM library that is designed to leverage the strengths of both Wasm's linear memory and Rust's low-level control by making extensive use of fast bump ...
Authored by: Mozilla Hacks
The art of problem-solving
With this little introduction, I think it might be worth it to take a while and explore what does the problem-solving term means. In programming, it becomes even more visible. Here, you have to use different structures, tools, techniques, and concepts to achieve the desired outcome.
Authored by: areknawo
