Heres how React's new context API works
Wes Bos, one of the best online teachers around, published a new video where he explains what the React's new context API entails and how you can use it.
Posts tagged with javascript
Server side rendering JavaScript from PHP
My colleague Seb did some amazing work with the creation of two packages that make it easy to get started with server side rendering in PHP. In a new post on his blog he'll tell you all about it.
Server side rendering is a hot topic when it comes to client side applications. Unfortunately, it's not an easy thing to do, especially if you're not building things in a Node.js environment.
I published two libraries to enable server side rendering JavaScript from PHP: spatie/server-side-rendering and spatie/laravel-server-side-rendering for Laravel apps.
Let's review some server side rendering concepts, benefits and tradeoffs, and build a server renderer in PHP from first principles.
https://sebastiandedeyne.com/posts/2018/server-side-rendering-javascript-from-php
Join 9,500+ smart developers
Get my monthly newsletter with what I learn from running Spatie, building Oh Dear, and maintaining 300+ open source packages. Practical takes on Laravel, PHP, and AI that you can actually use.
No spam. Unsubscribe anytime. You can also follow me on X.
"Freek publishes a super resourceful and practical newsletter. A must for anyone in the Laravel space"
10 Tips for Javascript Debugging Like a PRO with Console
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
Beyond React 16
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
Use tap() in lodash chains for a window into your transformations
? 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]
Inside the browser's event loop
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.
Automatic visual diffing with Puppeteer
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/
What’s new in ECMAScript2018?
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/
I’m harvesting credit card numbers and passwords from your site. Here’s how.
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
Introducing Stimulus: Basecamp's new JavaScript framework
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.
Server-Side Rendering With Laravel & Vue
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/
Frontend in 2017: The important parts
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
Run multiple processes concurrently with async/await
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]
Understand JavaScript's this Keyword in Depth
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
Create custom, distributable web components with VueJS
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
Copying objects in Chrome DevTools
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]
Native HTML5 form validation in 6 lines of code
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/
The Cost Of JavaScript
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
Deep dive into Electron’s main and renderer processes
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
Asynchronous stack traces: why await beats .then()
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. ...
