# frontend development Published articles for frontend 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. ## Inside the First Three.js Conference in Paris DevFeed: [Inside the First Three.js Conference in Paris]() Original publisher: [Read original article]() Author: Manoela Ilic Published: 2026-09-10T08:30:11Z Content type: news Language: en Sources: [Codrops]() Topics: [Three.js community](), [webgpu]() Tags: [3d-web-development](), [ai](), [articles](), [browser](), [coding](), [codrops](), [community](), [conference](), [creative-coding](), [creative-development](), [creative-technology](), [creativity](), [creators](), [developers](), [digital-experiences](), [event](), [experiments](), [frontend-development](), [generative-art](), [immersive-web](), [interactive-web-experiences](), [javascript-3d](), [shaders](), [three-js](), [three-js-community](), [three-js-conference](), [three-js-conference-paris](), [three-js-demos](), [three-js-developers](), [three-js-projects](), [three-js-talks](), [three-js-web-development](), [three-js-workshops](), [web-3d](), [web-design](), [webgl](), [webgpu]() ### AI overview A live look at the first Three.js Conference in Paris, covering community moments, opening talks, a Zelda rebuild moving from WebGL to WebGPU, and a discussion about AI and coding. ### Source excerpt A look inside the first-ever Three.js Conference, straight from Paris. ## Turning Names Into Digital Architecture with Three.js DevFeed: [Turning Names Into Digital Architecture with Three.js]() Original publisher: [Read original article]() Author: Serhii Polyvanyi Published: 2026-09-09T17:55:00Z Content type: article Language: en Sources: [Codrops]() Topics: [Three.js community](), [Three.js custom shaders](), [Three.js shaders]() Tags: [3d](), [architecture](), [articles](), [best-free-frontend-development-resources](), [best-javascript-libraries-for-animations](), [best-web-development-blogs](), [conference](), [creative-coding](), [creative-ui-ideas-for-web-design](), [css-animations](), [css-grid-vs-flexbox](), [css-hover-effects](), [css-only-effects](), [experiment](), [frontend-development](), [gsap-animation-examples](), [how-to-build-a-responsive-website-from-scratch](), [how-to-create-parallax-scrolling-effects](), [how-to-create-smooth-css-transitions](), [how-to-make-a-portfolio-website-interactive](), [how-to-optimize-animations-for-performance](), [html5-and-css3-tricks](), [javascript-effects](), [javascript-ui-interactions](), [micro-interactions-for-websites](), [modern-web-development](), [react-ui-animations](), [step-by-step-guide-to-webgl-animations](), [svg-animations-in-css](), [three-js](), [three-js-3d-animations](), [three-js-conference](), [ui-ux-design-tips](), [web-design-tutorials](), [webgl-tutorials-for-beginners](), [wordpress-themes-and-plugins]() ### AI overview An interactive Three.js experiment turns typed names into lightweight, metallic-looking 3D letter structures. It explains contour generation, interpolation and deformation, structural line geometry, and a custom shader with a baked reflection map. ### Source excerpt For the Three.js Conference in Paris, BL/S® created an interactive experiment that transforms your name into a dynamic 3D structure. ## Figma is the New Dreamweaver: How Modern Prototyping Tools are Trapping Us in 2018 DevFeed: [Figma is the New Dreamweaver: How Modern Prototyping Tools are Trapping Us in 2018]() Original publisher: [Read original article]() Author: Noah Davis Published: 2026-08-17T12:04:00Z Content type: opinion Language: en Sources: [Web Designer Depot]() Topics: [Figma](), [Code](), [CSS](), [HTML](), [Web](), [Web Development](), [systems]() Tags: [accessibility](), [css](), [design](), [design-systems](), [design-tools](), [dreamweaver](), [figma](), [figma-alternatives](), [frontend-development](), [html](), [interface-design](), [modern-web-design](), [product-design](), [prototyping](), [responsive-design](), [systems](), [ui-design](), [user-experience](), [ux-design](), [web](), [web-design](), [web-designers](), [web-development](), [writing-code]() ### AI overview Figma's polished, pixel-based canvas and prototyping features can obscure the fluidity, document flow, layout behavior, and unpredictable content of the web. The article argues that designers who rely on fixed artboards and simulated code risk repeating Dreamweaver's history of separating visual design from HTML, CSS, responsive behavior, performance, and systems thinking. ### Source excerpt Just like Dreamweaver convinced a generation they could ignore HTML and CSS, Figma's perfect canvas may be hiding the messy realities of how the web actually works. The future belongs to designers who understand systems, behavior, performance, and code--not just pixels. ## The 2-Second Rule: How to make your website feel like magic in 2026 DevFeed: [The 2-Second Rule: How to make your website feel like magic in 2026]() Original publisher: [Read original article]() Author: Louise North Published: 2026-08-04T11:43:00Z Content type: article Language: en Sources: [Web Designer Depot]() Topics: [Web](), [Latency](), [browser](), [Workers](), [Compression](), [Artificial Intelligence](), [Edge]() Tags: [architecture](), [avif-images](), [browser](), [compression](), [core-web-vitals](), [developers](), [digital-hospitality](), [edge](), [edge-computing](), [frontend-development](), [guide](), [http3](), [inclusive-design](), [interaction-to-next-paint](), [javascript-optimization](), [mobile-optimization](), [page-speed-optimization](), [performance](), [predictive-ai](), [site-reliability](), [speed](), [technical-seo](), [user-experience](), [ux-design-2026](), [web-development](), [web-development-trends](), [web-performance](), [website-usability](), [workers](), [zero-latency-ux]() ### AI overview A guide to making websites feel faster and more responsive by focusing on interaction performance, Web Workers, AVIF images, and responsive image delivery. It presents speed as an important part of user experience in 2026. ### Source excerpt In 2026, a "pretty" website is no longer enough--if it doesn't feel instant, it's invisible. This guide reveals how the world's top developers are using predictive AI and "Edge" architecture to kill the loading bar for good. ## From Figma to code in minutes: How I built UI Studio with AI DevFeed: [From Figma to code in minutes: How I built UI Studio with AI]() Original publisher: [Read original article]() Author: Jayant Kumar Published: 2026-06-18T07:01:03Z Content type: tutorial Language: en Sources: [Amex GBT Technology]() Topics: [Figma](), [ui](), [React](), [Anthropic Claude](), [Prompt Engineering](), [repo](), [Terminal]() Tags: [ai](), [anthropic-claude](), [figma](), [frontend-development](), [prompt-engineering](), [react](), [repo](), [software-development](), [terminal](), [ui](), [ui-design]() ### AI overview This tutorial explains how the author built UI Studio, a tool that generates UI code using Egencia's internal UITK React components from a prompt, a Figma URL, or a screenshot. It describes the original feasibility-checking workflow and the tool's progression from a local prototype to a deployable application. ### Source excerpt Whether you're a developer checking feasibility or a designer wanting to see your Figma come to life in real code, UI Studio is built for both. If you've ever worked on a product team, you know the dance, a designer hands over a Figma file, but before anyone writes a single line of production code, a developer has to answer one question: Is this buildable with our component library? At Egencia by Amex GBT, we use UITK (UI Toolkit), our internal component library built on React. It gives developers a set of standardized components to build consistent UIs across our products. As part of Egencia, that question kicks off a process that can take days. We open the doc site, scan the components, write some test code in the React playground or our own repo, and eventually come back to the designer with a verdict. If something isn't feasible, the design goes back for revisions. Then we check again and finally start building. It works. But it's slow. And I couldn't help but wonder whether there was a better way. The idea Earlier this year, I was doing the Anthropic Claude course and somewhere between learning about prompt engineering and working through the hands-on labs, it clicked. What if I could skip the whole feasibility loop and just generate the UI directly using our actual UITK components, from a prompt, a Figma link, or even a screenshot? That was the seed. A few weeks later, UI Studio was live. Figure 1: UI Studio, describe what you want, drop an image, or paste a Figma URLHow it got built It took about three to four weeks to build, and it wasn't linear. It went through three very different versions before becoming what it is today. Phase 1: The hacky local version The first version was built to prove the idea, not to share it. I cloned the UITK doc site repo locally, fetched component data directly from it, and created a proxy that passed all user input to the model via terminal. It worked on my machine. But getting anyone else to use it would have meant cloning re ## How Compose is changing UI development DevFeed: [How Compose is changing UI development]() Original publisher: [Read original article]() Published: 2026-05-11T00:00:00Z Content type: opinion Language: en Sources: [Kt. Academy]() Topics: [Compose](), [Jetpack Compose](), [Android](), [Kotlin](), [Web Development](), [React](), [Vue.js](), [Web](), [wasm]() Tags: [adaptive](), [android](), [android-compose](), [android-development](), [compose](), [desktop](), [frontend-development](), [ios](), [javascript](), [kotlin](), [react](), [screenshot-testing](), [workshop-learning-programming]() ### AI overview This video transcript argues that Compose, a Kotlin-based declarative UI framework, is expanding beyond Android to iOS, desktop, and websites. It highlights Compose's shared tooling, adaptive layouts, previews, screenshot testing, and native animations while acknowledging weaker browser debugging support than traditional web tools. ### Source excerpt How Compose is changing the game in UI development. ## OLX Masterclass Frontend 2026 DevFeed: [OLX Masterclass Frontend 2026]() Original publisher: [Read original article]() Author: Isaac Queiroz Published: 2026-02-25T16:16:00Z Content type: news Language: en Sources: [OLX]() Topics: [Front end](), [Model Context Protocol](), [Development](), [CSS](), [React](), [Figma](), [repo](), [configuration]() Tags: [2026](), [agents](), [ai](), [code](), [coding](), [component](), [configuration](), [css](), [development](), [event](), [figma](), [frontend](), [frontend-development](), [masterclass](), [mcp](), [mcps](), [model-context-protocol](), [olx](), [react](), [repo]() ### AI overview OLX announces its 2026 Frontend Masterclass, featuring three sessions on MCP integrations and Figma-to-React workflows, new CSS capabilities, and managing localized websites for multiple brands from a single repository. ### Source excerpt The always-evolving challenges of OLX create a rich environment for innovation, experimentation, and knowledge sharing. In our 2026 Frontend Masterclass, we have three sessions that will shed light on our current development flow. Join us on March 3rd, 2026, from 6:00 pm to 9:00 pm at our OLX Offices in Poznań! Do you want to join us and know what's trending in the latest frontend technology? Check the event information and join here! Can't join it in person? Sign in to this form to receive the online recording of the session! Our Agenda With a broad schedule, our speakers will deliver a mix of technical presentations and demonstrations on multiple subjects. MCP Servers in Action: From Figma Design to React Component in Minutes by Karol Grabowski Part of what changed in our day-to-day flow is how AI is always available to help us. AI assistants and agents are powerful out-of-the-box tools; we can augment our reach by configuring Model Context Protocols (MCPs) to take our setup a step further. Join Karol to explore how the Model Context Protocol turns AI assistants into powerful development partners with direct access to your tools. This talk covers the MCP ecosystem, real OLX integrations, and includes a live coding session demonstrating the Figma-to-code workflow. CSS is no longer "this simple" -- it got _layers_, quite literally by Tomasz "Comandeer" Jakut At the same time that we advance with AI and multiple experiments to learn from our users and make our flows as pleasant as possible, we are still styling our components with the usual suspects, right? Not always! Join Tomasz Jakut and deep dive into CSS's new capabilities that can redefine how we approach styling websites: from @Layer and nesting to container queries, scoped styles, and user preferences. New native features can refresh well-known techniques and make others obsolete. One-product, three brands -- Our strategy for serving different countries from a single repo by Lilian Galezewska We all know how OL ## From Minecraft Servers to Full-Stack Development. The Artisan of the Day Is Matilde Enevoldsen. DevFeed: [From Minecraft Servers to Full-Stack Development. The Artisan of the Day Is Matilde Enevoldsen.]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-09-30T19:18:38Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [Laravel](), [PHP](), [Back end](), [Front end](), [Vue.js](), [Livewire](), [Drupal](), [React]() Tags: [code-quality](), [community](), [features](), [frontend](), [frontend-development](), [full-stack-development](), [laravel](), [learning](), [php](), [testing](), [vue]() ### AI overview This profile follows Matilde Enevoldsen's journey from building a WordPress site for a Minecraft server to professional full-stack development. It highlights her work with Laravel, PHP, Vue, and Livewire, her course platform, and her emphasis on developer experience, testing, code quality, and pragmatic tooling. ### Source excerpt Matilde Enevoldsen shares her journey from Minecraft sites to Laravel pro, building a course platform and advocating for pragmatic, fundamentals-first development. ## From Freelancer to SaaS Creator: The Artisan of the Day Is Bjorn Lindholm Hansen DevFeed: [From Freelancer to SaaS Creator: The Artisan of the Day Is Bjorn Lindholm Hansen]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-09-02T15:31:00Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [Laravel](), [Software as a service](), [web applications](), [Forms](), [Deployment](), [Cloud](), [frontend development]() Tags: [cloud](), [community](), [deployment](), [developer](), [experimentation](), [forms](), [frontend-development](), [laravel](), [learning](), [saas](), [web-applications]() ### AI overview A profile of Bjørn Lindholm Hansen, a Danish freelance Laravel developer who builds SaaS platforms and information-focused web applications. He describes his self-taught path, streamlined technology stack, and advice to learn through hands-on experimentation. ### Source excerpt Freelance Laravel developer Bjorn Lindholm Hansen builds SaaS apps and data-driven websites, sharing his journey and advice with the Laravel community. ## Livewire 4 Is Here! The Artisan of the Day Is Caleb Porzio. DevFeed: [Livewire 4 Is Here! The Artisan of the Day Is Caleb Porzio.]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-08-18T10:55:06Z Content type: release Language: en Sources: [Laravel Blog]() Topics: [interactive website](), [modern web development](), [Web Development]() Tags: [developer-experience](), [frontend-development](), [javascript](), [laravel](), [performance](), [php](), [reactive](), [tailwind]() ### AI overview Livewire 4 introduces a new default approach to components, with single-file components, updated project structure, PHP 8.4 property hooks, slots and refs, simpler loading states, and performance improvements for polling. ### Source excerpt Caleb Porzio walks through the new Livewire 4 and a fourth new way to make components. ## Five Steps to Interfaces That Connect. The Artisan of the Day Is Leah Thompson. DevFeed: [Five Steps to Interfaces That Connect. The Artisan of the Day Is Leah Thompson.]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-08-16T14:02:32Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [Web Development]() Tags: [design](), [frontend](), [frontend-development](), [laravel](), [user-experience](), [user-interfaces]() ### AI overview A Laravel team member presents a systematic five-step approach to creating engaging frontend user interfaces, covering spacing, typography, and layering. ### Source excerpt Laravel team member Leah Thompson shares her advice on making frontend development less intimidating and more systematic. ## Two days in Barcelona with the Svelte community DevFeed: [Two days in Barcelona with the Svelte community]() Original publisher: [Read original article]() Author: Guilhem Le Mouel Published: 2025-05-20T00:00:00Z Content type: article Language: en Sources: [Windmill Blog]() Topics: [Svelte](), [frontend development](), [Development](), [JavaScript]() Tags: [2025](), [community](), [frontend-development](), [javascript](), [sponsor](), [summit](), [svelte](), [svelte-5](), [svelte-summit](), [svelte-svelte-summit-sveltekit-svelte-5](), [sveltekit](), [talks](), [windmill]() ### AI overview A first-hand account of attending Svelte Summit Spring 2025 in Barcelona, covering the event's community atmosphere, talks, and Windmill's decision to use Svelte for its frontend. ### Source excerpt A first-hand account of the Svelte Summit Spring 2025 in Barcelona, exploring the talks, community, and why Windmill chose Svelte for its frontend development. ## Announcing Inertia 2.0: Redefining Frontend Development for Laravel DevFeed: [Announcing Inertia 2.0: Redefining Frontend Development for Laravel]() Original publisher: [Read original article]() Author: Joe Tannenbaum Published: 2024-12-13T19:28:00Z Content type: release Language: en Sources: [Laravel Blog]() Topics: [Laravel](), [frontend development](), [Front end](), [Single-page application (SPA)](), [React](), [Svelte](), [Vue.js](), [Object-relational mapping](), [Routing (disambiguation)](), [Core Web Vitals]() Tags: [async](), [core-web-vitals](), [deferred](), [frontend-development](), [laravel](), [lazy-loading](), [orm](), [performance](), [react](), [release](), [routing](), [svelte](), [vue]() ### AI overview Inertia 2.0 is a stable release that adds asynchronous requests, deferred props, prefetching, and polling to Laravel frontend development. These features support more responsive applications while avoiding the complexity of maintaining a separate API. ### Source excerpt Inertia 2.0 brings powerful new features to Laravel frontend development including async requests, deferred props, prefetching, and polling. Learn how these improvements help you build faster, more responsive applications without the complexity of maintaining a separate API. ## Server-Side Rendering with AWS Amplify DevFeed: [Server-Side Rendering with AWS Amplify]() Original publisher: [Read original article]() Author: Guillermo Ojeda Published: 2023-10-24T18:31:48Z Content type: article Language: en Sources: [Guille Ojeda]() Topics: [Server-side rendering](), [Amazon Web Services](), [Website](), [Web Development]() Tags: [aws](), [aws-amplify](), [frontend-development](), [html](), [javascript](), [server-side-rendering]() ### AI overview This article explains the evolution from server-side rendering to client-side rendering and back to server-side rendering for JavaScript applications. It describes how running React code on servers can reduce load times and improve user experience, while cloud computing can make the required infrastructure more practical to operate. ### Source excerpt Note: This content was originally published at the Simple AWS newsletter. Back in the Paleolithic, which for software means 30 years ago, we had HTML, CSS and JavaScript, and we wrote all the structure of the website in HTML. When we wanted to create... ## The Evolution of GraphQL at Scale DevFeed: [The Evolution of GraphQL at Scale]() Original publisher: [Read original article]() Author: Andy Roberts Published: 2020-11-12T11:25:01Z Content type: tutorial Language: en Sources: [Apollo Blog]() Topics: [GraphQL](), [Microservice](), [Front end](), [BFF](), [API](), [Structured-data]() Tags: [api](), [architecture](), [backend](), [bff](), [development](), [frontend-development](), [graphql](), [microservice-architecture](), [schema]() ### AI overview This article explains how organizations evolve GraphQL after an initial proof of concept reaches production. It compares monolithic GraphQL APIs, backend-for-frontend implementations, and Federation, while discussing the organizational and architectural trade-offs involved. ### Source excerpt Most organizations' adventures with GraphQL start with one team looking for a way to solve one of the most significant frontend development problems in a microservice architecture: how to get all the data your app needs without making a million and one service calls. For a frontend engineer, that promise of getting all the data they need, in the exact shape they envision using it (and with only a single request) is often too hard to resist. It's here where a proof of concept comes to fruition. ## Joining Nrwl: Five Weeks at the Company DevFeed: [Joining Nrwl: Five Weeks at the Company]() Original publisher: [Read original article]() Published: 2020-02-12T00:00:00Z Content type: opinion Language: en Sources: [Juri Strumpflohner]() Topics: [Development](), [Front end](), [frontend development](), [Angular](), [React](), [JavaScript](), [Refactoring](), [Tooling](), [ci](), [Open Source]() Tags: [angular](), [ci](), [frontend-development](), [javascript](), [monorepo](), [open-source](), [react](), [refactoring](), [tooling]() ### AI overview The author describes joining Nrwl and their first five weeks there, introducing the company's focus on helping enterprises scale software development through monorepos, engineering expertise, consulting, training, automation, and tooling. The article also explains Nx and Nx Console and outlines benefits and challenges of monorepos. ### Source excerpt Lorem ipsum dolor sit amet ## Egghead Lesson: Simple caching with RxJS DevFeed: [Egghead Lesson: Simple caching with RxJS]() Original publisher: [Read original article]() Published: 2018-11-10T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Caching](), [Angular](), [API](), [frontend development](), [Development](), [Redis]() Tags: [angular](), [api](), [cache](), [caching](), [development](), [frontend-development](), [redis](), [software-development](), [video]() ### AI overview An accompanying article for an Egghead video lesson on implementing simple data caching in Angular with RxJS. It discusses cache invalidation and stale data, recommends considering optimizations and server-side API caching such as response headers or Redis, and points to a StackBlitz example. ### Source excerpt Lorem ipsum dolor sit amet ## Egghead Lesson: Avoid memory leaks when subscribing to RxJS Observables in Angular Components DevFeed: [Egghead Lesson: Avoid memory leaks when subscribing to RxJS Observables in Angular Components]() Original publisher: [Read original article]() Published: 2018-10-28T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Memory Leaks](), [frontend development](), [Development]() Tags: [angular](), [development](), [egghead](), [frontend-development](), [memory-leaks](), [rxjs](), [video]() ### AI overview This Egghead lesson explains how memory leaks can occur when subscribing to long-running RxJS Observables in Angular components. It demonstrates the leak and compares manual unsubscription, the takeUntil operator, and the async pipe. It also notes that Angular HTTP client Observables complete immediately, while service abstractions may require different handling. ### Source excerpt Lorem ipsum dolor sit amet ## JavaScript Workshop with Kyle Simpson DevFeed: [JavaScript Workshop with Kyle Simpson]() Original publisher: [Read original article]() Author: Daw Chih Liou Published: 2018-10-15T00:00:00Z Content type: article Language: en Sources: [Trivago]() Topics: [JavaScript](), [Functional programming](), [frontend development](), [Programming]() Tags: [article](), [babel](), [engineering-culture](), [frontend](), [frontend-development](), [functional-programming](), [javascript](), [reactive-programming](), [webpack](), [workshop]() ### AI overview A recap of a five-day JavaScript workshop led by Kyle Simpson at trivago. The workshop covered JavaScript foundations, recent language features, asynchronous programming, functional programming, scope, hoisting, closures, compilation, and execution. The article also discusses applying functional programming and empathetic communication in frontend development. ### Source excerpt It has been a couple of months since Kyle, author of the "You Don't Know JS" series, visited our trivago headquarters a... ## Simple State Management with RxJS's scan operator DevFeed: [Simple State Management with RxJS's scan operator]() Original publisher: [Read original article]() Published: 2018-10-09T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [frontend development](), [Redux](), [Development]() Tags: [angular](), [frontend-development](), [how-to](), [redux](), [rxjs](), [state-management]() ### AI overview A tutorial on using RxJS's scan operator to build a simple state-management solution for frontend applications. It contrasts this lightweight approach with more structured patterns and libraries such as Flux and Redux, while noting that the example is intentionally naive and should be adapted to specific needs. ### Source excerpt Lorem ipsum dolor sit amet ## Looking back on 2017 DevFeed: [Looking back on 2017]() Original publisher: [Read original article]() Published: 2017-12-29T00:00:00Z Content type: opinion Language: en Sources: [Juri Strumpflohner]() Topics: [frontend development](), [Angular](), [Web platform]() Tags: [angular](), [frontend-development](), [public-speaking](), [web-platform](), [writing]() ### AI overview A personal review of 2017 highlights the author's first experiences with remote online speaking, print-press writing, and conference speaking. It also reflects on ten years of blogging, the blog's increasing focus on frontend development and Angular, interest in the wider web platform, and growth in readership. ### Source excerpt Lorem ipsum dolor sit amet ## A Gulp Workflow for Frontend Development Automation DevFeed: [A Gulp Workflow for Frontend Development Automation]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2017-08-15T22:25:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Gulp](), [frontend development](), [workflow automation](), [CSS](), [JavaScript](), [make]() Tags: [automation](), [build](), [cache](), [cool](), [css](), [debugging](), [development](), [es6](), [faster](), [frontend](), [frontend-development](), [gulp](), [helps](), [here-s](), [insights](), [javascript](), [scss](), [stuff](), [tool](), [workflow]() ### AI overview A tutorial explaining why frontend workflow automation is useful and how Gulp can assemble a website's assets. It describes tasks for processing CSS and JavaScript, including SCSS compilation, browser prefixing, source maps, dependency inclusion, combining, minification, transpilation, and uglification. ### Source excerpt Gulp is a workflow automation tool that helps you build cool stuff faster; here's how to use it for frontend development. ## A Better package.json for the Frontend DevFeed: [A Better package.json for the Frontend]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2016-12-23T19:46:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [frontend development](), [Package manager](), [npm](), [Yarn](), [Gulp]() Tags: [better](), [consider](), [days](), [frontend](), [frontend-development](), [gulp](), [here-s](), [insights](), [like](), [mandatory](), [node-js](), [npm](), [npm-packages](), [package-json](), [setup](), [tools](), [webdev](), [webpack](), [workflow]() ### AI overview This article explains how to use package.json as a centralized manifest for a website's frontend packages and workflow tooling. It discusses replacing Bower with npm, and notes that Yarn can manage the same registry with deterministic installs through yarn.lock. ### Source excerpt Frontend workflow tools like gulp are almost mandatory for webdev these days; here's what I consider to be a better package.json setup ## Academic research on browsers, frontend development, and debugging DevFeed: [Academic research on browsers, frontend development, and debugging]() Original publisher: [Read original article]() Author: Paul Irish Published: 2012-09-13T15:45:00Z Content type: article Language: en Sources: [Paul Irish]() Topics: [browsers](), [frontend development](), [debugging](), [Development](), [JavaScript](), [web applications](), [Document Object Model (DOM)](), [Ajax](), [Security](), [Mobile](), [LocalStorage](), [Node.js]() Tags: [academic-research](), [browser](), [browsers](), [debugging](), [debugging-tools](), [development](), [frontend](), [frontend-development](), [javascript](), [mobile](), [node-js](), [performance](), [realtime](), [research](), [security](), [web-applications]() ### AI overview An English developer article curates academic papers, talks, and researchers focused on browsers and frontend development. It covers browser capabilities, DOM events, client-side validation, mobile performance and energy use, web-application race detection, debugging tools, Node.js performance visualization, and browser security research. ### Source excerpt University-level education has never really touched too directly on what we do as frontend developers. I know I was self-taught in the ways of the browser, as were all of my friends. Luckily the sort of webapp work we do these days is quite sophisticated so those CS graduates bring much of the great ideas to the JavaScript community. (Alex Sexton has been a personal inspiration here) Early last year, something clicked in my head when I saw this video: Crossing the Chasm: Pitching Security Research to Mainstream Browser Vendors. You mean.. there are academics... who are doing research on browsers.. in universities? My my! You mean bright minds think about the same things as us and don't publish them on Octopress? ;) Turns out it's quite an active area of research. So, I've put together a list of academic papers, talks, and researchers all centered around frontend development and browsers (Please chime in on the comments if you know of more): Webapps Gibraltar: Exposing Hardware Devices to Web Pages Using AJAX UC San Diego, Microsoft Research, Univ. of Singapore, 2012 Modeling and Reasoning about DOM Events Brown University, 2012 Don't Repeat Yourself: Automatically Synthesizing Client-side Validation Code for Web Applications University of Illinois at Chicago, 2012 Performance Who Killed My Battery: Analyzing Mobile Browser Energy Consumption Stanford, 2012 How far can client-only solutions go for mobile browser speed? ACM Digital Library, 2012 Race Detection for Web Applications Sofia University & ETH Zurich & IBM T.J. Watson Research Center, 2012 Leo Meyerovich - Berkeley Rsearch UC Berkeley, 2009 (Parallel Browser Execution, Security) James Mickens - Microsoft Research Microsoft, 2004- (Performance, localStorage, Mashups, Speculative Execution James Mickens, the Galactic Viceroy of Research Magnificence at Microsoft Research, does awesome work. The above shot is from his MIX11 talk Making Better Web Apps For Today's Browsers. Debugging & Tools Timelapse - Interactiv [Next page]()