PabloRosales JavaScript Developer

June 15, 2018

JavaScript Newsletter


News

Downshift 2.0 Released

Downshift is the primitive you need to build simple, flexible, WAI-ARIA compliant React autocomplete/typeahead/dropdown/select/combobox/etc. Quoting: "Even better accessibility, React Native and ReasonReact support, even simpler API, improved docs, new examples site, Flow and TypeScript support, and a new online community". kentcdodds

We’re Open Sourcing Scissors

Scissors is a React image cropping component that comes with support for setting a focus point. Checkout the GitHub repo. Medium

Parcel v1.9.0 

Three Shaking, 2x faster watcher and more! Medium

Decades-old PGP bug allowed hackers to spoof just about anyone’s signature

SigSpoof flaw fixed inGnuPG, Enigmail, GPGTools, and python-gnupg. arstechnica

Vue will be using TypeScript internally

Yay! Since it is internal (to help TypeScript developers) it does not have any negative effect if you don't use TypeScript. vuejs

Microsoft helping OpenStreetMap community

Quoting: "Bing Maps Streetside Imagery Now Integrated into OpenStreetMap iD Editor... [Microsoft has been working with the community] this includes being the first company to provide aerial imagery to the community for editing and, more recently, our release of almost ten million building footprints. BingBlogs

Meet the GitLab Web IDE

Quoting: "Here's how we went from a proof of concept to a new feature that makes it even easier for everyone to edit inside of GitLab." GitLab

Tools

Create and build JavaScript apps with zero config

Neutrino combines the power of webpack with the simplicity of presets. There are presets for React, Preact, Vue, Web App, Node.js, Web Library and React Components, also for testing with Jest, Karma and Mocha. Neutrino

Git branch auto-magic

Tools like git-splice, git-transplant, git-deps, and announcing git-explode! Check it out, includes video to the presentation. StructuredProcrastination

GitHub App that formats files in pull requests

Currently supports 12 languages and 9 more to come. Very useful with some nice GitHub features. restyled

Tutorials, Guides

JavaScript Fundamentals: A free course with challenges + video

Quoting: "This free course outline of the CSX Precourse will cover the JavaScript basics such as variables/constants, strings, data types, arrays, and loops". Medium

Async programming basics every JS developer should know

Quoting: "This article is aimed at people starting out with asynchronous coding in javascript so we would keep things simple by avoiding big words, arrow functions, template literals etc". DEV

Translating SQL Queries using map, reduce, and filter in JavaScript

A 9 minutes VIDEO explaining use of map, reduce and filter to translate SQL queries. YouTube

Delegating HTML links to vue-router

Application-wide handling and encapsulation in a component. dennisreimann

Desktop apps using Electron, Preact and Material Design

A tutorial to build an Electron app, includes code. Medium

Testing your JavaScript in a browser

... with Jest, Puppeteer, Express, and Webpack with full source code. ITNext

Drag and Drop It Like It’s Hot

Some Touch Events, Drag And Drop, CSS Animations and Vanilla JavaScript. Outsourcing Engineering

How To Connect React And Redux With Example

From installing React and Redux to displaying a post, includes GitHub code. AppDivided

RxJS: How to Observe an Object

Talks about how rxjs-observe works.
import { observe } from "rxjs-observe"; const instance = { name: "Alice" }; const { observables, proxy } = observe(instance); observables.name.subscribe(value => console.log(name)); proxy.name = "Bob"; AngularInDepth

Angular NgRx Entity - Complete Practical Guide

Quoting: "In this post, we are going to learn how NgRx Entity really helps us to handle the business data in our store". AngularUniversity

Lets Build Express from Scratch

This series of chapters will teach you how to create the express library from scratch, so far 3 chapters. lets-build-express

MobX awesome collection

A nice looking collection if you use Mobx state management library. awesome-mobx

Implement your own — call(), apply() and bind() methods

Reinventing the wheel to understand it! Medium

Articles

5 Ways to Handle Forms on Your Static Site

Including Google Forms, FormKeep, Netlify Forms, Formspree and FormPlug. And some comments to help you choose. Forestry

Your brain on Front-End Development

Quoting: "We're going to mostly be talking about design pattern choices and HTML/CSS tech choices". CSS-Tricks

Dynamic Programming vs Divide-and-Conquer

Quoting: "In this article I’m trying to explain the difference/similarities between dynamic programing and divide and conquer approaches based on two examples: binary search and minimum edit distance". ITNext

History of Web Programming (till 2014)

Appendix B from the 2014 book, Dart for Absolute Beginners, does not include recent history. ObservationalHazard

Protecting Node.js Applications from Zip Slip

Quoting: "Zip Slip is a recently coined phrase for a variant of the classical Path Traversal attack. In order to exploit this attack, one creates a compressed archive containing files which include .. in their directory name". intrinsic

a !== a

Not what you would expect. A short story about the weird parts of NaN. Medium

Linting JavaScript the correct way

Using ESLint, VSCode + configs. nodejs-tips

11 Javascript Animation Libraries For 2018

Including Pure CSS, Three.js, Anime.js, Mo.js, Velocity, Popmotion, Vivus, GreenSocks, Scroll Reveal, Hover, Kute.js, Typed.js, Lottie and some other honorable mentions. Bits and Pieces

How we spotted--and fixed--11 errors in our docs with our new markdown proofer

Talking about md-proofer for static site checking in CircleCI. Basically you have Markdown files that include Yaml source code and sometimes they are bugged, so how do you solve that? CircleCI Blog

Discussion

I feel like Typescript is hindering me more than helping me...

Best comment by ConfuciousBateman: "Would you rather have "silly" errors during development, or insanity-inducing errors in production?". Probably one of the main reasons why I use and love TypeScript. r/javascript

What are your tips for familiarizing yourself with a new code base...?

Some nice recommendations in here. r/learnprogramming

What to do when I realize I don't want to program anymore?

Has happened to me before, usually it is not programming, but the project I'm on or being burnout. r/learnprogramming

Libraries

Yett, control the execution of (third party) scripts

Useful for things like Analytics, or anything that requires blocking until wanted.
window.YETT_BLACKLIST = [ /my-blacklisted-domain/, ] yett

React Popup Component

Modals, Tooltips and Menus all in one.
import React from "react"; import Popup from "reactjs-popup"; export default () => ( <Popup trigger={<button> Trigger</button>} position="right center"> <div>Popup content here !!</div> </Popup> ); reactjs-popup

Verify that a request is from Google Crawlers

Uses Google's DNS verification steps.
const isGoogle = require('is-google') let ip = '66.249.66.1'; isGoogle(ip).then((outcome) => { if (outcome) { // it's google. } }).catch(console.error) is-google

reCAPTCHA v2 for React

Quoting: "A clean, modern and simple React wrapper for Google reCAPTCHA". reaptcha

Protect your user's passwords

You just include a JS file in your page. Quoting: "It uses k-Anonymity to safely communicate your sensitive data over the internet without risk". passproject-js

Twitter

Cool Stuff

Research, Papers

How NPM is Jeopardizing Open Source Projects

Abstract: "NPM allows developers to easily publish, update, and download JavaScript code and Node.js modules, however, NPM’s lack of security can pose a threat to the integrity of many open source projects which utilize NPM packages". PDF

Task interruption in soft ware development projects

What Makes some Interruptions MoreDisruptive than Others? scribd

A Case Study on Design Patterns and Software Defects

Examines the relationship between Design Patterns and software defects from open source Software. scribd

Made with by PR