![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
This week we have some very good vanilla JavaScript articles. The one that we liked the most is a practical guide on "How to Remove Duplicates from an Array in JavaScript" by Maciej Cieślar.
TypeScript is an increasingly hot topic. That's why we can recommend to check out "How to think and type in TypeScript" by "Areknawo".
React developers will most certainly enjoy exploring how to "Improve Performance in React Class Components using React.PureComponent" with Chidume Nnamdi while Vue folks can look at "Useful Vue Admin Templates for 2019" by Anastasia Ovchynnikova.
General
Adding Search to Your Site with JavaScript
Static website generators like Gatsby and Jekyll are popular because they allow the creation of complex, templated pages that can be hosted anywhere. But the awesome simplicity of website generators is also limiting. Search is particularly hard. How do you allow users to search when you have no server functions and no database?
Authored by: David Walsh
How to Create Stunning, Interactive Bar Charts Using JavaScript
We take a look at how to use an open source JavaScript library to get started with making basic data visualizations with the widely popular JavaScript language.
Authored by: DZone
JavaScript
How to Remove Duplicates from an Array in JavaScript
Recently in one of my projects I had to remove duplicates from an array. Instead of looking up a npm package that could do it for me I chose to implement it myself. Here's what I learned about this seemingly straightforward task.
Authored by: Bit
JavaScript Fundamentals: Understanding Events
The interaction of JavaScript with HTML is handled through events. Events are actions that occur when either the user or the browser itself manipulates the page. Some common events that occur with websites, are page loads, button clicks, key presses, hovers, form submissions, window resizing, to name but a few.
Authored by: Tim Robards
Understanding Event Emitters
Consider, a DOM Event: const button = document.querySelector("button"); button.addEventListener("click", (event) => /* do something with the event */) We added a listener to a button click. We've subscribed to an event being emitted and we fire a callback when it does. Every time we click that button, that event is emitted and our callback fires with the event.
Authored by: CSS-Tricks
Customize objects coercion in JavaScript
JavaScript, unlike other programming languages, doesn't allow operators overloading. What it allows us to do is to modify the primitive value in which an object is transformed. This is because when an object is coerced, the result is, and must be, a primitive value.
Authored by: JFieldEffectT
Understanding Public and Private Fields in JavaScript Class
Adding some privacy to the JS class? Let's explore that in this post... Somethings should always be left private. That's nothing said of when using classes in JS. But in recent times, proposals have come up to add some privacy to the JS class. We will explore that in this post.
Authored by: Bit
TypeScript
How to think and type in TypeScript
A while ago I've written a on learning TypeScript. There, I discussed different types, syntax and more with a detailed description for each. But naturally, there's more to learning a programming language that just a raw syntax. You need to know how things interact with each other, how you should properly utilize them, and what are the best practices to follow.
Authored by: areknawo
A Step Towards Compiling TypeScript
One of my past times is writing compilers, they're just fun to work on. One of those projects I've been working for a couple of months now is a TypeScript to native compiler. Now just to be absolutely clear here, by native I do mean actually native as in native AOT (ahead-of-time compilation) to machine code and not as another buzzword for yet another JavaScript framework.
Authored by: Casper Beyer
Typescript tutorials: webpack typescript Configuration
In this Typescript tutorial two technologies webpack typescript we will try to use them together from scratch Step 1: npm initialization first, we will need a project which is empty yes totally empty then we will first initialize npm in there as we will be requiring some of the dependencies
Authored by: Neeraj
TypeScript 2.9: Passing Generics to JSX Elements
TypeScript 2.9 added the ability to specify type arguments for generic JSX elements. This means we can now write the following component in a TSX file: function Form() { // ...
Authored by: Marius Schulz
Angular
Some Real-World Experimenting With The Runtime Abstraction For State Management In Angular 7.2.7
Ben Nadel shares a real-world exploration of the Runtime Abstraction concept that he is formulating around state-management in a Single-Page Application using Angular 7.2.7. The Runtime Abstraction hides state-management choices, doesn't have superfluous code, and make state mutations really easy to reason about.
Authored by: Ben Nadel
I'm Going To Stop Worrying About Tightly-Coupled DOM Access In Angular 7.2.7
Ben Nadel has reached a tipping point in his pursuit of an "absolute" separation of concerns. And, realizes that while adding some direct DOM-access in his Angular 7.2.7 Components does create tighter coupling, it does so at the pleasure of increased readability and ease-of-maintenance.
Authored by: Ben Nadel
Scrolling An Overflow-Container Back To The Top On Content Change In Angular 7.2.7
Ben Nadel looks at a common use-case in a Single-Page Application (SPA): having to scroll an overflow-container back to the top of its scroll-offset when its content changes. This can be done by reaching directly into the DOM (Document Object Model) and calling the container's .scrollTo() method.
Authored by: Ben Nadel
React
Improve Performance in React Class Components using React.PureComponent
At the release of React v16.6, it heralded great advancements on how we use Reactjs. One of the great additions to React v16.6 is the React.PureComponent class. In this post, we will look in depth at what React.PureComponent and the goodies it brings us. Read on. Tip: Building with components?
Authored by: Bit
A guide to useState in React
useState is a hook that allows you to have state variables in functional components. There are two types of components in React, class and functional components. Class components are ES6 classes that extend from React.Component and can have state and lifecycle methods: Functional components are functions that just accept arguments as the properties of the component and return valid JSX: As you can see, there are no state or lifecycle methods.
Authored by: Esteban Herrera
Creating Forms In React With Formik And Yup
Forms are a very important part of any application. Forms are used everywhere from login to search.
Authored by: Bit
Powering Up React Development With Nx
The most common way to start a React project is to use the official Create React App. There are a few other starter kits, and their main focus is on getting developers up and running quickly.
Authored by: Victor Savkin
Patterns for data fetching in React
React is great at displaying your data in a hierarchical component view. But how do your components get the data? There are many ways to go about it, each with their own pros and cons. In this article, I'll cover all the major ways to do so with hands-on examples, as well as their various alternatives.
Authored by: LogRocket
Creating A Social Follow Component in React
On almost every website, you're going to watch to share your Social Media accounts for visitors to follow. In this article, we are going to create a Social Follow component in React! For a deeper dive, check out Using Font Awesome 5 with React!
Authored by: Scotch Development
Writing Your Own Custom Hooks!
It's a scary world out there and please don't tell me you are planning to survive this React World just with the help of classes (of course you can but it will be painful). Hooks are the new trend in...
Authored by: Bit
Vue
Top Vue admin Templates in 2019
A few years ago you only had a few options choosing an admin template: these were React, Angular and plain HTML5. Surely today these templates are still big on the market. Last year, though, the Vue.js framework has become very popular, and because of this we now have lots of good admin templates.
Authored by: Bit
Build Responsive Cross Platform Vue Apps with Quasar Framework and GraphQL
Build responsive SPAs, SSR Apps, PWAs, Hybrid Mobile / Electron Apps using a single codebase with Quasar Framework powered by Vue.js and GraphQL APIs over postgres using Hasura GraphQL Engine. Instant setup. Tutorial/boilerplate 👉 quasar-framework-vue-graphql Quasar Framework Quasar Framework is a high performance full frontend stack allowing developers to maintain a single codebase to build different types of apps (SPA, SSR, Hybdrid etc).
Authored by: Praveen Durairaj
Build a Vue.js SPA on Top of Headless WordPress
In a rush? Skip to technical tutorial or live demo I can't believe I'm about to write about WordPress again. I'm only (half) kidding, as the last time I played around the WP REST API, I thought it was actually pretty dope!
Authored by: Snipcart
Google Picker With Vue
Last week we saw a general File Uploader with Vue. Now let's see how we can pick a file from Google Drive. Initial Setup with Google Go to https://console.developers.google.com. Create a project. After creating your project it will be listed, click on the project you created. You would see this dialog box.
Authored by: Karthik_B
Renaming src Folder of a Vue CLI 3 Project
I'm Anthony Gore and I'm here to teach you Vue.js! Through my books, online courses, and social media, my aim is to turn you into a Vue.js expert. I'm a Vue Community Partner, curator of the weekly Vue.js Developers Newsletter, and the creator of Vue.js Developers.
Authored by: Anthony Gore
Node.js
How to Build and Deploy a Cloud Native Node.js App in 15 minutes
The goal of this tutorial is to show how you can turn a simple Hello World Node.js app into an application running on Kubernetes with all the best-practices applied. The tutorial shows you how to use the assets and tools provided by CloudNativeJS in order to build an enterprise-grade application, turn it into a Docker container image and then deploy that image easily on Kubernetes.
Authored by: RisingStack
A complete guide to threads in Node.js
With the addition of worker threads, fields like AI and machine learning can now synchronously execute complex operations in Node.js. Learn how.
Authored by: Maciej Cieślar
An introduction to the hapi Node.js Framework
The great thing about the Node.js ecosystem is the fact that if you're looking to create an application, there's most likely a module/framework that can help with that! In this article, we'll be creating a basic REST API with hapi.js. You may also be interested in API Development and Routing with Node.js and Express!
Authored by: Alligator
Node.js TypeScript #7. Creating a server and receiving requests
1. Node.js TypeScript #1. Modules, process arguments, basics of the File System2. Node.js TypeScript #2. The synchronous nature of the EventEmitter3. Node.js TypeScript #3. Explaining the Buffer4. Node.js TypeScript #4. Paused and flowing modes of a readable stream5. Node.js TypeScript #5. Writable streams, pipes, and the process streams6. Node.js TypeScript #6.
Authored by: Marcin Wanago
Other
Top 5 Frontend Development Megatrends
It can feel overwhelming to be a web developer. Constantly trying to keep up, learning new frameworks, learning new language features, sometimes learning entire new languages. It's no wonder that front-end developers are often stressed out of their minds.
Authored by: Kevin Ball
My Opinionated git Cheat Sheet
Ben Nadel creates a git cheat sheet for himself so that he can refer to it when he forgets how to execute certain git use cases. This git cheat sheet will also serve as a repository of the git information that he gathers over time.
Authored by: Ben Nadel
Experimenting with the Streams API
I am always looking for ways to build faster, slicker web pages. Where applicable, I'll use great new browser features such as service workers, HTTP/2 and improved compression, just to name a few. But what if I told you there was a way to build even faster web
Authored by: Dean Hume
Build a Decentralized Web Chat in 15 Minutes
In this 15 minute tutorial we're going to build a simple decentralized chat application which runs entirely in a web browser. All you will need is a text editor, a web browser, and a basic knowledge of how to save HTML files and open them in the browser.
Authored by: David Walsh
