![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
We have many great articles on Vannila JavaScript this week. Amongst them, we recommend one as a must read. "A Simple Guide to ES6 Promises" by Brandon Morelli.
For Angular developers, we recommend a little glimpse into the future. You will enjoy this "spoiler" article named "Bazel, an experimental and unofficial feature of Angular 6" brought to us by Fanny-Elise Patrikainen.
State management is often a highly opinionated topic amongst React folks. In order to get a better understanding and introduction in new React Context API, we recommend that you check out "React Context API — A Replacement for Redux?" by Rajat S.
Finally, we have something for Vue.js fans. "The easiest way to improve your Vue.js application." will help you to improve SEO and UX of your applications.
General
A Simple Guide to ES6 Promises
Promises are one of the most exciting additions to JavaScript ES6. For supporting asynchronous programming, JavaScript uses callbacks, among other things. However, callbacks suffer from problems like...
Authored by: Brandon Morelli
AJAX Basics Explained By Working At A Fast Food Restaurant
AJAX (Asynchronous JavaScript And XML) can be pretty confusing if you do not have a firm understanding of server-side code. When I started with web development, I first learned HTML, CSS, JavaScript and jQuery before I ventured into Node.js and Ruby on Rails.
Authored by: Codementor
Using ES6 classes for Sequelize 4 models
The ES2015 or ES6 specification introduced class to JavaScript. Libraries like ...
Authored by: Hugo Di Francesco
Using trampolines to manage large recursive loops in JavaScript
I vividly remember my entrance into the world of functional programming. Ironically, I was learning about class-based JavaScript in ES5. I was assigned some homework meant to reinforce the OOP concepts taught. However, a full-blown class-based OOP implementation was overkill for the type of problem that was assigned as homework, so I decided to do the whole thing in pure functions.
Authored by: LogRocket
Regex course - part three. Grouping and using ES6 features. - wanago.io - Marcin Wanago Blog
We covered quite a few features of regex so far. There is a lot more, though. Today we will deal with more advanced concepts, like groping and cover more of the RegExp object features in JavaScript. We will also learn how to use some of the features that ES6 brought us.
Authored by: Marcin Wanago
JavaScript
Es6 Awesomeness (Part I)
The sixth edition of ECMAScript standards, known as Es6 adds significant new syntax for writing complex applications, including classes and modules. Some of this new syntax and concepts we would discuss in a 3 part documentation of my learning, making them as possibly simple as i can.
Authored by: Codementor
Implementing Reduce in javascript (Part 1)
I've spent a lot of time trying to learn the map/reduce functions, and more after that trying to use it in a daily basis. For this reason i've decided to write this tutorial, but i don't want to simply explain how/when to use this function, we are going to implement the reduce function together, and using ONLY this function we are going to implement map, filter, flatMap and some other function to work with iterable objects.
Authored by: Erich Oliveira
Understanding the Spread Operator in JavaScript
Newer versions of JavaScript have brought vast improvements to the language in terms of expressiveness and ease of development, but the rapid pace of change has left many developers feeling like they're struggling to keep up.
Authored by: Kevin Ball
.forEach(), .map(), .filter() .... What's the difference?
forEach(), is used to execute the same code on every element in an array but does not change the array and it returns undefined. Example: In the example below we would use.forEach() to iterate over an array of food and log that we would want to eat each of them.
Authored by: Codementor
JavaScript ES6 - write less, do more
JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules... and more. Let's take a look.
Authored by: Codementor
Getters And Setters used in JavaScript Objects....How?
A common object paradigm is to include getter and setter method as attributes. Getter and Setter methods get and set the properties of an object. Advantages: You can check if new data is valid before setting a property You can perform an action on the data which you are getting or setting on a property.
Authored by: Ogwuru Johnson
TypeScript
Static Methods Can Access Private Class Constructors In TypeScript
Ben Nadel looks at the access rights of Static methods in TypeScript; and, demonstrates that static factory methods can access private constructors on the same class definition.
Authored by: Ben Nadel
Angular.js
Bazel, an experimental and unofficial feature of Angular 6
Angular 6 has been released few days ago, bringing plenty of great new features, such as Angular Elements or the Angular CDK. But today I would like to talk about an other feature called Bazel, which...
Authored by: codeburst.io
Angular 2 (Introduction to a web development platform)
In this post, we would be writing a simple Angular 2 app. This will give us a first idea of the framework and provide us with the understanding of the concepts behind. Install the Angular cli First you need to install the angular-cli, if you haven't already done so.
Authored by: Codementor
Upgrade AngularJS Sorting Filters to Angular
In the early days of AngularJS, one of the most celebrated features was the ability to filter and sort data on the page using only template variables and filters. The magic of two-way data binding won over many converts to AngularJS and helped it spread like wildfire.
Authored by: Scotch Development
Learn how to create your first Angular app in 20 minutes
Photo by Kelly Sikkema on Unsplash Angular is a JavaScript framework, created my Misko Hevery and maintained by Google. It's a MVC (Module view controller). You can visit the official page to learn more about it. Right now, the latest version of Angular is 5.2.10.
Authored by: Codementor
React.js
React Context API - A Replacement for Redux?
Redux version: https://bitsrc.io/geekrajat/dcsuperhero/src/preview React Context API version: https://github.com/rajatgeekyants/superhero Getting started with redux requires a certain learning curve, but here's the gist of what you should know when suing Redux. The state of the entire app is store in a single object tree within a single store.
Authored by: Rajat S ⌨️
React 16 - What can it do for you? - Part 1
Should you be using React 16? A detailed post about React 16's powerful new features React 16, a.k.a React Fiber has brought a new level of simplicity to the development game. With features like Error Boundaries, Portals, and Context API, React Developers can build their apps with a kind of ease never seen before.
Authored by: Rajat S ⌨️
Styling React Components Using glamorous
💄 glamorous is a lightweight library for CSS-in-JS with a simple API that's similar to styled-components' and that makes use of glamor under the hood. Two of the main differences compared to styled-components is the use of JavaScript object literals and an additional API that allows to use DOM elements directly without creating additional named components.
Authored by: Alligator
How-to Build Your Own React Boilerplate
So you've learned some React and built a few things. You've probably used create-react-app or react-slingshot to get off the ground quickly with minimal configuration. However, now you're ready to venture out on your own with your very own React boilerplate. I recently faced this same dilemma.
Authored by: Seth Alexander
How to Get a React Component's Element
JSX is an amazing pseudo-language for React, and if I'm honest, it's what brought me to love React so much. Using React without JSX is cumbersome and frustrating, while using JSX is such an easier way to express your code. One drawback of JSX, however, is that it makes accessing component elements indirect, if not ...
Authored by: David Walsh
React Native - Platform specific code
With React Native we are writing the code for both, iOS and Android. And it won't pass long to notice that we need to differ one from another. Right: Android Emulator Nexus 5 API 23 1080x1920: xxhdpi x86_64 As we can see, our Header component, that has the simple task of displaying text behaves differently on Android and iOS.
Authored by: The Practical Dev
Vue.js
The easiest way to improve your Vue.js application. Part 1
Vue.js is a great framework for developing different kinds of web applications, however, it has a problem with SEO: the asynchronous content of an application can't be optimally crawled by search engine bots, so it could be a huge problem for your business.
Authored by: ADCI Solutions
Intro to the Vuejs🐎🐎🐎
Today I'm here to explain about Vuejs in a simple way and its uses. Let's start learning by writing code instead of reading long paragraphs. For these, I'm using the codepen. first, I started with writing div tag with id app.
Authored by: Sai gowtham
The Ultimate Vue.js & Laravel CRUD Tutorial
In this tutorial, I'll show you how to set up a full-stack VueJS/Laravel app and demo each of the CRUD operations. We'll use Axios for AJAX, and I'll also show you strategies for dealing with the tricky UX of this architecture.
Authored by: Codementor
Bootstrap vs Semantic UI vs Bulma for VueJS
Comparing 3 different front end CSS based frameworks for web and mobile development - Bootstrap, Semantic UI and Bulma
Authored by: Sam Benskin
Creating Multi-root Vue.js Components
A common constraint in component-based frameworks like Vue.js is that each component has to have a single root element. This means that everything in a particular component has to descend from a...
Authored by: Kevin Ball
Node.js
Web Scraping Scotch: The Node Way
Learn how to apply web scraping techniques in a Node application to extract data from any website using Scotch as a case study.
Authored by: Scotch Development
Node.js Backend Development - Creating Custom Modules
In the previous article we learned how to serve HTML files from the disk or file systems. In doing so we started to make our code larger. It started getting overlapped with callbacks and we may fall into the callback hell really soon. We need to separate code really soon before we mess up the whole system.
Authored by: DiscoverSDK
A Quick Look at Nest
Nest is a scalable framework for building server-side applications. It is authored in TypeScript and relies on the Express framework. It leans heavily on modern language features such as async/await and decorators to reduce cruft and place the focus cleanly on route-handling business logic.
Authored by: SitePen
Building a chat bot using Nest.js and Telegram
In this tutorial, I will be showing you how to build a basic chat bot for Telegram using Nest.js. This will, amongst other things, give you an overview of how Telegram bots works and what you can do with them. Telegram bot are simply accounts that do not require an additional phone number to setup.
Authored by: olususi k oluyemi
Libraries and Tools
An overview of Visual Studio Code for front-end developers
No matter whether you are a code newbie or a seasoned developer, code editor is an imperative part of your work. The problem, especially if you are a beginner, is that there are tons of choices for IDEs. And many of them share similar features, functionalities, and even UI.
Authored by: Codementor
Git Integration in Visual Studio Code
Visual Studio Code has easily become one of the most popular editors out there for Web Development. It has gained such popularity thanks to its many built in features, including source control integration, namely with Git. With Git being one of the most popular and powerful Source Control providers, harnessing its power from within VS Code is just icing on the cake.
Authored by: Scotch Development
Teardown: Visual Studio Code VS Sublime (JavaScript Focus)
Visual Studio Code and Sublime are two of the most popular code editors out there. In this post, I'll compare both tools' performance, customization, and extensions. For frontend developers out there, this will also answer the question: which one is better for JavaScript development?
Authored by: Snipcart
Turn Sublime Text 3 into a JavaScript IDE
Sublime Text is one of the most popular editors for web development and software development in general. It's very smooth and fast compared to other editors (being written in C++ helps that speed). Sublime also has tons of plugins you can find through Package Control. But it's only a text editor and not an IDE.
Authored by: CSS-Tricks
Testing
End-to-end testing React apps with Puppeteer and Jest
In this tutorial, we'll see how to write tests for a React app using Jest and Puppeteer. Testing is an important part of modern web application development, it helps to check if the code you wrote is acceptable and works as accepted. It's a way of catching bugs in your code before you go "live".
Authored by: LogRocket
Setting up Jest with React and Webpacker
Webpacker is a great library that was introduced in Rails 5.1. It gives an easy...
Authored by: if let Some(Chris) = aergonaut
Functional Programming
I ❤ Ramda - Partial Application with Curry
The I ❤ Ramda series will differ slightly from others you may have seen. Instead of using the typical foo, bar, baz examples, or articles demonstrating isolated functions, this series aims to showcase real world applications of Ramda.js. This is the first article and will focus Partial Application with Curry.
Authored by: joelnet
Other
Math and front-end: Context is so much more important than degree of difficulty
If you were one of those kids that wondered why you had to attend all those math classes and learn about angles and algebra, well, so was I. I'll admit, I was too restless and easily bored to be a good student in a classroom setting.
Authored by: LogRocket
Learn Bulma CSS in 5 minutes
Bulma is a simple, elegant, and modern CSS framework that a lot of developers prefer over Bootstrap. Personally, I think Bulma has a better design by default, and it also feels more light-weight. In this tutorial, I'll give you a super quick introduction to the library.
Authored by: Per Harald Borgen
How to Use the berforeinstallprompt Event to Create a Custom PWA Add to Homescreen Experience
Google recently announced as of May 2018 Chrome will no longer automatically prompt Progressive Web App users to add the PWA to their homescreen. It is now up to the site to manage the prompt. This tutorial will help you create your own workflow.
Authored by: Chris Love
