JSK is Proud to Announce the Launch of Ramp Receipts
The most important news for many of us this week was Node.js security fix announcement. I'm sure that most of you have rushed to update Node version on all your projects before a disaster.
There was a large amount of good Node.js articles so it was tough decision to not include some of them in the newsletter.
One of the most interesting articles was Netanel Besal's article in which he criticizes the JS community for starting flame wars between frameworks. Instead of fighting, everyone should use that energy to do something positive and constructive for their favorite framework.
Finally, we have a good news for all of you that are interested in WebGL technology. Babylon.js 3.0 was released last week!
General
Enough with the Frameworks War
Today, I would like to talk about something that personally hurts me very much. In the last couple of months, almost every week, a new article comes out that compares the popular client-side frameworks. Yes, you know what I’m talking about. I’m not even going to put one link here because they’re not worth it.
Authored by: Netanel Basal
Why you shouldn't spend one more second choosing a JavaScript framework
Programming has a lot to do with opinion, don't you think? Well, I don't. Most of the discussions online on the unquiet realm of JavaScript development fly about "Should I stay or should I go", well, let's break down this topic.
Authored by: JavaScript Kicks
Event Delegation: Pattern or Anti-Pattern?
A significant amount of work on JavaScript toolkits and frameworks has centered around trying to fix, normalize, and optimize browser implementations. Doing so requires making many assumptions about what the problems are, how our tools will be used by developers, and what we expect of the future.
Authored by: SitePen
Announcing Babylon.js 3.0
Babylon.js is an open source framework that allows you to create stunning 3D experiences in your browser. Built with simplicity and performance in mind, it is the engine that fuels the Remix3D site or the Xbox Design Lab. Today, I'm thrilled to announce the availability of Babylon.js's biggest version ever: Babylon.js v3.0.
Authored by: JavaScript Kicks
Implementing single page architecture with vanilla JavaScript
Single page architecture is an approach used for building web apps that have smooth inter-page-transitions. The transitions are so smooth and fast that they look like native apps. The basic principle of an SPA is that all of the code is in one document (one HTML file).
Authored by: Coding is Love
JavaScript
ES8 was Released and Here are its Main New Features
The new features of the EcmaScript specification 8th edition EcmaScript 8 or EcmaScript 2017 was officially released in the end of June by TC39. It seems that we are talking a lot about EcmaScript in the last year. It's not for nothing. Currently the standard is to publish a new ES specification version once a year.
Authored by: Dor Moshe
Pattern Matching in ECMAScript
There's a stage 0 proposal for pattern matching in JavaScript. In this article, we'll take a look at what the proposal entails and also show how you might find it useful. The proposal document has a few code examples, as usual.
Authored by: Nicolas Bevacqua
Javascript Passing by Value vs. Reference Explained in Plain English
Coming from Ruby when I first dove into Javascript the idea of passing by reference versus value threw me for a loop. When googling around I wasn't able to find any material that I felt explained it as simply as the concept really is.
Authored by: codeburst.io
Master Map & Filter, Javascript's Most Powerful Array Functions
This article is for those who have written a for loop before, but don't quite understand how Array.map or Array.filter work. You should also be able to write a basic function. By the end of this, you'll have a complete understanding of both functions, because you'll have seen how they're written.
Authored by: Arnav Aggarwal
Reverse Engineering One Line of JavaScript
Few months ago I received the following email from a friend of mine: Subject: Can you unroll and explain this 1 line of code to me? Body: Call me stupid but...I don't understand it and would love a detailed explanation. It's a ray tracer in 128 characters....
Authored by: Alex Kras
Angular.js
Angular Testing In Depth: Components
Learn how to test Components in Angular. We will start with writing isolated tests for a component and finish with integration tests for the rendered component.
Authored by: Soós Gábor
Angular: Best Practices
I published an article recently about things you should avoid doing when using Angular. Now it's the time to dive into stuff that you may rather consider doing in your Angular application.
Authored by: Родион Раскольников
Implement ngModelOptions with RxJS and Custom Form Control in Angular
If you've worked with AngularJS, you probably remember the ng-model-options directive. The two most useful options in this directive were the updateOn and the debounce options.
Authored by: Netanel Basal
Lazy loading: code splitting NgModules with Webpack
Let's talk about code splitting in Angular, lazy-loading and a sprinkle of Webpack. Code splitting allows us to essentially break our codebase down into smaller chunks and serve those chunks on demand, which we call "lazy loading".
Authored by: Todd Motto
React.js
Learn How To Build: Astronomy Picture Of The Day App with NASA API and React
Hey! I recently found out NASA has a public API. Cool! Let's build something today with the API! What are we going to build? Good question! We're going to build an app called astronomy picture of the day!
Authored by: Indrek Lasn
ReactJS - Component's basics
After have created our first app, now we need to understand what's happening inside our React application. I've made some changes to the application I created in the previous post, this is the new structure: I deleted some files that we are not going to need.
Authored by: codeburst.io
Extracting Logic from React Components
In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I'd recommend watching that video first, you don't need to have watched it to read this blog post.
Authored by: Jack Franklin
Combining React with Socket.io for real-time goodness
This post isn't heavy on React, so the core concepts should translate easily to other view frameworks like Vue and Angular. That said, for the rest of the post, I'll assume you are using React or React-Native. So you need to make your app respond to events from the server.
Authored by: Hendrik Swanepoel
How to Lazy Load features using React and Webpack
In the modern web, every kilobyte matters. We don’t want to load our app’s whole component library when user enters our site. We need to load components on demand, and after initial load, cache them in the memory for further use.
Authored by: Giorgi Bagdavadze
How to use React's Provider Pattern
The provider pattern in React is a powerful concept. You will not often see it when using plain React, but might consider using it when scaling your application in React. Basically it takes the clutter away of passing mandatory props, that are needed by every component, down your whole component tree.
Authored by: Robin Wieruch
Aurelia.js
Introducing Aurelia in Action
Aurelia in Action is a book targeted at teaching you what you need to build compelling, real-world applications in Aurelia from the ground up. The book centres around a fictional virtual bookshelf application (similar to Goodreads.com) called my-books.
Authored by: Aurelia
Get Root $index Value From Within Nested Aurelia Repeaters
Recently in an Aurelia project, I was working with nested repeaters (3 levels deep). The problem was I needed to get the $index from the top level repeater (so, level one).
Authored by: Dwayne Charrington
Getting My Hands Dirty with Aurelia's Binding Engine, Part Two
Last week, we looked at some hardcore Aurelia code written by Jeremy Danyow that helps create data-driven forms. This week, we'll check out how I used what I learned from Jeremy's code to answer a Stack Overflow question from my fellow Aurelia Core Team Member Matt Davis.
Authored by: Ashley Grant
Checking If a View Slot Is Defined In Aurelia
Aurelia supports the element provided via the HTML Web Components specification, which allows you to define placeholders in your HTML that can be replaced. A lot of examples around seem to wrap a slot with a DIV, perhaps a class.
Authored by: Dwayne Charrington
Vue.js
4 Important Changes In Vue.js 2.4.0
Vue.js 2.4.0 has been released this week with an abudance of new features, fixes and optimisations. In this article, I'll give you a breakdown of four new features that I think are the most interesting.
Authored by: Anthony Gore
Non-technical reasons why I like Vue
VueJS has been getting a fair amount of press recently. Most of it is from people who write frontend code for a living. I've instead spent most of my professional life working with backend & infrastructure code so I consider myself a new entrant to the JS world.
Authored by: codeburst.io
Guide to Vue.js for jQuery developers
Introduction to writing Vue.js components for developers with jQuery background. Today we're going to create a simple Vue.js component based on a jQuery dropdown button, in order to learn the most important differences between these technologies. As I wrote last week, Vue.js can be used not only to create large applications, but also for simple components.
Authored by: Michał Męciński
Creating a Data Table in Vue.js
Blogs, E-commerce sites, admins, and search results, almost everywhere you go online you are presented with large amounts of data and results, this transfer of information is a big part of what web applications are about.
Authored by: Gabriel Manricks
Building Native iOS and Android Apps With Vue and NativeScript
Vue is a popular JavaScript framework for handling the view layer of your application. NativeScript is technology that lets developers use JavaScript to drive completely native iOS and Android applications. Together the two technologies offer the hope of building native applications with the simplicity you expect from Vue, and the power you expect from NativeScript.
Authored by: TJ VanToll
Node.js
Security updates for all active release lines, July 2017
Updates are now available for all active Node.js release lines as well as the 7.x line. These include the fix for the high severity vulnerability identified in the initial announcement, one additional lower priority Node.js vulnerability in the 4.x release line, as well as some lower priority fixes for Node.js dependencies across the current release lines.
Authored by: node js
Node.js Security Release Summary
Recently, it was discovered that past versions of Node.js has several vulnerabilities that could leave your web application open to attack.
Authored by: bitandbang
Building a REST API using Mongo DB
In one of my previous posts, I wrote about how to build a simple CRUD application. CRUD stands for Create, Read, Update and Destroy. However, by building a REST API with a backend database like Mongo, it allows you to complete CRUD operations, without having to build a frontend environment.
Authored by: Ethan Jarrell
Using PostgreSQL with Azure And Node.js
Here is a video that covers all of the content in this post in case you're all like "I'm not reading all of this". Azure has released support for PostgresSQL and it's pretty rad. If you're all like, "what is Postgres and how do you say that word and why would I use it??", I'll let Rob Conery explain that for me.
Authored by: Burke H✪lland
Social Login for Your SPA: Authenticate Your Users via Google and Facebook
Increasingly, we are seeing web applications that are developed using a single page architecture, where the entire application is loaded into the browser as JavaScript and then all interactions with the server are carried out using HTTP based APIs that return JSON documents.
Authored by: Graham Cox
Building Electron Apps with Next.js
Next.js makes using React for building electron apps easy it has never been before.
Authored by: Leo Lamprecht
Libraries and Tools
Introducing npx: an npm package runner
Those of you upgrading npm to its latest version, , might notice that it installs a new binary alongside the usual npm: . npx is a tool intended to help round out the experience of using packages from the npm registry - the same way npm makes it super easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI tools and other executables hosted on the registry.
Authored by: ◯ちゃんかな〜 🤔
I Created Cell.js to Tackle the Root of All Evil: Dependency
What if we go all the way back to where it all started and think about it. What if we didn't have dependencies to begin with? This is why I built Cell.js, a self.driving app framework.
Authored by: ethan
Testing
Mocking vs Refactoring
Sometimes code refactoring removes need for advanced mocking in tests. Recently I have published a repo with lots of examples of mocking Node system APIs in tests: node-mock-examples. One of the examples shows mocking system timers to "speed up" long test. This is coming from our production test that had a module emitting an event every minute.
Authored by: Gleb Bahmutov
Composable End-to-End tests for React Apps
On top of the Chrome export, Navalia also exports a "browser-balancer". This module can balance work across multiple browser instances, and even browser tabs internally, making for a much much faster test run. The API is just as straightforward as Chrome, and all of your test code largely remains the same.
Authored by: Joel Griffith
How to Write A Unit Test for Vue.js
Vue.js is a JavaScript framework which is useful for building the front-end of web applications, particularly when creating complex features. For every project, it's necessary to go through everything in our applications and check that it all works as expected.
Authored by: Scotch Development
Other
Musings on HTTP/2 and Bundling
HTTP/2 has been one of my areas of interest. In fact, I've written a few articles about it just in the last year. In one of those articles I made this unchecked assertion: If the user is on HTTP/2: You'll serve more and smaller assets.
Authored by: Jeremy Wagner
Javascript Decorator Pattern
When developing a large application, our main goal is not to repeat ourself and reuse our code. For code reuse we can do many things but one of them is inheritance.
Authored by: Mufti Faizan Haider
The MVC Design Pattern in Vanilla JavaScript
Design patterns often get incorporated into popular frameworks. The Model-View-Controller (MVC) design pattern, for example, is one that is ubiquitous. In JavaScript, it is hard to decouple the framework from the design pattern. Oftentimes, a particular framework will come with its own interpretation of this design pattern.
Authored by: SitePoint