Freek.dev

On the .dev blog Jacob Bennett shared some nice refactorings using arrow functions.

Recently when refactoring a Vue 1.0 application, I utilized ES6 arrow functions to clean up the code and make things a bit more consistent before updating to Vue 2.0. Along the way I made a few mistakes and wanted to share the lessons I learned as well as offer a few conventions that I will be using in my Vue applications moving forward.

https://dotdev.co/clean-up-your-vue-modules-with-es6-arrow-functions-2ef65e348d41

Read more

Emil Ong shares some cool ways you can leverage ES6.

Here are a few ES6 techniques that aren’t really tricks, just exploiting some of the new syntax either to reduce code, improve readability, or possibly just have fun. I’m planning on collecting more here, so please feel free to bookmark and check back every once in a while.

https://engineering.haus.com/dumb-es6-tricks-53ecadd1b29f

Read more

Daniel Reis shows some alternatives for the best known form of debugging JavaScript console.log.

I don’t consider myself a nitpicker. That’s only true, and it’s all fine and dandy… until I find a console.log() that someone forgot to remove from the JavaScript code. And if we’re talking about debugger statements… all hell breaks loose! ... I collected some of the most common examples I can present as proper alternatives for that process.

https://medium.com/outsystems-experts/beyond-console-debugging-tricks-f7d0d7f5df4

Read more

What does “pure function” mean in the context of JavaScript? In programming in general, purity is also known as “referential transparency”, a fancy way of saying “replacing an expression or function call with its result will never change the behavior of the program” or a way of saying “every time you pass the same inputs, you always get the same outputs”.

That sounds intuitive, and a function like x => x * 10 looks pure because every single time you pass it the number 3 as argument you will get 30 as output. So how can we tell that one function is pure and the other isn’t? Is it enough that we just read the code?

Spoiler: reading the code isn't enough.

http://staltz.com/is-your-javascript-function-actually-pure.html

Read more

Did you know you can, in JavaScript loop over certain emoji's? You can also combine some emoji's. Cool stuff!

https://www.bram.us/2016/08/27/fun-with-javascript-and-emoji/

Read more

In this talk Sam Bellen demonstrates how to use JavaScript's web-audio-api to transform audio in realtime. Presentations with guitars are cool. Love the Metz t-shirt.

Read more

A few weeks ago the Frontend United Conference was held in Ghent, Belgium. The entire development team at Spatie attended the conference. Though it certainly was fun to go to a conference with the entire team we were left a bit underwhelmed. Some of the talks were very short and some speakers seemed a bit unprepared.

The organisers have begun posting video's of all sessions to YouTube. In my opinion the following three talks rose above the rest.

1: Harry Roberts gave a talk were he demonstrated that programming best practices apply to writing CSS as well.

2: Christian Heillman talked about web obesity and gave a few tips on how to optimize the size of images.

3: Mathias Bynens showed how unicode support in JavaScript is broken and what common pitfalls are when working with special characters. Rather than just complaining about it, he offered some kick ass self-made solutions.

(the video for this session hasn't been posted yet, this is a video of the same talk at another conference)

Read more

Mohammed Said did some research on how run acceptance test for a javascript driven interface.

If you’re testing non-javascript driven interfaces then you may use Laravel’s built-in PHP Browser based testing library, it’s very powerful and the API is very readable as well. However if you need to test javascript driven interfaces then selenium is what you should be using.

Read more

Over at the Tighten blog Samantha Geitz posted an amazing introduction to React. She starts off by clearly explaining how to setup the environment (webpack and a few dependencies). After making sure that it all works, she continues by building a GIF search engine. Along the way the core concepts of React are explained. If you're in any way interesting in learning React, I warmly recommend reading the entire piece.

React itself is reasonably well-documented and easy to pick up, once you can shift your thinking to align with its conventions. The problem is, if you want to build robust apps, the V in MVC probably isn't going to cut it, and you have to dive into the often-confusing ecosystem surrounding React.

In this series, we're going to walk through the stages of building a React application — an app that lets you search the Giphy API and displays results, similar to what Giphy has on its own website.

In this first article, we are going to build the application using only React (with Webpack for asset compilation).

http://blog.tighten.co/react-101-building-a-gif-search-engine

I'm looking forward to read the next articles of this series.

Read more

Jason Orendorff wrote an interesting post on ES6 Symbols:

Since JavaScript was first standardized in 1997, there have been six types. Until ES6, every value in a JS program fell into one of these categories.

• Undefined
• Null
• Boolean
• Number
• String
• Object

...

ES6 symbols are values, but they’re not strings. They’re not objects. They’re something new: a seventh type of value.

Read more

Derick Bailey on his blog:

JavaScript practically requires callback functions to do anything asynchronous. Unless you’re talking about generators, you really can’t get away from them. Callbacks are everywhere.

...

I do use different names for the callback parameter, depending on the circumstance. I believe naming is important as it provides a set of expectations. If your code breaks the expectations of the name, people will be confused and it will cause problems.

Read more

I know what you’re thinking. WAT?! Didn’t Gulp just kill Grunt? Why can’t we just be content for a few minutes here in JavaScript land? I hear ya, but… I’ve found Gulp and Grunt to be unnecessary abstractions. npm scripts are plenty powerful and often easier to live with.

Read more

Wes Bos released a series of videos on React.js.

Together, we will build “Catch of the Day” — a real-time app for a trendy seafood market where price and quantity available are variable and can change at a moments notice. We will build a menu, an order form, and an inventory management area where authorized users can immediately update product details.

Read more

Maxime Fabre wrote a comprehensive tutorial on Webpack on the madewithlove-blog.

... Is Webpack a build system or a module bundler? Well, it's both– and by this I don't mean that it does both I mean that it combines both. Webpack doesn't build your assets, and then separately bundle your modules, it considers your assets to be modules themselves.

Read more

When working on JavaScript code you'll probably find yourself riddling the code with console.log-statements when something is not working the way that you're expecting.

But did you know that there is a debugger statement available? It has invokes any available debugging functionality. To put it otherwise: you can programmatically set a breakpoint for your debugger. It should work in any browser.

function potentiallyBuggyCode() {
    debugger; //the debugger wil stop here
}

Here's the documentation on the debugger-statement on MDN.

Read more

Flux is both one of the most popular and one of the least understood topics in current web development. This guide is an attempt to explain it in a way everyone can understand.

Read more

In plain old JavaScript you can get the data attributes of

[code language="html"]

like this

[code language="javascript"] document.getElementById('test').getAttribute('data-news-item-id');

But did you know there's a alternative way of doing this by reading an element's dataset property?

[code language="javascript"]
document.getElementById('test').dataset.newsItemId;

Notice that the values can be accessed by camelcasing the name of the data attribute. You can also write to datasets to change values of data attributes. Read the informative helpful article on MDN to know more.

Read more