# front-end-development Published articles for front-end-development. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## A tag input that feels like a real product DevFeed: [A tag input that feels like a real product]() Original publisher: [Read original article]() Author: Marko Published: 2026-09-12T09:00:23Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [GUI](), [bug](), [Accessibility]() Tags: [blog-for-developers](), [bug](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [forms](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [product](), [responsive-design-tips](), [ui](), [ux](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A tutorial on building a robust tag-input control. It covers committing values with Enter, commas, blur, and paste; handling spreadsheet delimiters; avoiding duplicate tags; synchronizing hidden form inputs; and providing accessible chip removal controls. ### Source excerpt Your tag input is silently dropping the last thing users type. Here's the 4-line fix, plus paste handling that finally works with spreadsheets. ## A countdown that stays accurate in a background tab DevFeed: [A countdown that stays accurate in a background tab]() Original publisher: [Read original article]() Author: Marko Published: 2026-09-05T06:30:19Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [web applications](), [client](), [Server]() Tags: [blog-for-developers](), [browsers](), [bug](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [http](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [server](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A tutorial on building accurate web countdowns despite background-tab timer throttling. It recommends calculating remaining time from an absolute deadline, forcing a render when a tab returns, and treating the server clock as the authority for consequential expirations. ### Source excerpt Your checkout timer says 4:55 when the cart already expired. Why background tabs break setInterval countdowns, and the three-line fix. ## A sticky table header and first column in 6 lines of CSS DevFeed: [A sticky table header and first column in 6 lines of CSS]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-29T11:00:37Z Content type: article Language: en Sources: [Marko Denic Tech]() Topics: [CSS](), [Web Development]() Tags: [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [content](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [developers](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [markdown](), [performance](), [responsive-design-tips](), [tech](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A concise guide to freezing a table's header row and first column with CSS, covering sticky positioning, semantic row headers, backgrounds, scrolling containers, the corner cell, scroll behavior, and visual borders. ### Source excerpt Freeze a table's header row and first column with five lines of CSS. ## The Infinite Scroll Was a Design Crime. Now Meta is Paying for It. DevFeed: [The Infinite Scroll Was a Design Crime. Now Meta is Paying for It.]() Original publisher: [Read original article]() Author: Simon Sterne Published: 2026-08-25T11:30:00Z Content type: opinion Language: en Sources: [Web Designer Depot]() Topics: [web design](), [User experience (UX)](), [Usability](), [Front end](), [Web Development](), [Web](), [Document Object Model (DOM)](), [Software Engineering](), [browser](), [browsers](), [CSS]() Tags: [addictive-design](), [behavioral-design](), [browser](), [browsers](), [css](), [dark-patterns](), [design](), [design-ethics](), [digital-detox](), [digital-wellness](), [dopamine-loops](), [ethical-design](), [front-end-development](), [infinite-scroll](), [meta](), [meta-lawsuit](), [meta-trial](), [social-media-lawsuit](), [software](), [tech](), [tech-ethics](), [tech-industry](), [tech-news](), [ui-ux](), [usability](), [user-experience](), [ux](), [ux-design](), [ux-usability](), [web-design](), [web-development]() ### AI overview The article argues that infinite scroll prioritized addictive engagement and advertising over usability, accessibility of stopping cues, and front-end integrity. It discusses legal scrutiny of Meta's Instagram and Facebook feeds, performance and state-management problems, and calls on web professionals to abandon the pattern. ### Source excerpt The infinite scroll was never a UX feature--it was a slot machine disguised as code. Now, as Meta faces a historic trial over algorithmic addiction, web designers must finally confront the ugly truth: we sacrificed basic usability and human willpower just to keep users trapped in a bottomless pit. ## An animated FAQ accordion in pure HTML DevFeed: [An animated FAQ accordion in pure HTML]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-22T09:30:55Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [HTML](), [CSS](), [Web Development](), [Accessibility](), [JavaScript]() Tags: [accessibility](), [animation](), [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview Tutorial showing how to build an animated FAQ accordion with pure HTML and CSS. It explains how shared form grouping provides exclusive-panel behavior and how modern CSS enables height transitions without JavaScript or manually measured pixel values. ### Source excerpt Delete every line of accordion JavaScript. Three lines of CSS replace it. ## A real chart in 15 lines of SVG, no library DevFeed: [A real chart in 15 lines of SVG, no library]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-19T11:34:04Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [SVG](), [CSS](), [Canvas](), [data](), [Web Development]() Tags: [blog-for-developers](), [build-faster](), [code](), [code-productivity](), [code-smarter](), [coding](), [content-monetization](), [css](), [css-animation](), [css-performance](), [design](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [marketing](), [responsive-design-tips](), [svg](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A practical guide to creating responsive, accessible data visualizations with inline SVG in about 15 lines, without a charting library. It explains coordinate mapping, responsive sizing, area fills, bar spacing, and common rendering considerations. ### Source excerpt No chart library needed. Inline SVG plots your data in 15 lines, scales to any container, and styles with the same CSS as everything else. ## A before/after image slider in 2 lines of JavaScript DevFeed: [A before/after image slider in 2 lines of JavaScript]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-15T09:34:36Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [image slider](), [JavaScript](), [CSS](), [Web Development]() Tags: [blog-for-developers](), [browser](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [image-slider](), [images](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A concise tutorial showing how to build an accessible before/after image slider with two stacked images, CSS clipping, a native range input, and only two lines of JavaScript. ### Source excerpt The plugin you were about to install is just input[type=range]. Stack two images, clip one, done. Works with the keyboard too. ## Delete your auto-resize textarea script DevFeed: [Delete your auto-resize textarea script]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-08T11:05:28Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [CSS](), [Web Development](), [browser]() Tags: [blog-for-developers](), [browser](), [build-faster](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview The article explains how CSS field-sizing: content can replace JavaScript auto-resize textarea scripts. It covers growth limits, placeholder sizing, width constraints, fallback behavior, browser support, and manual resizing. ### Source excerpt The CSS property field-sizing: content replaces your auto-resize textarea script. One line, no input listener, no scrollHeight. Plus the limits to set. ## Give your site the Cmd+K menu users expect DevFeed: [Give your site the Cmd+K menu users expect]() Original publisher: [Read original article]() Author: Marko Published: 2026-08-01T10:15:27Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [dialog](), [Code](), [coding](), [browser](), [Chrome](), [Firefox]() Tags: [blog-for-developers](), [browser](), [build-faster](), [chrome](), [code](), [code-productivity](), [code-smarter](), [coding](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [dialog](), [email-newsletter-for-coders](), [firefox](), [front-end-development](), [github](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [responsive-design-tips](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview This tutorial explains how to build a dependency-free Cmd+K command palette for a multi-page website using the dialog element, a keydown listener, and a text filter. It covers keyboard handling across Mac and Windows, browser-specific behavior, modal focus and scrolling, and use cases such as admin panels and documentation sites. ### Source excerpt Linear and GitHub both have it. Build the same command palette with the dialog element, one keydown listener, and a filter. No libraries. ## How to build a swipeable carousel with just CSS DevFeed: [How to build a swipeable carousel with just CSS]() Original publisher: [Read original article]() Author: Marko Published: 2026-07-25T13:55:58Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [CSS](), [Web Development]() Tags: [blog-for-developers](), [build-faster](), [code-productivity](), [code-smarter](), [coding](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [how-to](), [html](), [html-tips](), [javascript-tricks](), [learn-to-code](), [performance](), [responsive-design-tips](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview Tutorial showing how to build a swipeable carousel with CSS scroll snap instead of JavaScript or a carousel library. It covers snap behavior, slide alignment, touch and trackpad scrolling, interactive slides, keyboard focus, accessibility, browser support, and practical use cases such as testimonials, product galleries, and mobile card rows. ### Source excerpt You don't need a carousel library. Six lines of CSS scroll snap will do it. ## Turn any table sortable in 20 lines DevFeed: [Turn any table sortable in 20 lines]() Original publisher: [Read original article]() Author: Marko Published: 2026-07-17T12:26:58Z Content type: tutorial Language: en Sources: [Marko Denic Tech]() Topics: [JavaScript](), [HTML](), [Sorting](), [Web Development]() Tags: [blog-for-developers](), [build-faster](), [code](), [code-productivity](), [code-smarter](), [content-monetization](), [css](), [css-animation](), [css-performance](), [developer-growth](), [developer-resources](), [email-newsletter-for-coders](), [front-end-development](), [github-profile-automation](), [html](), [html-tips](), [javascript](), [javascript-tricks](), [learn-to-code](), [markdown](), [responsive-design-tips](), [sorting](), [ui](), [web-dev-newsletter](), [web-development](), [web-development-tips](), [weekly-dev-tips](), [workflow-optimization]() ### AI overview A concise tutorial showing how to make a plain HTML table sortable with about 20 lines of vanilla JavaScript. It explains moving existing DOM rows, reversing sort direction, parsing numeric values correctly, and falling back to text sorting. ### Source excerpt Make any HTML table sortable in 20 lines of vanilla JS. ## From Day 1 to Production: Building Lyft's Analytics & Rides Intelligence Assistant as Onboarding... DevFeed: [From Day 1 to Production: Building Lyft's Analytics & Rides Intelligence Assistant as Onboarding...]() Original publisher: [Read original article]() Author: Sagarbaronia Published: 2026-07-09T22:01:15Z Content type: article Language: en Sources: [Lyft Engineering - Medium]() Topics: [AI Chat](), [Next.js](), [Node.js](), [dashboards]() Tags: [ai-agent](), [analytics](), [aria](), [auth](), [data-science](), [deployment](), [front-end-development](), [frontend](), [next-js](), [node-js](), [onboarding](), [software-engineering]() ### AI overview The article describes building a production Next.js frontend for Lyft's ARIA, an AI-powered natural-language interface for ride analytics. It explains replacing a Streamlit prototype with an authenticated, deployable web client connected to an existing backend AI agent. ### Source excerpt From Day 1 to Production: Building Lyft's Analytics & Rides Intelligence Assistant as Onboarding Project Written by Sagar Baronia at Lyft. A Different Kind of Day One Most onboarding journeys follow a familiar arc: orientation sessions, benefits enrollment, setting up your laptop, and gradually finding your footing over the first few weeks. Mine followed that arc too, but with an additional thread running alongside it from the very start. I joined Lyft in March 2026 as a Senior Data Scientist -- Algorithm on the Marketing, Business & Ads team, bringing close to a decade of experience in data science, first at Oracle and then four years at Amazon. From the very first conversation with my manager, Ravi Chandra Babu Ginjipalli, it was clear that my onboarding would have an extra dimension. Alongside the standard new hire track, I would take on a real production project: one designed to teach me Lyft's systems by shipping something through them. The project: build the production frontend, from scratch, for Lyft's Analytics & Rides Intelligence Assistant -- ARIA for short. This is the story of going from Day 1 to a live production service in three weeks. Aria: From Prototype to Production Aria is an AI-powered tool that lets Lyft employees explore ride analytics data through natural language. Instead of writing SQL queries or navigating dashboards, approved employees at Lyft can ask questions like, "How many rides were there in SF last month?" and get answers instantly. The backend intelligence already existed. My team had built the service that powers Aria's AI agent: the LangGraph orchestration, the SQL generation pipeline, the semantic layer, all of it. But the user-facing layer was running on Streamlit -- functional for prototyping, but not production-grade. It was fine for the handful of us in the team testing it, but it couldn't scale to the whole company, didn't plug into Lyft auth, and lived outside the standard service framework. That meant Aria couldn't graduate f ## Web Day Out, March 2026 DevFeed: [Web Day Out, March 2026]() Original publisher: [Read original article]() Author: Laurence Hughes Published: 2026-05-28T14:37:56Z Content type: article Language: en Sources: [FreeAgent]() Topics: [Web Development](), [Web platform](), [Front end](), [CSS](), [HTML](), [JavaScript](), [Accessibility](), [API](), [User Experience](), [Design system]() Tags: [accessibility](), [api](), [css](), [design-system](), [development](), [front-end](), [front-end-development](), [guide](), [html](), [javascript](), [performance](), [web](), [web-development]() ### AI overview A first-person recap of Web Day Out in March 2026, covering modern browser capabilities, front-end performance and reliability, and planning web feature adoption with Baseline. The author highlights browser-native features such as the Popover API, dialog, and CSS Anchor Positioning, along with progressive enhancement and fallbacks for browser support. ### Source excerpt In March I attended Web Day Out - a one-day event all about what you can do in web browsers today. It was hosted by Clearleft at the Brighton Dome Studio. It was a brilliant day featuring a diverse line-up, friendly hosting and opportunities to mingle with likeminded souls. At this time when software engineers [...] ## Stop Defaulting to "use client": A Practical Mental Model for React Server Component Architecture DevFeed: [Stop Defaulting to "use client": A Practical Mental Model for React Server Component Architecture]() Original publisher: [Read original article]() Author: Clarisse Leduc Published: 2026-04-21T11:14:11Z Content type: tutorial Language: en Sources: [JobTeaser]() Topics: [React](), [Next.js](), [Web Development]() Tags: [architecture](), [front-end-development](), [how-to](), [next-js](), [nextjs](), [react](), [react-server-component](), [software-engineering]() ### AI overview A practical guide to React Server Component architecture in Next.js. It recommends defaulting to Server Components and using Client Components only where interactivity is required, keeping client boundaries close to interactive elements to reduce shipped JavaScript. ### Source excerpt How thinking in server-first component boundaries can simplify data flow and reduce client JavaScript in Next.js applications. When I first started working with the Next.js App Router, I kept running into the same situation. Components would suddenly break -- usually after adding a hook or a click handler. The fix felt obvious: add "use client". But after doing this a few times, I realised something: I was slowly turning my application back into a traditional client-side React app. Which defeats the whole point of React Server Components. The real challenge isn't learning how to use Client and Server Components. It's learning how to decide where code should run. Once that mental model clicked, structuring Next.js applications became much clearer -- and often more performant. The Mental Model React Server Components introduce a simple but powerful separation of responsibilities. A helpful rule of thumb: Default to Server Components. Use Client Components only when interactivity is required. Think of it like this: This small shift in thinking has a big impact on how you design component trees. A Simple Example Consider a typical product page. export default async function ProductPage({ params }) { const product = await getProduct(params.id, { cache: "no-store" }) if (!product) { notFound() // Next.js helper for 404 pages } return ( <> ) } Here: ProductPage -> Server Component ProductDetails -> Server Component AddToCartButton -> Client Component Only the interactive part runs in the browser. Everything else stays on the server, meaning less JavaScript shipped to the user. The "use client" Boundary One subtle detail that often surprises developers is that "use client" creates a boundary in the component tree. If a component is marked as a Client Component, all of its children become Client Components too. Example: "use client" export default function Page() { return ( ) Original publisher: [Read original article]() Author: The NYT Open Team Published: 2025-09-25T15:25:52Z Content type: tutorial Language: en Sources: [New York Times]() Topics: [Dark Mode](), [Design system](), [Accessibility](), [User Experience](), [Web Development]() Tags: [accessibility](), [dark-mode](), [design](), [design-systems](), [development](), [front-end-development](), [games](), [user-experience]() ### AI overview The New York Times Games explains why implementing Dark Mode required more than inverting colors. The project involved accessibility decisions, preserving each game's brand, and creating a consistent design system across eight games and three surfaces. ### Source excerpt How we designed a deceptively complex featureIllustration by Alessandro Gottardo By Joel Urena, Jenna Kim, Kenneth Ofosu, Shaka Clark, Raven Adaramola, Dylan Campbell At least once a day, our players requested a Dark Mode feature for The New York Times Games, particularly those who enjoy playing at night. The bright screens were negatively impacting their satisfaction and hindering accessibility. Our players often wondered why this seemingly simple feature -- just a switch from white to black -- took so long to deliver. People may think designing for Dark Mode is about inverting colors from white to black, one of the points players often cited when asking for Dark Mode. But there are numerous factors that make up little decisions when designing and implementing Dark Mode. Not only do we have to consider the color accessibility, we have to make intentional color decisions to preserve the brand of each game and The New York Times Games. A compilation of negative Games app reviews that reference dark modePrimer: Design Systems & Feature Discovery In the Spring of 2023, The New York Times Games was evolving quickly and we found ourselves with a user experience that was vastly different depending on which game you played and where you played it. We began to rectify this problem with the development of a Design Systems strategy. Like most other tech orgs, we hypothesized that if we began approaching product design and front-end development systematically, surely that would orient us toward a more consistent product experience, right? The answer: yes, eventually. From a business and user impact perspective, the clearest Design Systems opportunity to prioritize first was Dark Mode. However, given the maturity of The New York Times Games digital product, the operational complexity we were tackling was massive. At the time, we had eight live games spread across three surfaces: The New York Times Games apps, the The New York Times news app and on the web. We also had ancillary e ## Tailwind UI is now Tailwind Plus DevFeed: [Tailwind UI is now Tailwind Plus]() Original publisher: [Read original article]() Published: 2025-03-04T16:00:00Z Content type: release Language: en Sources: [Tailwind CSS Blog]() Topics: [Tailwind CSS](), [ui](), [front-end-development](), [Documentation]() Tags: [components](), [content](), [documentation](), [events](), [front-end-development](), [project](), [resources](), [tailwind](), [ui](), [update]() ### AI overview Tailwind UI has been rebranded as Tailwind Plus without changing its one-time pricing, lifetime access, existing content, or upgrade terms. The announcement describes possible future additions such as saved Tailwind Play experiments, editor themes, color palettes, typography themes, a private community, beta documentation access, and early event registration, alongside continued investment in components, templates, and Catalyst. ### Source excerpt We just shipped a huge rebrand project, turning what was previously known as Tailwind UI into Tailwind Plus. Tailwind Plus is the all same high-quality resources you know from Tailwind UI, but with all-new possibilities and potential. ## Landing a front-end job is hard DevFeed: [Landing a front-end job is hard]() Original publisher: [Read original article]() Author: Mads Brodt Published: 2024-08-21T12:34:00Z Content type: article Language: en Sources: [Front-End Focus]() Topics: [Front end](), [Web Development](), [Development](), [Software Engineering]() Tags: [career](), [css](), [front-end](), [front-end-development](), [html](), [javascript]() ### AI overview The author recounts discovering front-end development through HTML, CSS, and JavaScript, building a career in the field, and observing that the job market for new front-end developers had become more competitive. The article states that one company received over 150 applicants for a front-end position and hired three. ### Source excerpt Hey there, fellow front-end dev 👋 ## The skills, complexity, and learning curve of modern front-end development DevFeed: [The skills, complexity, and learning curve of modern front-end development]() Original publisher: [Read original article]() Author: Mads Brodt Published: 2024-05-01T15:01:34Z Content type: opinion Language: en Sources: [Front-End Focus]() Topics: [front-end-development](), [Front end](), [JavaScript](), [Web Development](), [React](), [Vue.js](), [web applications]() Tags: [complexity](), [development](), [front-end](), [front-end-development](), [javascript](), [learning](), [react]() ### AI overview Modern front-end development has expanded beyond HTML and CSS to include JavaScript, frameworks, architecture, tooling, accessibility, and related skills. This broader ecosystem enables richer web experiences but also increases complexity and the learning curve for developers. ### Source excerpt Front-end development has evolved a lot over the years. ## Lift-off: The MDN Curriculum launch DevFeed: [Lift-off: The MDN Curriculum launch]() Original publisher: [Read original article]() Author: hermina-condei Published: 2024-02-27T00:00:00Z Content type: release Language: en Sources: [MDN Blog]() Topics: [front-end-development](), [Web Development](), [Learning](), [Accessibility](), [Responsive Design]() Tags: [accessibility](), [article](), [front-end-development](), [launch](), [learn](), [web-development]() ### AI overview MDN has launched its freely accessible Curriculum, a structured guide to the essential topics and trusted learning resources for front-end web developers. The article explains the curriculum's purpose, organization, and intended use. ### Source excerpt The long-awaited MDN Curriculum is now live on MDN, providing a structured guide to the essential front-end development skills and best practices for industry newcomers. Learn all the key details in this article. ## From Junior to Lead Front-End Developer: A Six-Year Career Journey and Lessons DevFeed: [From Junior to Lead Front-End Developer: A Six-Year Career Journey and Lessons]() Original publisher: [Read original article]() Author: Mads Brodt Published: 2024-01-10T16:01:18Z Content type: opinion Language: en Sources: [Front-End Focus]() Topics: [front-end-development](), [Front end](), [Development]() Tags: [career-progression](), [developer](), [front-end-development](), [junior-developer]() ### AI overview A front-end developer describes progressing from a first coding job in 2018 to Lead front-end developer in 2024. The article shares personal lessons on communicating career goals, understanding expectations for the next level, and working toward promotions. ### Source excerpt I got my first coding job in 2018, and I've just now been promoted to Lead front-end developer in 2024. This is my journey and lessons to help you to do the same. ## Slashing Development Costs DevFeed: [Slashing Development Costs]() Original publisher: [Read original article]() Published: 2023-12-07T00:00:00Z Content type: article Language: en Sources: [The Astro Blog]() Topics: [Web Development](), [Dark Mode](), [Syntax Highlighting]() Tags: [astro](), [dark-mode](), [docs](), [documentation](), [framework](), [front-end-development](), [github](), [next-js](), [react](), [wordpress]() ### AI overview WP Engine describes migrating Atlas documentation to Astro's Starlight after a separate MDX and Next.js setup made rebuilds, previews, and contributions difficult. The company reports faster work and development costs lowered by more than 50%. ### Source excerpt How WP Engine Lowered Development Costs by Over 50% with Astro's Starlight ## Announcing the MDN front-end developer curriculum DevFeed: [Announcing the MDN front-end developer curriculum]() Original publisher: [Read original article]() Author: mdn-team Published: 2023-08-14T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Web Development](), [User interface design]() Tags: [accessibility](), [best-practices](), [career](), [debugging](), [frameworks](), [front-end-development](), [javascript](), [learning](), [performance](), [privacy](), [research](), [testing]() ### AI overview MDN announces a front-end developer curriculum that recommends foundational skills and best practices. It is informed by a 2023 survey that identified needs for clearer learning guidance and stronger coverage of areas such as accessibility, privacy, debugging, and performance. ### Source excerpt MDN has created a curriculum for aspiring front-end developers to build a rewarding and successful career. Take a look at the curriculum, who it's for, and the research it's based on. ## My Career Pivot: From Retail to Engineering DevFeed: [My Career Pivot: From Retail to Engineering]() Original publisher: [Read original article]() Author: Skyscanner Engineering Published: 2022-06-22T09:59:02Z Content type: opinion Language: en Sources: [Stories by Skyscanner Engineering on Medium]() Topics: [Software Engineering](), [Development](), [Front end](), [Bootcamp](), [front-end-development]() Tags: [career](), [career-change](), [course](), [developer](), [front-end-development](), [software-engineer](), [software-engineering](), [women-in-tech]() ### AI overview Louise Reid describes moving from retail and system support into software engineering. She discusses online courses, a 16-week CodeClan bootcamp, her time as an instructor, and her eventual focus on front-end development before joining Skyscanner. ### Source excerpt Louise Reid, Software Engineer As we celebrate International Women in Engineering Day this week, we're profiling female-identifying engineers across Skyscanner's business. Here, Louise Reid tells us how she took the leap from retail to software engineering, what her day to day looks like, her advice for anyone looking to career change, and how the perception of engineering being male-dominated is changing. Louise, you didn't set out to be an engineer -- what was the path that took you from retail to where you are now? I didn't: I have a honours degree in Business and Management. Honestly, going through school, the concept of working as a software developer was so far off my radar. During my degree I worked in hospitality and really enjoyed it, so for a while saw myself working in hospitality management in some shape or form. After uni I travelled in Australia for a bit and then went back to my role in retail with a large well-known shoe retailer, before moving to head office there and working in system-support for the stores. At 29 I found myself in a job that didn't excite me and wasn't really going anywhere. I was really good at my job, but there wasn't a huge amount much transferable knowledge I could take from it into other roles, as a lot of it was in house-built systems. I was also at the level that any progression was reliant on someone above me leaving or the company expanding in some way. It wasn't until I started working with developers there that I started to think of software engineering as a path I could take too. I dipped my toe in the water a little, doing some free online courses with Code Academy, which I really enjoyed. I was then pointed in the direction of CodeClan by my line manager and introduced to their 16 week software development bootcamp. After completing the course I still had a sense of "I don't know what I want to do" and whilst I got offered a few development roles, none of them really excited me. I ended up staying at CodeClan as a cla ## Getting Font Awesome Working On Rails 7 and Bootstrap albeit Perhaps Poorly DevFeed: [Getting Font Awesome Working On Rails 7 and Bootstrap albeit Perhaps Poorly]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2022-06-08T17:27:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Rails](), [Bootstrap](), [Front end](), [Web Development]() Tags: [blog-post](), [bootstrap](), [css](), [fontawesome](), [front-end-development](), [html](), [rails]() ### AI overview A blog post documents a simple, imperfect method for adding Font Awesome, including its brands extension, to a Rails 7 application, and also explains how to add Bootstrap 5 icons. The approach downloads the assets locally, places files in Rails asset and public directories, updates the asset manifest and configuration, and adjusts stylesheet paths. ### Source excerpt I am not a front end engineer - but I'm on a project right now with heavy front end requirements. This blog post documents how I got Font Awesome running on by application including the brands extension. It is by no means a great way to do it and I know: I have more overhead than needed I did not take advantage of Rails 7 facilities in the best way This skips the gem so you lose another dependency from Gemfile I made this work and I sort of understand it but if you asked me to explain it, I think I'd fail the class. Today I wanted to do nothing more than display a github icon. And it does that. Still this works and it is conceptually simple. NOTE: I full well expect to return to this and figure out the "right" way to do this. However, I'm in heavy greenfield development mode and the desire to simply make it work and GIVE ME MY DAMN ICONS NOW is the paramount concern. In greenfield development mode, nothing is more important than: Productivity / not getting bogged down. Not getting discouraged when trying to do something that should be simple (display a damn icon). So much of modern front end development is just plain ridiculously complicated for simple things like making a font work or displaying an image. Font Awesome Steps Download Font Awesome Locally and Decompress It. This requires an account I think. Move stylesheets/all.css to app/assets/stylesheets/ Move webfonts (directory and all) to public/ (yes public) Add //= link all.css to manifest.js In config/initializers/assets.rb add: Rails.application.config.assets.paths " Rails.root.join("assets/webfonts") (yes that isn't the right path but it still works; who knows???) In application.html.erb you need to make one change. This code: <%= stylesheet_link_tag "all"%> Here's an example of the html to use to generate a font: Sidebar: How to Add Bootstrap Icons Also This set of steps let you add the Bootstrap 5 icons to the mix also and is based on the same i [Next page]()