Front End Icon

Front End

Front End is the programming and layout that people see and interact with.
26 Stories
All Topics

Rich Harris svelte.dev

Svelte 3: rethinking reactivity

After several months of being just days away, we are over the moon to announce the stable release of Svelte 3. This is a huge release representing hundreds of hours of work by many people in the Svelte community, including invaluable feedback from beta testers who have helped shape the design every step of the way. Lots of folks (myself included) have been eagerly awaiting this release after Rich teed it up on The Changelog #332. We’d love to hear your first impressions!

read more

JavaScript whatisjasongoldstein.com

Help! None of my projects want to be SPAs

There’s a lot of wisdom in this post alongside some opinions that I find myself nodding along with: My strategy for dealing with the absurd pace of change in web development has been as follows: ignore 99% of it and see if it goes away. While we cover (and talk about) new technologies on a daily basis here at Changelog, that doesn’t mean we adopt everything that hits our radar. Given the hype cycle, it works pretty well. Mongo isn’t exciting anymore, Angular 1 is dead, CoffeeScript is obsolete, I haven’t heard a word about Meteor since it launched… These are all specific technologies. But what about the Single Page App pattern in general? Back in the early days of SPAs, some people argued that it would be faster to only pass the data you need as JSON than to render whole pages. Nearly a decade later, this is almost never true. He goes on to explain how he’s building a side project SPA-style and all the repercussions of that decision. Really insightful stuff here, please do click through and read for yourself.

read more

Rachel Andrew rachelandrew.co.uk

HTML, CSS and our vanishing industry entry points

As chronicled in the latest JS Party we continue to track the conversations and insights being shared about the great divide on the front-end. Even DHH shared his thoughts. This post from HTML & CSS expert and advocate Rachel Andrew shares her perspective drawn from the 20 years she’s been working on the front and backend of the web. When we talk about HTML and CSS these discussions impact the entry point into this profession. Whether front or backend, many of us without a computer science background are here because of the ease of starting to write HTML and CSS. The magic of seeing our code do stuff on a real live webpage! We have already lost many of the entry points that we had. We don’t have the forums of parents teaching each other HTML and CSS, in order to make a family album. Those people now use Facebook, or perhaps run a blog on wordpress.com…

read more

David Heinemeier Hansson Signal v. Noise

Designing for the web ought to mean making HTML and CSS

DHH shared his thoughts on The Great Divide. After all, the web IS just…HTML, CSS, and JavaScript… …as The Great Divide points out, regression is lurking, because the industry is making it too hard to work directly with the web. The towering demands inherent in certain ways of working with JavaScript are rightfully scaring some designers off from implementing their ideas at all. That’s a travesty. At Basecamp, web designers all do HTML, CSS, and frequently the first-pass implementations of the necessary JavaScript and Rails code as well! It means they get to iterate on their design ideas with full independence. In the real app!

read more

The Changelog The Changelog #332

A UI framework without the framework

Jerod and Adam talked with Rich Harris –a JavaScript Journalist on The New York Times Investigations team– about his magical disappearing UI framework called Svelte. We compare and contrast Svelte to React, how the framework is embedded in a component, build time vs. run time, scoping CSS to components, and CSS in JavaScript. Rich also shares where Svelte v3 is heading and the details on Sapper, a framework for building extremely high-performance progressive web apps, powered by Svelte.

read more

Chris Coyier css-tricks.com

The Great Divide

Next week’s episode of JS Party digs into this subject, so make sure you subscribe or check it out! Two front-end developers are sitting at a bar. They have nothing to talk about. The divide between front-enders can be summarized by those whose “interests, responsibilities, and skill sets are heavily revolved around JavaScript,” and those whose “interests, responsibilities, and skill sets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, etc.”

read more

Eric Bailey CSS-Tricks

Reader mode: the button to beat

Eric Bailey writing for CSS-Tricks: Good design isn’t about forcing someone to walk a tightrope across your carefully manicured lawn. Nor is it a puzzle box casually tossed to the user, hoping they’ll unlock it to reveal a hidden treasure. Good design is about doing the hard work to accommodate the different ways people access a solution to an identified problem. For reading articles, the core problem is turning my ignorance about an issue into understanding (the funding model for this is a whole other complicated concern). The more obstructions you throw in my way to achieve this goal, the more I am inclined to leave and get my understanding elsewhere—all I’ll remember is how poor a time I had while trying to access your content. What is the value of an ad impression if it ultimately leads to that user never returning? Fantastic article full of amazing resources. As web developers, we want people to experience our site the way it was intended. But that means we have to put in the work to make that experience easy, accessible, and clutter-free.

read more

Robin Rendle CSS-Tricks

Front-end development is not a problem to be solved

Robin Rendle writing on CSS-Tricks: We should see front-end development as a unique skillset that is critical to the success of any project. I believe that’s why frameworks and tools like Bootstrap are so popular; not necessarily because they’re a collection of helpful components, but a global solution that corrects an inherent issue. … Bootstrap isn’t a skill though — front-end development is. It’s supremely ironic that front-end development is incredibly undervalued by many, yet those same people use frameworks because moving a box around in CSS is “hard.”

read more

Dennis Reimann dennisreimann.de

UIengine 1.0 – a workbench for UI-driven development

Dennis Reimann: The UIengine is a tool to build pattern libraries and documentation for design systems. It helps designer and developers to work closely together and offers features to boost their productivity. Alternatives already exist in the ecosystem (Fractal, Storybook, etc). Why reinvent the wheel? Most of the existing tools focussed on the component development, but lacked ways to also provide good documentation. Some were limited to using a specific templating language or framework, which was suboptimal for me: As a freelancer I am working on many projects and each one has its own set of constraints and requirements. I wanted to build a tool with an open source license, which I could use and extend with every project I work on.

read more

Josh Comeau joshwcomeau.com

Dynamic Bézier curves

If you’ve been looking for a fun, interactive, deep-dive into Bézier curves, this blog post from Josh Comeau is for you. Also, this is Josh’s first post to his new blog, which is also open source on GitHub — so the following is a nice intro for what to expect. The whole reason I started this blog was that I wanted a way to build dynamic, interactive articles that are more effective at sharing and teaching concepts. Unlike with plain text on Medium, this blog is a fully-powered React app, and so I can create and embed interactive elements that help the reader build an intuitive understanding of the subject being presented. These dynamic “flattenable” Bézier curves are a perfect subject for this format, as they have underlying complexity that would be difficult to explain with words alone. And here’s what to expect from this post on Bézier curves. In this maiden blog post, we’ll go through the basics of working with Bézier curves and SVG in React.js. We’ll learn how to build dynamic curves that respond to user input.

read more

project Icon github.com

"The mother of all demo apps"

I think we’ve linked to this before, but it’s worth sharing again as people have continued to add implementations. The conceit: While most “todo” demos provide an excellent cursory glance at a framework’s capabilities, they typically don’t convey the knowledge & perspective required to actually build real applications with it. RealWorld solves this by allowing you to choose any frontend (React, Angular 2, & more) and any backend (Node, Django, & more) and see how they power a real world, beautifully designed fullstack app called “Conduit”. It’s so cool that you can plug and play different front ends (13 so far) and back ends (32!) and the app will continue to work because they all conform to the same API.

read more

Bootstrap tabler.github.io

Tabler – a full-featured dashboard UI theme built on Bootstrap 4

Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. I clicked through their entire demo on my phone over the weekend and was quite impressed. I even got a little jelly over a few components we could benefit from in our admin…

read more

PureScript blog.functorial.com

You might not need the Virtual DOM

Phil Freeman (creator of PureScript) talks about why he created purescript-sdom, which is a UI library that eschews the Virtual DOM approach popularized by React. Why? Denotationally speaking, the virtual DOM is very appealing, but operationally, it is a heavyweight solution for many problems. Every time we modify our application state and rerun our render function, we allocate a new tree of (virtual) DOM components, and perform a tree diff in order to discover what must change in the actual DOM. For many (most?) applications, this seems to be overkill. Just like the Virtual DOM itself, Phil’s approach is no silver bullet. Click through to read the details of his implementation (and get a taste of PureScript if you haven’t yet).

read more

Zach Leatherman github.com

imaging-heap

Responsive images are essential to any image-heavy website with an eye on performance. Due to the large variety of viewport sizes and device pixel ratios, they are also very time-intensive to test. Luckily, the heroes over at Filament Group have built a tool to help make the testing process easier. A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios. I assume the project name is a nod to weirdo musician and tech experimenter Imogen Heap.

read more

Ken Nilsen github.com

Show MDN browser compatibility data on the command line

mdncomp shows MDN browser compatibility data and documentation in an instance right on the command line to see if a feature is supported or not in target browsers. It can list an excerpt from MDN documentation, provide a link, and optionally go directly to that page, if needed. Bonus — try mdncomp --random --doc . to explore APIs and features you’ve never heard about.

read more

Alex Sexton alexsexton.com

The 15 commandments of front-end performance

Alex Sexton, on his personal blog: This list is the product of many years of experience in the front-end web development field. I maintain this list as a reminder to myself to always follow best practices, and to not compromise on performance, even if I’m in a time crunch. I read it before I start any project, and share it with my team at work (sometimes we joke and call them “codemandments”) so we can all be on the same page and do our part to keep the web fast. He goes on to say “feel free to fork this for your own use,” so use this liberally. Some of my favorites: I will use SVGs instead of JPGs, wherever possible. I will resist the urge to use window.alert to inform visitors that there’s a Facebook group for cool friends and if they wanna join it, that’s fine, it only takes a few clicks. 😂

read more

JavaScript github.com

Front End Interview Handbook

Remember the Front-end Job Interview Questions project that we talked to Darcy Clark about way back in the day? Well, this is the answer to that project. Literally. It’s answers to the questions. It dubs itself as: almost complete answers to “Front-end Job Interview Questions” which you can use to interview potential candidates, test yourself, or completely ignore They forgot to mention the other use case: memorizing the answers just in case your interviewer pulls questions directly from this list 😉

read more

David Heinemeier Hansson m.signalvnoise.com

Stimulus 1.0: a modest JavaScript framework for the HTML you already have

When you combine the gains of Turbolinks and Stimulus… Turbolinks maintains a persistent process, just like single-page applications do. It intercepts links and loads new pages via Ajax. The server still returns fully-formed HTML documents. This strategy alone can make most actions in most applications feel really fast. For Basecamp, it sped up the page-to-page transition by ~3x. But Turbolinks alone is only half the story. Prior to Stimulus, Basecamp used different styles and patterns to apply “JavaScript sprinkles”. Stimulus rolls up the best of those patterns into a modest, small framework revolving around just three main concepts: Controllers, actions, and targets. It’s designed to read as a progressive enhancement when you look at the HTML it’s addressing… You should 💯 read the rest of this post as well as watch this proposition of Turbolinks from Sam Stephenson at RailsConf 2016. ALSO, we’re recording a show next week with David Heinemeier Hansson about Stimulus, so send us any questions you have by replying to this email, Slack, or Twitter.

read more

0:00 / 0:00