Front End Icon

Front End

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

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...

bitsofcode Icon bitsofcode

Recreating the GitGub contribution graph with CSS Grid

The best way to learn, is to learn by doing! Ire Aderinokun: While learning CSS Grid Layout, I’ve found that the best way to internalize all the new concepts and terminology is by working on various layouts using them. Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. View the working code on CodePen.

read more...
0:00 / 0:00