Hello and welcome to This Week in JavaScript, our lovingly curated collection of links relating to what’s new and exciting in the world of JS. The complete list is tagged jsweekly. (Don’t forget to check out our weekly .NET and front end roundups too!)
And now for this week’s JavaScript finds …
Getting Started
- PlayCode.io - Mobile JavaScript playground
- JavaScript Is everywhere [Infographic] - Join us as we delve into the importance of JavaScript, which vulnerabilities are most common when we’re talking about client-side and learn how to tackle them through our top security recommendations.
- Master the JavaScript interview: what is functional programming? - Functional programming is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects.
- Node.js interview questions and answers (2017 Edition) - I think that a real-life problem can show a lot more of a candidate’s knowledge - so we encourage you to do pair programming with the developers you are going to hire.
Learning More
- 30 truly interactive websites built with CSS & JavaScript - Here are some examples of websites where user-centered navigation, sound and animation come together to create truly interactive experiences to inspire you to try something new in your next project.
- 3 JavaScript libraries to keep an eye on in 2017 - A list of 3 promising generic libraries/frameworks for front-end development.
- Building a vanilla-JS image zoomer - One of my favorite ways of improving my knowledge of “vanilla” JavaScript and the browser’s DOM API is to create complex UI components without utilizing any libraries or frameworks.
- Building a custom tag input with Skate.js - Are you lost trying to build and use Web Components? Skate.js uses the platform and sheds some light on it.
- Pocessing JSON data from Web API calls - This post is about how I had been processing JSON data from Web API calls, why the approach I chose was “poor taste” code, and what I did to fix it.
- Lazy-loading jQuery with webpack only when you need it - Have you almost gotten rid of jQuery from your app, but still need it for a few critical things? Are those things used in only some parts of your app?
- FuseBox - bundle your project within a fraction of a second - The main goal of FuseBox is to avoid configuration as much as possible. Everything should work out of the box.
Libraries
- ityped - Dead simple Javascript animated typing, with no dependencies.
- Animationframes - Minimalistic way to create JS animations.
- Structure - Structure provides a simple interface which allows you to add attributes to your ES6 classes based on a schema, with validations and type coercion.
- scalable-blob-store - A simple local file system blob store that is designed to prevent conflicts when used with a distributed or replicated file system.
- Real-DOM - A ~1K non-virtual DOM non-framework framework for simple apps.
React / Redux
- Redux fundamentals: what is a reducer? - Reducers are not unique to Redux, and reveal a useful pattern that can be applied in a lot of non-Redux JavaScript, and even in many other languages.
- Form recipe: conditionally disabling the submit button in React - I know the email and password fields can’t be empty… Wouldn’t it be cool if I could disable the Submit button until the user fills both in?
- Thinking statefully - Getting used to React involves changing how you solve certain kinds of problems. It reminds me a little bit of learning to drive on the other side of the road.
- React in patterns: children in JSX - React is highly composable and the props.children API gives us the power to create a placeholder that is later filled with content from the outside.
- Use ESLint like a pro with ES6 and React - Extend the setup of your application with linting.
- Introducing React reform - A toolkit to assist you in defining your very own form behaviours with a minimal interface to describe your form contents and behaviour?
- Build a React.js application with user login and authentication - How to build a React application from scratch, using the Stormpath React SDK to add features that allow people to sign up, log in, and even view their own user profile.
Angular
- Essential Angular: change detection - Angular separates updating the application model and reflecting the state of the model in the view into two distinct phases. The developer is responsible for updating the application model - event bindings and property bindings.
- Angular advanced video tutorial (video) - Covering some of the really cool things you can do with Angular.
- Optimizing page speeds with lazyloading - We’re going to explore the topic of lazy-loading Angular 2 modules, and learn how we can set up our application to be as highly performant as possible.
- Angular 1.6 is here: what you need to know - 1.6 is more of a clean up release, that, in order to fix bugs and remove deprecations, introduces a handful of breaking changes.
- How to build an Angular 2 service (video) - How to build a service which will interact with the server.
- How to set up continuous integration for Angular 2 apps with Firebase and Travis CI - We’ll begin by creating an application from scratch using Angular CLI. We’ll then use Firebase as our hosting service and Travis CI as our continuous integration platform.
For more links like this and to keep up-to-date with the latest goings on in JS land, you can follow SitePoint’s JavaScript channel on Twitter.
Please PM us if you have anything of interest for the next issue or if there is anything you would like to see featured. Paul and chrisofarabia.
