Front End Icon

Front End

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

Rich Harris DEV.to

Why Rich Harris doesn't use web components

Rich kicked the proverbial hornet’s nest yesterday. After you read his 10-point post, stick around for the comments, many of which rebut one or more of those points. I’ll weigh in on #3: Platform Fatigue Every time we add a new feature to the platform, we increase that complexity — creating new surface area for bugs, and making it less and less likely that a new competitor to Chromium could ever emerge. Co-sign! 💯

read more

JavaScript martinfowler.com

Micro frontends

What’s the front-end equivalent of a micro-services architecture? A micro-frontends architecture of course. This approach makes a ton of sense, though in my opinion you will definitely want to have an internal components library and some cross-frontend coordination so your UI doesn’t degrade into a series of disconnected, disjointed experiences. It’s hard to argue against the benefits stated by author Cam Jackson: Micro frontends are all about slicing up big and scary things into smaller, more manageable pieces, and then being explicit about the dependencies between them. Our technology choices, our codebases, our teams, and our release processes should all be able to operate and evolve independently of each other, without excessive coordination.

read more

freeCodeCamp Icon freeCodeCamp

Fundamental design principles for non-designers

Front-end developers are often in a position of trying to interpolate between a (static) design and the (dynamic) needs of a product. When something comes up that isn’t quite covered by the design, what should you do? In an ideal world we could have a conversation with the designer, but the world is rarely ideal, so it’s useful to have at least a sense of good practices to apply. This article is great because it keeps it simple - just four straightforward principles. As author Anna 4erepawko Mészáros says: Will this help you create shiny beautiful designs? No. Will this help you create great, clear and comprehensible designs that everyone can easily understand and interact with? Absolutely.

read more

Kay Singh singhkays.com

It's time to replace GIFs with AV1 video

It is 2019 and we need to make a decision about GIFs. GIFs take up a massive amount of space (often multiple megabytes!) and if you’re a web developer, then that’s completely against your ethos! If your goal is to improve your website your loading performance, then a GIF needs to be yanked! But then how do you have moving pictures? The answer is a video. And in most cases, you’ll get better quality as well as almost 50-90% size savings! AV1 videos give us smaller file sizes and better quality?! There must be a catch…maybe…read on to find out.

read more

Google Icon Google

Flutter for web

Flutter for web is a code-compatible implementation of Flutter that is rendered using standards-based web technologies: HTML, CSS and JavaScript. With Flutter for web, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in. This means Flutter is now on mobile, web, desktop, and embedded systems. What surprises me is how dedicated to Dart Google seems to be, despite community malaise and the success of TypeScript.

read more

CSS github.com

A truly monstrous async web chat using no JS whatsoever on the front end

This is a truly glorious hack. How do they do it? Background-images loaded via pseudoselectors + a forever-loading index page (remember Comet?). There’s a more detailed explanation of what’s going on here in the README. Hopefully doesn’t need to be said, but I’ll say it anyway just in case: don’t try this at $HOME

read more

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

0:00 / 0:00