Bookmarks tagged with #frontend.
Show all
Show all
Patterns
Layout patterns built using modern CSS APIs that help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
Saved
on: 2023-06-29
Infinite Scrolling: When to Use It, When to Avoid It
Infinite scrolling is a listing-page design approach which loads content continuously as the user scrolls down. It eliminates the need for pagination — breaking content up into multiple pages. Since its invention in 2006, infinite scrolling experienced a steep growth in popularity.
Tags:
#frontend
Saved
on: 2022-09-08
Patterns.dev - Modern Web App Design Patterns
Patterns.dev is a free online resource on design, rendering, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.
Saved
on: 2022-09-06
✨Style Queries | Una Kravets Online✨
You may have heard of container queries and the new contain-level-3 spec which is currently in experimental browsers, but have you heard of style container queries, which are also a part of this (very exciting) spec?
Saved
on: 2022-06-28
SPAs: theory versus practice | Read the Tea Leaves
I’ve been thinking a lot recently about Single-Page Apps (SPAs) and Multi-Page Apps (MPAs). I’ve been thinking about how MPAs have improved over the years, and where SPAs still have an edge.
Saved
on: 2022-06-28
Making the world’s fastest website, and other mistakes - DEV Community
I work on Kroger’s ecommerce sites for their regional chains, most of which share a codebase. You’d probably guess the front-end stack: React, Redux, and their usual symptoms of too much JavaScript. React/Redux packages used totaled 44.7 kB before any feature code.
Saved
on: 2022-06-09
Magical SVG Techniques — Smashing Magazine
14 min read SVG, Resources, Round-Ups Share on Twitter, LinkedIn Try monday dev for free! Advanced Design Systems, with Brad Frost Click here to kickstart your project for free in a matter of minutes.
Saved
on: 2022-05-27
Frontend Practice | Home
Enhance your skills by building real websites selected for their educational value. Test and improve your frontend knowledge through various challenges.
Saved
on: 2022-04-14
Shoelace: A forward-thinking library of web components.
Add the following code to your page. Now you have access to all of Shoelace’s components! Try adding a button:
Saved
on: 2022-04-04
Optimising Largest Contentful Paint – CSS Wizardry – Web Performance Optimi
Largest Contentful Paint (LCP) is my favourite Core Web Vital. It’s the easiest to optimise, and it’s the only one of the three that works the exact same in the lab as it does in the field (don’t even get me started on this…).
Saved
on: 2022-03-29
Building an effective Image Component
An image component encapsulates performance best practices and provides an out-of-the-box solution to optimize images. Images are a common source of performance bottlenecks for web applications and a key focus area for optimization.
Tags:
#frontend
Saved
on: 2021-10-27
Edge Functions – Vercel
A/B Testing. First impressions are made in the first 50ms of viewing. With Edge Middleware, users will only see what you want them to see.
Saved
on: 2021-10-27
7GUIs
7GUIs by Brad Woods =================================================================================================================================================================== 7GUIs (7 Graphical User Interfaces) is a programming benchmark to compare implementations in terms of their notation
Saved
on: 2021-09-21
Web Vitals patterns
This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. Use the code in these examples to help ensure your projects stay on the right track.
Saved
on: 2021-09-17
Learnings From a WebPageTest Session on CSS-Tricks | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I got together with Tim Kadlec from over at WebPageTest the other day to use do a bit of performance testing on CSS-Tricks.
Saved
on: 2021-07-29
Optimizing Vue for Speed, Performance, and Core Web Vitals | MattStauffer.c
Last week I gave a talk at AlpineDay entitled "From Vue to Alpine: How & Why". In the talk I shared a few situations in which I've moved applications that were previously using Vue to use Alpine instead, for the sake of Google's Core Web Vitals.
Saved
on: 2021-06-24
Core Web Vitals Tracking via GA4, BigQuery and Google Data Studio
This article includes full instructions to set up my (Tony McCreath) Core Web Vitals report using your users Core Web Vitals experience on your website. Set up is via Google Analytics 4 (gtag or GTM), BigQuery and Google Data Studio. At Google I/O 2021 the web.
Saved
on: 2021-06-01
The Humble Element And Core Web Vitals — Smashing Magazine
26 min read Performance, User Experience, Core Web Vitals, Next.js, Media Share on Twitter, LinkedIn Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load.
Saved
on: 2021-04-30
Getting my blog ready for Core Web Vitals & Page Experience - Paul Bakaus'
I’m a big fan of Core Web Vitals, and the cumulative set of criteria that Google calls “Page Experience”, and that is not a coincidence! In the many conversations I’ve had with AMP haters skeptics, most have asked “why we can’t just measure whether something is fast & user friendly” wh
Saved
on: 2021-04-24
The Almost-Complete Guide to Cumulative Layout Shift
Confession Time: I don’t care about the Core Web Vitals (CWV) update. # For those who don’t know but still read my blog (hi, mom), here’s the quick rundown. “Core Web Vitals” is the name of three “core” parts of measuring the “web’s” “vitality.
Saved
on: 2021-04-20
Debugging layout shifts
Learn how to identify and fix layout shifts. The first part of this article discusses tooling for debugging layout shifts, while the second part discusses the thought process to use when identifying the cause of a layout shift.
Saved
on: 2021-03-15
How CLS optimizations increased Yahoo! JAPAN News's page views per session
Optimizing CLS by 0.2 led to a 15% increase in page views per session, 13% longer session durations, and a 1.72 percentage point decrease in bounce rate. Yahoo! JAPAN is one of the largest media companies in Japan, providing over 79 billion page views per month.
Saved
on: 2021-03-10
content-visibility: the new CSS property that boosts your rendering perform
Improve initial load time by skipping the rendering of offscreen content. The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance.
Saved
on: 2021-03-08
React Authentication: How to Store JWT in a Cookie | by Ryan Chenkie | Medi
If that’s the case, there’s a decent chance that your API is secured somehow. Maybe you’re making authentication and authorization happen with JSON Web Tokens. If so, there’s also a decent chance you’re keeping your JWTs in local storage.
Saved
on: 2021-01-22
Vite 2, a DX jump into the future | patak
Vite is a next-generation frontend tool. It generates optimized builds using the battle-tested bundler rollup. But during dev, bundling is avoided with files served on-demand over native ESM. It has Hot Module Replacement (HMR) that stays fast independently of your codebase size.
Tags:
#frontend
Saved
on: 2021-01-15
Site-Speed Topography – CSS Wizardry – Web Performance Optimisation
N.B. On 6 June, 2023, I published an updated version of this article. I would encourage you to read after this. A couple of years ago, my first few days on a new web performance project were always slow going.
Saved
on: 2020-11-04
If not SPAs, What?
A few months ago, I wrote an article about how the SPA pattern has failed to simplify web development. The SPA pattern (Single-Page Apps), I tried to define, was about the React model, which also covers, to a large extent, the model of Vue, Angular, and other frontend frameworks.
Saved
on: 2020-10-29
How We Achieve 90 Lighthouse Performance Score and Fully Offline Mode for
DANA Home Shopping is one of the key features that DANA provides to make us more convenience to buy stuff we want from our home without going anywhere. We can order via Whatsapp and pay it using QRIS (Quick Response Code Indonesian Standard).
Saved
on: 2020-07-08
TeamCity UI: How Do We Test It?
Developing a working piece of software is difficult. Just like building an airplane, it requires talented people, working components, and a testing framework. No plane leaves the hangar before everything is ready, checked, and double-checked.
Saved
on: 2020-06-26
Using State Machines in Vue.js with XState | frontstuff
While state machines used to be an obscure model for the front-end world, it has gained quite some traction lately, mostly thanks to XState. XState is a JavaScript state machine implementation created by Microsoft engineer David Khourshid.
Saved
on: 2020-02-27
Data Fetching using Vue Hooks | Darren Jennings
Data fetching in an app can be a bit convoluted. If you're making XHR requests, you might see low latency from your high speed network connection or your low latency local network. You can emulate network conditions, but optimizing for speed can be an afterthought.
Saved
on: 2020-02-12
Performant Front-end Architecture
This post describes some techniques to make front-end apps load faster and provide a good user experience. We'll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache?
Saved
on: 2020-02-10
Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word] — Smashing
114 min read Performance, Service Workers, Checklists Share on Twitter or LinkedIn Let’s make 2020… fast! An annual front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences on the web today. Updated since 2016.
Saved
on: 2020-01-07
Simpler UI Logic With Finite State Machines
Finite State Machines are a pattern that has been around for a long time. The basic idea is that a given component or set of components can only exist in a single state at a time. The state they exist in is based on events that can trigger the component to move between states.
Saved
on: 2019-12-23
9 Projects you can do to become a Frontend Master
Whatever you do, it's always beneficial to have the right tools at your disposal. I love working remotely and am a big advocate of doing remote software development. Therefore, I always strive to have the best equipment available to be as productive as possible.
Saved
on: 2019-10-09
The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.
One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering.
Saved
on: 2019-07-24
Frontend Design, React, and a Bridge over the Great Divide
Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products’ user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development. Of course “frontend designer” may or may not be the right title for it.
Saved
on: 2019-07-19
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HT
This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.
Saved
on: 2019-04-17
How we built the fastest conference website in the world
This is a post by JSConf EU Organiser Malte Ubl.
Saved
on: 2019-03-20
nhsuk/nhsuk-frontend
NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services. Visit the NHS digital service manual for examples of components and guidance for when to use them.
Tags:
#frontend
Saved
on: 2018-12-21
What makes a good front-end developer? | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer?
Tags:
#frontend
Saved
on: 2018-09-19
thedaviddias/Front-End-Performance-Checklist
Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too.
Saved
on: 2018-08-30
Twitter Lite and High Performance React Progressive Web Apps at Scale
Creating a fast web application involves many cycles of measuring where time is wasted, understanding why it’s happening, and applying potential solutions. Unfortunately, there’s never just one quick fix. Performance is a continuous game of watching and measuring for areas to improve.
Saved
on: 2017-04-18
Managing Frontend in the Microservices Architecture
Microservices are now the mainstream approach for scalable systems architecture. There is little controversy when we are talking about designing backend services. Well-behaved backend microservice should cover one BoundedContext and communicate over the REST API.
Saved
on: 2017-04-13
Front-end Developer Handbook 2017 · GitBook
Forget building your own custom docs platform. With GitBook you get beautiful documentation for your users, and a branch-based Git workflow for your team.
Saved
on: 2017-01-31