![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
This week must read is an amazing list of "11 Javascript Animation Libraries For 2018" as a research result of Jonathan Saring. This can save you a lot of time if you need to find appropriate animation library for your next project.
You probably want to build better JavaScript applications. Rajat S suggests that we should use Webpack and Poi. For more details make sure to read "Build Better JavaScript Apps with Webpack and Poi".
React.js has even more increase in popularity this week. This produced a lot of great articles and a hard choice for React.js developers. Our recommendations for this week are: "5 common practices that you can stop doing in React" by Manjunath M. and "The definitive guide to React Material" by Yomi.
Finally, for Vue.js developers, we recommend a nice overview and presentation of components in Vue, "Components in VueJs", by Friday Godswill.
General
Build Better JavaScript Apps with Webpack and Poi
Webpack is a build tool that puts all of your JavaScript files, images, fonts, and CSS, in a dependency graph. This lets you use require() in your source code to point to local files and decide how they can be processed in your final JavaScript bundle.
Authored by: Rajat S ⌨️
WebAssembly: Solving Performance Problems on the Web
In modern JavaScript, the goal is often to find every way to optimize performance in the browser. There are times when web applications demand high performance and expect browsers to keep up. Traditional JavaScript has performance limitations because of how the engine treats the language.
Authored by: SitePoint
The syntactical Sugar Classes of JavaScript
In my previous article; we looked at Getters and Setters as they apply to objects in JavaScript and i recall promising to show us how we could use getters in Es6 classes, We would also learn a great deal about classes. First of; i wouldn't be talking about them differently.
Authored by: Codementor
Build a JavaScript Single Page App Without a Framework
Front-end frameworks are great. They abstract away much of the complexity of building a single-page application (SPA) and help you organize your code in an intelligible manner as your project grows. However, there's a flip side: these frameworks come with a degree overhead and can introduce complexity of their own.
Authored by: Michael Wanyoike
Async and defer, the difference.
I recently had this problem with JavaScript files that slowed down a web page as soon as it was loaded. It's not nice to wait, I understand. That's why I looked at the history of async and defer.
Authored by: Thømas_
How to deal with complex APIs
Some APIs are inherently complex. They may look simple on the surface, and you may think writing those two lines of code may not be a big deal. Under the surface, though, they force you to handle multiple concerns at once, and that usually obscures your intent, making the code harder to read and modify.
Authored by: codeburst.io
JavaScript
Understanding basics of array in javascript
In the post I will share some basics about Array. Array Array is the way of storing group or list of data. Let say, we want to store group of colors without using array. const color1 = 'purple'; const color2 = 'black'; const color3 = 'yellow'; const color4 = 'aqua'; As we see, our codes are not DRY(Don't Repeat Yourself) at all.
Authored by: Codementor
Upcoming ESNext features - Part 1
Personal page of Szabolcs Szabolcsi-Toth, a developer from Budapest, Hungary. Organizer and curator of JSConf Budapest and CSSConf Budapest, occasional speaker, hobby hardware hacker, photographer and Lego nerd. Working at IBM Cloud Video as a senior frontend engineer.
Authored by: Szabolcs Szabolcsi-Toth
ES2017 - Trailing Commas
It took all my strength not to call this article 2017 and the Mystery of the Missing Commas. I hope you appreciate that. Our next feature for ES2017 is a bit strange. In general, the features for 2015 and above are complicated but their explanations are simple.
Authored by: DiscoverSDK
Quick Tip: Exploring Common Misconceptions about ES6's `const` keyword.
Values assigned with let and const are seen everywhere in JavaScript. It's become common to hear them explained like so: "const creates an constant (immutable) binding while bindings created with let can be changed (mutated) without issue."
Authored by: Codementor
JavaScript Objects Quickly Explained
You know about Arrays right? An array is a ordered collection of data. Similarly, an object is an un-ordered collection of data. Let's look at an array: const justiceLeague = ['Batman', 'Superman', 'Martian Manhunter', 'Wonder Woman', 'Hawk Girl', 'Flash', 'Green Lantern']; So I have this array (or ordered list called justiceLeague with 7 members in in.
Authored by: Tamal Anwar
Angular.js
Developing An App using Ionic 1 and AngularJS (Part 2)
Hi guys! We'd be taking off from where we stopped the last time. If you were able to start a new App like I explained in the previous article, congratulations! Now I'd go ahead to explain the file/folder structure of the project you created, and then explain how to build the APK and IPA on your Android and Apple Devices (Tablets, Phones) respectively.
Authored by: Nihinlola
Angular 6 FireBase Gallery
Ever wanted to build a server less image gallery application with out wanting to deal with client side - server side programming separately? Follow this tutorial to find out how. In this project, I want to share with you the approach I took to develop a beautiful gallery application using just a client side framework (Angular) and some google cloud services.
Authored by: codeburst.io
Angular custom elements with Cli
Sharing is caring!0sharesTwitterFacebook0Few posts ago I described how to create an angular material data table and how to publish it as a library. As we're really proud about that, and also a bit lazy, I was wondering if it's possible to be used with other frameworks like react, vue.js and why not in pure html [...]
Authored by: Daniele Zurico
React.js
5 common practices that you can stop doing in React
At this point, it's tough to argue that React is one of the most loved libraries on the planet. There is a tremendous amount of interest in React and new developers are swayed into the platform because of its UI-first approach.
Authored by: Manjunath
The definitive guide to React Material
Material Design is a design language that was first introduced by Google in 2014. It's a visual language that makes use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. The goal for Material Design is down to three things: Create, Unify and Customize.
Authored by: LogRocket
Build Custom Pagination with React
Often times, we get involved in building web apps in which we are required to fetch large sets of data records from a remote server, API or some database sitting somewhere. If you are building a payment system for example, it could be fetching thousands of transactions.
Authored by: Scotch Development
Yes, React is taking over front-end development. The question is why.
Here are a few reasons why React has become so popular so quickly: Working with the DOM API is (mostly) hard. React basically gives developers the ability to work with a virtual browser that is friendlier than the real browser. React is just JavaScript.
Authored by: Codementor
A minimal Apollo Client in React Example
The tutorial guides you through building a minimal Apollo Client in React example application where Apollo Client is used for remote data and React's local state for local data. After all, it's a minimal boilerplate project to get you started with GraphQL in React ...
Authored by: Robin Wieruch
Extracting a React JS component and publishing it on NPM
So, you've created an awesome React JS component and want to share it with other developers. That's awesome! In this post, I'll show you how to do that. Let's not waste time. The first thing you should do is to create an NPM account. It's free and you can do it right here.
Authored by: codeburst.io
Vue.js
Components in VueJs
Components make our codes reusable and enable us to stick to the software development principle of D.R.Y (Don't Repeat Yourself). Components are blocks of code which extend basic HTML markup behaviour and can be used over and over for different purposes.
Authored by: Friday Godswill
Async Data Options in Vue's Nuxt.js
There are a number of benefits to writing "Universal JavaScript" applications - applications that render full pages on the server but then after page load "hydrate" a single page application. These applications have all of the SEO and initial pageload sped benefites of server-rendered applications, combined with the fluidity and power of a SPA.
Authored by: Kevin Ball
Node.js
Reloading the express server without nodemon
I have been using nodemon for reloading express server and any other NodeJs code since I started writing backend NodeJS code. It does what it says on the label and does it pretty well. However, the problem with nodemon is lack of control and the fact that it seems to kill the process.
Authored by: The Practical Dev
How to write Scalable Nodejs Services [+Code Examples]
I recenlty had the opportunity to use OOP patterns on Nodejs environment, and I had a big time doing so. Lets see what we're gonna build this time: Build an API service that provides two resources: apps and developers , but more resources will be added in the future.
Authored by: Codementor
Node.js Backend Development - Implementing Routing
In the previous article in this series on developing backend applications with Node.js, we learned how to work with URLs, request methods, and forms. The code of all the articles can be found on the Github repository Learn Node.js With Sabuj . Code for each article is separated into branches on the repository.
Authored by: DiscoverSDK
Make a P2P connection in 10 minutes
This is a short guide on how to make a P2P chat. My aim is to give you only a taste, if you like I could write a more deeper article explaining how all this things work. That said, lets start.
Authored by: Codementor
Writing a CRUD app with Node.js and MongoDB
Create a new file, let's name it app.js directly inside the ProductsApp directory touch app.js Open the newly created file named app.js and require all the dependencies we previously installed (ExpressJS and body-parser ) -we will talk about mongoose later- // app.js var express = require('express'); var bodyParser = require('body-parser'); // initialize our express appapp = express(); Next step would be dedicating a port number and telling our express app to listen to that port.
Authored by: Eslam Maged
Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers
If you've been building anything with Node.js for long enough, then you've no doubt experienced the pain of unexpected speed issues. JavaScript is an evented, asynchronous language. That can make reasoning about performance tricky, as will become apparent. The surging popularity of Node.js has exposed the need for tooling, techniques and thinking suited to the constraints of server-side JavaScript.
Authored by: David Mark Clements
Libraries and Tools
11 Javascript Animation Libraries For 2018
11 Of the best Javascript and CSS animation libraries to use in 2018. Scrollers, loaders, 3d, popmotion, drawings for SVG and DOM. Discover Anime.js, Three.js, Mo.js, Typed.js, Velocity and much more.
Authored by: Bit
9 Javascript Date Time Libraries For 2018 - Bits and Pieces
9 Useful Javascript time and date manipulation libraries for your next application. Learn how to manipulate and control time with date-fns, moment.js, spacetime, luxon, dayjs, ms, instadate and more.
Authored by: Bit
5 React Motion use cases with examples
React-motion is a library that makes it easy to create realistic animations within components using the laws of physics. An endless possibilities of realistic animations can be explored by simply specifying values for stiffness and dampness within one of the exported components.
Authored by: Chris Nwamba
Uppy File Uploading
One of the big tasks I was charged with at my first job was setting up a system by which any customer or potential customer (aka anonymous user) could upload PDF and image files. I had loads of constraints to deal with: browser support, server settings, variance in user tech knowledge, etc.
Authored by: David Walsh
Animate Images and Videos with curtains.js
While browsing the latest award-winning websites, you may notice a lot of fancy image distortion animations or neat 3D effects. Most of them are created with WebGL, an API allowing GPU-accelerated image processing effects and animations.
Authored by: CSS-Tricks
A Beginner's Guide to Babel
James Kolce introduces Babel, a JS transpiler that allows devs to write cutting-edge code which is translated into JavaScript that runs in all browsers.
Authored by: James Kolce
Testing
Get Rid Of Toxic Bugs On Your Apps With Detox!
During the React Europe Conference last year, I discovered a promising E2E testing framework for mobile apps called Detox. Since then, I've kept in mind the will to give it a try. Recently, I developed an example app just for that purpose. It allowed me to see what's under the hood of Detox.
Authored by: Demangeon Julien
Writing Snapshot Tests For React Components With Jest
In this tutorial, we will be looking at what snapshot tests are and how we can use snapshot testing to ensure our User Interface does not change without the team knowing about it. To get started, you will need to familiarize yourself with the following NodeJS - A JavaScript runtime built on Chrome's V8 JavaScript engine.
Authored by: Scotch Development
Truffle: Testing Smart Contracts
In our introduction to Truffle, we discussed what Truffle is and how it can help you automate the job of compiling, testing and deploying smart contracts. In this article, we'll explore how to test smart contracts. Testing is the most important aspect of quality smart contract development. Why test extensively?
Authored by: Mislav Javor
Functional Programming
Function identity in JavaScript, or how to remove event listeners properly
Last week I looked over some JavaScript a colleague of mine had written, and I noticed an interesting mistake. Interesting because I knew that I had myself tripped over this at some point, and seeing it in someone else's code showed me that it's indeed a tricky problem more people are struggling with, so I thought it might be worth sharing.
Authored by: Emanuel Tannert
Other
Enable Tabbing Within A Fenced Code-Block Inside A Markdown Textarea In JavaScript
Ben Nadel considers the use of markdown in his comments; and, how he can greatly increase the usability of the commenting textarea by enabling tabbing features (Tab, Shift+Tab, Enter, Shift+Enter) while the user is editing a fenced code-block.
Authored by: Ben Nadel
How To Build A Blockchain with Javascript (Part 1)
Creating a blockchain with Javascript part 1 In this tutorial, we'll write a very tiny blockchain in JavaScript. It won't be too fancy, but it'll be enough to give you an understanding of how a blockchain works. We'll call this blockchain SavjeeCoin. Let's get started!
Authored by: Codementor
Build, Deploy and Publish an API Using Code.xyz and Node.js in 6 Easy Steps
APIs, the building blocks of software, run our world. They're how software systems communicate with each other, and how we as people communicate with software. Knowing how to build an API is not only a crucial skill for a software developer, but a foundational part of general coding literacy - a skill that can help anyone in their career.
Authored by: Standard Library
How to deploy a Node.js application to AWS Lambda using Serverless
Being a developer is amazing. Writing code, solving problems and thinking of ingenious solutions for complicated algorithms is what we live for. But, the grass is not always so green on this side of the fence. Sooner or later you need to get your hands dirty and deploy the app you worked so hard on.
Authored by: Adnan Rahić
Build a Gatsby Blog using the Cosmic JS source plugin
In this tutorial, I'm going to show you how to create a simple but blazing fast blog using React, Gatsby JS, and Cosmic JS. Let's get started. Download the GitHub repo. Check out the demo. You will be required to install Node JS, npm, and Gastby CLI before starting.
Authored by: Codementor
Debugging JavaScript Projects with VS Code & Chrome Debugger
Debugging JavaScript isn't the most fun aspect of JavaScript programming, but it's a vital skill. This article covers two tools that will help you debug JavaScript like a pro. Imagine for a moment that the console.log() function did not exist in JavaScript.
Authored by: Michael Wanyoike
