Posts tagged with frontend
An interesting opinion written by my colleague Seb.
Over the years I’ve experimented with different strategies to build user interfaces. From sprinkling JavaScript over server side templates to full-blown SPAs. My conclusion up until now: we can do better.
Read more [sebastiandedeyne.com]
Nicolas Beauvais wrote a nice blogpost on how he went about adding support for internationalization to his app.
When working on web applications, translation strings are typically stored in the backend of your app while they’re mostly used in the frontend. This is the main challenge because you need to communicate the translations from your backend to your frontend code.
Read more [nicolas-beauvais.com]
Join thousands of developers
Every two weeks, I share practical tips, tutorials, and behind-the-scenes insights from maintaining 300+ open source packages.
No spam. Unsubscribe anytime. You can also follow me on X.
Ire Aderinokun, Front-End Developer and User Interface Designer, explains how you can Lighthouse in CI.
Until recently, I also hadn't setup an official performance budget and enforced it. This isn’t to say that I never did performance audits. I frequently use tools like PageSpeed Insights and take the feedback to make improvements. But what I had never done was set a list of metrics that I needed the site to meet, and enforce them using some automated tool.
Read more [bitsofco.de]
?? Something you probably didn't know HTML/CSS could do. SUPER useful! pic.twitter.com/qNTDTj1Hl1
— Caleb Porzio (@calebporzio) April 29, 2019
Read more [twitter.com]
Jonathan Reinink is creating a library that'll make it easy to create server-driven single-page apps. Super cool idea!
I wanted to blend the best parts of classic server-side apps (routing, controllers, and ORM database access) with the best parts of single-page apps (JavaScript rendering and no full page reloads). Or, at least the best parts as I see them. ?
That journey has led me to a pretty interesting new pattern, which this article explains in detail. In short, I've created a Turbolinks inspired library that makes it super easy to create server-driven single-page apps. I am calling this library Inertia.js.
Read more [reinink.ca]
Here's a presentation from the Netflix engineering team on how they made the interface for Netflix' interactive movie Bandersnatch.
Chris McCord, author of the Phoenix Framework, will soon release a new feature called LiveView: a way of making interactive apps without JavaScript. It's powered by WebSockets, morphdom
Phoenix LiveView is an exciting new library which enables rich, real-time user experiences with server-rendered HTML. LiveView powered applications are stateful on the server with bidrectional communication via WebSockets, offering a vastly simplified programming model compared to JavaScript alternatives. While modern JavaScript tooling enables sophisticated client applications, it often comes at an extreme cost in complexity and maintainability
Read more [dockyard.com]
Phoenix is a framework written in Elixir. It's creator, Chris McCord, showcased an impressive new feature called LiveView at ElixirConf.
Here is some more background info on LiveView: https://leveljournal.com/why-phoenix-liveview-is-a-big-dealLiveView is an extension of standard Phoenix views that will automatically propagate updates to the browser anytime state changes that would impact that view (using the existing Phoenix channels infrastructure). Instead of sending a state change event down the wire that you have to process in JavaScript manually, LiveView sends down an updated HTML fragment, diffs it against the current DOM state, and makes the necessary mutations for you.
Wired.com published a interesting piece on Even You and Vue. It also contains some quotes by Taylor Otwell, the creator of Laravel.
The big reason for Vue's success, developers who rely on it say, is its simplicity. More companies want to build web applications that, like Google Docs, feel as snappy as a native application. But few actually build applications as complex as Facebook’s or Google’s. What developers often really want is a framework for building small, interactive web apps. Angular can be overkill for simple applications, while React has a steep learning curve even for experienced developers. Vue applies a more "layered" approach to building a framework.
Read more [www.wired.com]
A couple of weeks ago GitHub removed the last usages of jQuery in their front end code. On their engineering blog that share why and how they removed it.
We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs.
Read more [githubengineering.com]
Before we moved in to our new offices in 2014, we quickly set up a temporary one-page website, initially only in Dutch. It lasted for 4 years and bursted out of its frames ever since, because… hmm … no priority, no time. A new site was like a running joke for a long time, until Laracon US 2018…
Nick Sherman created a cool site where you can play with variable fonts.
This site’s goal is to help designers and developers become more familiar with OpenType variable fonts in a way that isn’t overwhelming, while also providing straightforward info upfront about the font projects, who made them, and where to find more info or get the fonts to use.
Read more [v-fonts.com]
At the Zeit conference React core member Andrew Clark showed off an upcoming React feature named Suspense. It can automatically pause the render process of a component if it hasn't got all its data. In can be used to avoid things like spinner showing up too quickly.
Async rendering in React gives us a powerful new set of primitives for addressing longstanding problems in UI development. I'll discuss React's vision for how async rendering can improve data fetching, code delivery, prefetching, view transitions, and more.
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
Blade components are pretty cool for scoped-slot-like stuff when you're not in a JS environment pic.twitter.com/pjp4ycOPKm
— Sebastian De Deyne (@sebdedeyne) March 2, 2018
Read more [twitter.com]
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.
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
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
Adam Silver lists a bunch of problems you need to solve if you opt to build a single page application.
Ironically, SPAs are harder to design and harder to build. And yet, they typically produce slow, disagreeable experiences for users. ... Javascript is never going to beat the browser at what it does best—browsing. We can still give users rich and enhanced experiences without cramming an entire site into one document.We should let the browser manage the browsing experience, and spend our time solving real user problems.
https://adamsilver.io/articles/the-disadvantages-of-single-page-applications/