Freek.dev

console.log isn't the only command that can help you debug JS. Yotam Kadis, Editor of AppsFlyer, shares 10 more ways.

For the past decade, one of my passions is front-end development (especially javascript). As a craftsman, I love learning new tools of the trade. In this story, I’m going to give you some awesome tips for debugging like a pro, using the good old console.

https://medium.com/appsflyer/10-tips-for-javascript-debugging-like-a-pro-with-console-7140027eb5f6

Read more

Today at the JSConf in Iceland, React core developer Dan Abramov demonstrated some very cool features that will soon land in React.

We’ve built a generic way to ensure that high-priority updates don’t get blocked by a low-priority update. We call this time slicing. If my device is fast enough, it feels almost like it’s synchronous; if my device is slow, the app still feels responsive. We’ve also built a generic way for components to suspend rendering while they load async data. We call this feature suspense. You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic.

https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

Read more

? Fun tip: Use tap() in lodash chains for a window into your transformations ? pic.twitter.com/aF11Tlzuz7

— Caleb Porzio (@calebporzio) February 20, 2018

Read more [twitter.com]

In a terrific talk given at JS.Conf Asia, Jake Archibald, developer advocate at Google, explains what's going on in the event loop of the browser.

Read more

Monica Dinculescu, an engineer at Google, shares on her blog how you can use Puppeteer, Mocha and Pixelmatch to create automated visual tests of a webpage.

I did a little song-and-dance that sets up Puppeteer* , takes screenshots of your app (like, all the routes you care about), and then compares them to the “golden” ones. If they match, your test passes! Yes, it only works on Chrome. No, it’s not actually unit testing. Yes, it’s literally just counting pixels but you know what? It counts them in both a wide and a narrow viewport size and any testing is better than no testing at all; fight me.

https://meowni.ca/posts/2017-puppeteer-tests/

Read more

Bram Van Damme wrote a new post with some good examples of cool stuff that will land in JavaScript soon.

At the latest TC39 meeting the new features that will make it into the “ECMAScript® 2018 Language Specification” (ES2018) have been selected. All proposals that have reached stage-4 since the consolidation of ES2017 got selected. This post gives one a quick look at the features that made it into ES2018.

https://www.bram.us/2018/01/30/whats-new-in-ecmascript2018/

Read more

In an article at Hackernoon, David Gilbertson warns about the dangers of trusting 3rd party packages on npm. He goes into how a package can make unwanted http requests in the browser and how you can protect yourself against that.

It’s been a frantic week of security scares — it seems like every day there’s a new vulnerability. It’s been a real struggle for me personally to pretend like I understand what’s going on when asked about it by family members.

Seeing people close to me get all flustered at the prospect of being “powned” has really put things in perspective for me.

So, it is with a heavy heart that I’ve decided to come clean and tell you all how I’ve been stealing usernames, passwords and credit card numbers from your sites for the past few years.

https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5

Read more

Basecamp recently open source Stimulus, their new JS framework. It aims to make sprinkling some JavaScript on your page here an there very easy.

Stimulus is a JavaScript framework with modest ambitions. It doesn't seek to take over your entire front-end—in fact, it's not concerned with rendering HTML at all. Instead, it's designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbolinks to provide a complete solution for fast, compelling applications with a minimal amount of effort.

https://github.com/stimulusjs/stimulus

DHH talks a bit on why and how they created it in this episode of the Ruby Rogues podcast.

Read more

In a post on vuejsdevelopers.com Anthony Gore explains how to get started with serverside rending with Laravel and Vue. Cool stuff!

Server-side rendering is great way to increase the perception of loading speed in your full-stack app. Users get a complete page with visible content when they load your site, as opposed to an empty page that doesn’t get populated until JavaScript runs.

One of the downsides of using Laravel as a backend for Vue.js was the inability to server render your code. Was. The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP, Python, Ruby etc.

In this tutorial, I’ll take you through the set up steps for Laravel and demonstrate a simple server-rendered app. Get the code for this here on Github.

https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/

Read more

Kaelan Cooter, software engineer at LogRocket, wrote a good post on the state of JavaScript and it's ecosystem in 2017. I'm very curious to see how WebAssembly will mature in the next year. There seems to be a lot of potential there.

A lot has happened in 2017, and it can be a bit overwhelming to think about. We all like to joke about how quickly things change in frontend engineering, and for the last few years that has probably been true.

At this risk of sounding cliché, I’m here to tell you that this time it’s different.

Frontend trends are starting to stabilize — popular libraries have largely gotten more popular instead of being disrupted by competitors — and web development is starting to look pretty awesome.

In this post, I’ll summarize some of the important things that happened this year in the frontend ecosystem with an eye toward big-picture trends.

https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f

Read more

Tip: With async/await, you can run multiple async operations in parallel. How? Put the await statements on the same line! Works like promise.all. https://t.co/0aoAAvILmE#javascript pic.twitter.com/RMrXKp8D7V

— Cory House ???? (@housecor) November 13, 2017

Read more [twitter.com]

Marius Schulz created a free Egghead course where he explains how JavaScript this keyword behaves in various contexts.

JavaScript’s this keyword is a source of confusion for many new and experienced developers alike. It can be frustrating if, for some reason, this doesn’t point to the context that was intended. This course will help you understand JavaScript’s this mechanism in depth.

https://egghead.io/courses/understand-javascript-s-this-keyword-in-depth

Read more

Marcel Pociot, author of the excellent BotMan package, published a post on how he used Custom Elements for VueJS to power a widget that users can embed on their sites.

I am currently in the middle of working on a new BotMan feature - a frontend widget that you can embed into your website to make it easier to connect your website visitors with your own self-hosted chatbot solution. The backend / PHP side is already working and leverages the BotMan web driver, which is basically just an API that you can use to interact with your chatbot.

http://marcelpociot.de/blog/2017-12-08-using-custom-vuejs-elements

Read more

The @ChromeDevTools now let you copy an object directly to the clipboard, and it’ll automatically be converted to JSON ???? https://t.co/yBv3QjbmRc pic.twitter.com/Tb6LHRf5qz

— Joseph Silber (@joseph_silber) November 30, 2017

Read more [twitter.com]

Dave Rupert, lead developer at Paravel, shows how you can leverage native form validation and still style your errors using only a couple of lines of JavaScript.

If you’ve ever experimented with HTML5 Form Validation, you’ve probably been disappointed. The out-of-box experience isn’t quite what you want. Adding the required attribute to inputs works wonderfully. However the styling portion with input:invalid sorta sucks because empty inputs are trigger the :invalid state, even before the user has interacted with the page. I finally sat down and spent a couple days trying to make HTML5 Form Validation work the way I want it.

https://daverupert.com/2017/11/happier-html5-forms/

Read more

Probably you know that that keeping the disk & transfer size of a JavaScript file low is pretty important. But have you considered the time needed to parse and compile the code? In this great post on Medium Addy Osmani, an engineer at Google, explains the complete cost of having JavaScript on your page.

As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this post, I’ll cover why a little discipline can help if you’d like your site to load & be interactive quickly on mobile devices. tl;dr: less code = less parse/compile + less transfer + less to decompress

https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

Read more

In a post on his Medium blog Cameron Nokes explains the two most important processes in any Electron app: the main process and the renderer process.

Central to Electron is the concept of two or more operating system level processes running concurrently — the “main” and “renderer” processes. Dealing with multiple processes is new territory if you’re coming from browser Javascript land. It was definitely a paradigm shift for me initially, and working with multiple processes may mean you make different design choices in your app that you wouldn’t otherwise.

https://medium.com/@ccnokes/deep-dive-into-electrons-main-and-renderer-processes-7a9599d5c9e2

Read more

On his blog Mathias Bynens explains the differences under the hood between async/await and vanilla promises.

The fundamental difference between await and vanilla promises is that await X() suspends execution of the current function, while promise.then(X) continues execution of the current function after adding the X call to the callback chain. In the context of stack traces, this difference is pretty significant. ... Enable JavaScript engines to handle stack traces in a more performant and memory-efficient manner by following these recommendations:

• Prefer async/await over desugared promises.
• Use babel-preset-env to avoid transpiling async/await unnecessarily. ...

https://mathiasbynens.be/notes/async-stack-traces

Read more

Like the name implies Nordic.js is a conference that focuses on JavaScript. The organisers recently released all videos of the 2017 edition. Even if you're not into JavaScript I can recommend this watch this video of Harriet Lawrence on how you can use language to make your community more welcoming.

Here's a YouTube playlist with all videos of Nordic.js 2017.

My colleague Sebastian attended the conference, be sure to check out his recap.

Read more

On the vuejsdevelopers.com blog Anthony Gore suggested a few cool Vuex plugins that could come in handy.

There are a lot of good reasons to use Vuex to manage the state of your Vue.js app. For one, it’s really easy to add super-cool features with a Vuex plugin. Developers in the Vuex community have created a tonne of free plugins for you to use, with many of the features you can imagine, and some you may not have imagined.

In this article, I will show you five feature that you can easily add to your next project with a Vuex plugin.

https://vuejsdevelopers.com/2017/09/11/vue-js-vuex-plugins/

Read more