First of all, we wish you all the best in the year 2019. If one of your New Year resolutions is to learn and get better in JavaScript, you are in the right place. Let's go and see all the goodies we have in the first newsletter of the year 2019.
Oftentimes we are not using Vanilla JavaScript to its full potential. Many developers still have a misunderstanding about the "this" keyword, what it actually is and how to handle it. To shed some light on this topic, we highly recommend the great article "Understanding Call, Bind and Apply Methods in JavaScript" by Sukhjinder Arora.
Test Driven Development, or TDD for short, can greatly increase the quality of your code. If you haven't tried it already we highly recommend doing so. If you lack motivation, make sure to check out Mario Hoyos's story "A Guide to Test-Driven Development (TDD): Shorter Feedback Loop, Faster Workflow".
Did you ever wonder "How to Perform Web-Scraping using Node.js"? If the answer is yes, you'll find Ankit Jain's article very interesting and enlightening.
General
A Guide To Sorting Algorithms in JavaScript
Learn who to write Bubble, Insertion, Merge, and Quick Sort Algorithms in JavaScript Sorting is considered to be an important concept in many programming languages as it helps us locate elements in a faster and easier manner. In this post, we will use sorting algorithms to sort an array.
Authored by: Rajat S β¨οΈ
Page Object pattern in JavaScript
The Page Object pattern is certainly the most utilized pattern when it comes to web application test automation. It is a powerful method for reducing code maintenance costs and code duplication which leads to increase of the re-usability and robustness.
Authored by: Vladimir Gorej
A comprehensive look back at Frontend in 2018
By now you've seen all manner of annual reviews. But in all probability you haven't seen one as thorough as this. It's worth your time. We promise you'll learn something.
Authored by: LogRocket
Design Patterns Series: The Template Method
In our last article in the series, we discussed in-depthγ½ about the Strategy Method. In this articleπ, we will look at the Template Method. One of the many design patterns that help developers writeπ well-structured apps. Tip: Build software faster as a team with Bit .
Authored by: Chidume Nnamdi
JavaScript
Understanding Call, Bind and Apply Methods in JavaScript
If you are learning JavaScript, you might have seen the this keyword. The this keyword in JavaScript behaves differently compared to other programming languages. This causes a lot of confusion for programmers. In other object-oriented programming languages, the this keyword always refers to the current instance of the class.
Authored by: Sukhjinder Arora
Let's Build Prototypal Inheritance in JS
Can't find money in the wallet? Try in that smaller wallet. The idea for this post is pretty simple. I want to some extent build and with that, illustrate how prototypes work in Javascript. We have to make a statement.
Authored by: Codementor
TypeScript
Decorate your code with TypeScript decorators
Decorators introduces programmers to write the metadata annotation which will help you to introspect your code. Best use-case you find for decorators, will be the cross cutting concerns β-βAspect Oriented Programming. In computing, aspect-oriented programming (AOP) is a programming paradigm that aims to increase modularity by allowing the separation of cross-cutting concerns.
Authored by: codeburst.io
Angular
Angular Material Icon Tutorial With Example
Angular Material Icon Tutorial With Example is today's topic. The Angular Material library has a wide variety of components that we can use. One such component is . The component makes it easier to use vector-based icons in your angular app. This directive supports both icon fonts and SVG icons, but not bitmap-based formats.
Authored by: KrunalDLathiya
Creating A Vue.js Inspired Event-Modifier DOM Plug-In In Angular 7.1.4
Ben Nadel uses Angular's Event Manager plug-in system to add Vue.js inspired event-modifiers (like .stop, .prevent, .once, and .self) to an Angular 7.1.4 application. This allows Angular to mimic the Vue.js event-handling logic.
Authored by: Ben Nadel
React
Declarative Programming & React
Declarative programming is something popularized by React in the JavaScript community. It is not a new thing but just got popularized in recent days. According to Wikipedia: declarative programming is a programming paradigm - a style of building the structure and elements of computer programs-that expresses the logic of a computation without describing its control flow.
Authored by: Saurabh Sharma
Conditional Field With React
Sometimes we need to render a form based on what information the user has decided to share with our website. As an example, should we have two payment methods between using a card or paypal, we can render between a card number fields and a paypal form, which usually consist of an email address.
Authored by: Codementor
From scratch to Create React App on Windows 10
Photo by Luana De Marco on Unsplash I have been a professional web developer for 10 months now and used both MacOs and Windows in that time. My preferred OS to use is Windows, for no other reason than I prefer the keyboard layout.
Authored by: πππππ ππππππβπ¦π¨βπ»
Event Propagation: React Synthetic Events vs Native Events
Recently, I came across an interesting problem involving Event Propagation in React. I want to share my discovery around React's synthetic event system, in the hope that you won't spend several hours, like I did, questioning your existing understanding of JavaScript events.
Authored by: Gideon
Unofficial React Native TypeScript
Over this past year, I have adopted TypeScript for React web development projects; feeling especially good about that decision as Create React App now (as of this Fall) officially supports it. Wrote...
Authored by: codeburst.io
Vue
5 Most-Requested Features For Vue.js in 2018
Vue has a small and focused API, but users and maintainers are always thinking about potentially useful new features. Here's a breakdown of five of the most popular feature requests from Vue's GitHub issue board.
Authored by: Codementor
Vue.js Up And Running By Callum Macrae
Ben Nadel reviews Vue.js Up And Running: Building Accessible and Performant Web Apps by Callum Macrae. This book is a gentle but thorough introduction to Vue.js, especially for people with an Angular or Angular.js background. It gave Ben the confidence to start building Vue.js applications, which is exactly what he tried to do!
Authored by: Ben Nadel
Node.js
How to perform web-scraping using Node.js
In this post, we'll learn how to use Node.js and friends to perform a quick and effective web-scraping for single-page applications. This can help us gather and use valuable data which isn't always available via APIs. Let's dive in. Web scraping is a technique used to extract data from websites using a script.
Authored by: Ankit Jain
Node.js Module Exports - Demystified
Understand Node.js Module Exports and get comfortable using the syntax. Get best practices for using module exporting to give your app a better structure.
Authored by: Stackify
Libraries and Tools
The State of JavaScript Frameworks 2019
Quick SITREP (If you just want the meat of the tech, skip to the "Framework Cookoff" or "Summary and Victor" section.) I'm on vacation, so of course I'm writing and reviewing frameworks to write some code! π€ An Aside: Hey, if you're on vacation and not writing code, more power to you.
Authored by: Adron Hall
Odi - server-side framework
Hi guys! I am currently working on the server-side TypeScript framework. My team already widely use this framework in various e-commerce and ERP projects. Structure and semantic were inspired by other popular frameworks like Spring and ASP.NET .
Authored by: The Practical Dev
9 Tips and Tricks for Chrome Dev Tools
Chrome is increasingly not just a browser of choice, but also a powerful development tool in its own right. New features are regularly introduced, some of which fall more naturally into (my) development cycles than others.
Authored by: Laura Weatherhead
Testing
A Guide to Test-Driven Development (TDD): Shorter Feedback Loop, Faster Workflow
Trust me, I used to hate testing too. A short story Like many before me, I was hesitant to try my hand at test driven development. I always cited reasons such as having twice the code to maintain and/or spending time shipping instead of writing extra code, which was my way of justifying being lazy.
Authored by: Bit
Explore a more complete front-end testing strategy
The assumption in this article is that we are continuously developing a relatively large front-end project, and we have adopted a domain-driven design, as well as an object-oriented programming model. The front-end business logic is split into domain modules / UI components .
Authored by: unadlib
Revisiting React Testing in 2019
Seems that today, everyone is using a different React testing library and even when they are using the same one, their philosophy varies widely. The example from this article is available for download. The Libraries In reading an article, Testing Apollo's Query Component , I was reminded that there are currently (going into 2019) several popular and competing React testing libraries.
Authored by: codeburst.io
Using API first and TDD for your next library
I used this technique to help me create more relevant unit tests, and I wanted to share it with you. If TDD does not sound familiar to you, check this quick but straight to the point post : Let us imagine we are building a node module to check if a date is between two dates.
Authored by: The Practical Dev
Other
How Service Workerβ Cache Works - Does It Make Your Site Faster?
Progressive web applications are sold as fast thanks to service worker caching. How does it work and does it make your site faster?
Authored by: Chris Love
How to Learn Web Development
So you want to learn web development? This post attempts to go through the best way to learn web development as a complete beginner. It gives you guidelines on how to learn web development, what topics to learn in which order and why, and general principles on learning.
Authored by: The Practical Dev
Checking if an input is empty with JavaScript
Last week, I shared how to check if an input is empty with CSS. Today, let's talk about the same thing, but with JavaScript. It's much simpler. Here's what we're building: If you want to validate the input when a user types into the field, you can use the input event.
Authored by: Zell Liew