front-end.md

Front End

Open UI & React Aria are nice. Histoire is nice to test out components.

Notes

• Every time I write code that has user interactions + async logic and don't use state machines, I get tons of bugs.

Links

• Front End Resources
• Front-end Job Interview Questions
• Front End case studies
• Front End Developer Handbook 2018
• Code my UI - Web Design Inspiration with Code Snippets.
• Front End Guidelines Questionnaire
• Great front end guidelines
• Thoughts About Front-End Development (2018)
• Rearchitecting Airbnb’s Frontend (217)
• FrontendArmory - Some great React/JS courses.
• The Elements of UI Engineering (2018)
• UI as an afterthought (2019)
• Front-end Developer Handbook 2019
• The Great Divide (2019) - Two front-end developers are sitting at a bar. They have nothing to talk about.
• Micro Frontends (2019)
• The Modern Front-End Design System Stack (2019)
• Navigating the Hype-Driven Frontend Development World Without Going Insane - Kitze (2019)
• FAB Specification - Compile target for frontend applications. (Code)
• What should i learn as a front-end web dev in 2020?
• dotcom-rendering - Frontend rendering framework for theguardian.com. It uses React, with Emotion for styling.
• Front-End Conferences - List of upcoming front-end related conferences.
• Microfrontends made easy
• Frontend Lobsters, what are your pet peeves about the languages / frameworks you use? (2020)
• Open UI - Maintain an open standard for UI and promote its adherence and adoption. (Code) (HN)
• Guide to becoming a modern front end developer (HN)
• Frontdesk - Community driven list of useful things for Front End Developers.
• Front-end Bookmarks - Collection of articles and talks about HTML, CSS, and JS, grouped by elements, attributes, properties, selectors, methods, and expressions. (Code)
• Frontend Guidelines - Some HTML, CSS and JS best practices.
• React vs Vue: Compare and Contrast (2020)
• Why frontend build tools are getting an overhaul (2020)
• Responsively - Web developer's browser.
• What are the most difficult UI patterns you've coded? (2020)
• Asayer - Frontend Application Monitoring.
• Omatsuri - Open source frontend focused browser tools for everyday use. (Code)
• Front End Developer Resources
• Frontend Unicorn - Learn Front End Development.
• Awesome Front End Security
• Front-end Challenges - Testing your knowledge using real job challenges.
• I don't want to do front-end anymore (2021) (HN) (Lobsters)
• Frontend Greatness - Podcast that helps frontend developers go from good to great.
• How Wix improved website performance by evolving their infrastructure (2021)
• Cобеседование Junior Frontend разработчика (2021)
• Front-End Developer Learning Roadmap
• A Complete Guide To Accessible Front-End Components (2021)
• I can only think that modern front end development has failed (2021) (HN)
• Paperclip - Build UIs at the speed of thought. (Web)
• roxy - Frontend Proxy.
• LogRocket - Modern Frontend Monitoring and Product Analytics.
• Essential list of resources for Front-End beginners
• Никита Мостовой: перфоманс фронтенд приложений (2020)
• Front End Happy Hour Podcast
• Front-End Testing is For Everyone (2021)
• For Web - Awesomeness for front-end developers and web designers.
• feature-sliced - Structural methodology for frontend projects. (Code) (Awesome)
• rounded conf - Conference for well rounded frontend developers.
• How To Build Resilient JavaScript UIs (2021) (HN)
• Кажется, мы стали забывать основы фронтенда (2021)
• Чистая архитектура во фронтенде (2021)
• Interactive Learning Tools For Front-End Developers (2021)
• Frontend Learning Kit - Highly recommended collections for frontend developers.
• Practical frontend architecture (2021) (HN)
• What has your frontend stack journey been so far? (2021)
• Tips, Tricks, Best Practices for front-end development (Code)
• How height.app website was rebuilt from ground up (2021)
• Словари по фронтенду
• Grab Front End Guide
• Frontend Horse - Learn techniques from the best creative frontend developers. (Twitter)
• Building Resilient Frontend Architecture • Monica Lent (2019)
• Perry - Agnostic front-end bug reporting. Collect logs, errors, clicks, and session data easily. (Web)
• Micro frontend resources
• Ask HN: Is back end dev generally easier than front end? (2021)
• UI Foundations - Learn to Build Beautiful UIs.
• Pglet - Build web apps like a front-end pro in the language you already know. No knowledge of HTML, CSS or JavaScript is required.
• Build user-adaptive interfaces | Workshop (2021)
• Dan Abramov SLAYS Frontend Interview w/ Ex-Twitch Engineer (2021)
• Frontend Developer Resources 2022
• Client-side software design
• reg-suit - Visual Regression Testing tool. (Code) (CLI Code) (Report UI Code)
• Goose&Duck – Фронтендер на заводе Tesla | Олег Исонен (2022)
• The 60 Hottest Front-end Tools of 2021
• Component Encyclopedia | Storybook - Reference thousands of components from leading UI engineering teams. (Article)
• Smart Interface Design Patterns – 100 Smart Interface Design Patterns & Live Examples. 6h Video + UX Training. (2022)
• Interaction Testing with Storybook (2022) (Reddit)
• Claymorphism: Will It Stick Around? UI Trends (2022) (HN)
• 30 popular communities and influencers about Front-End Development (2022)
• Frontend Component Architecture
• Style-free components for all the frameworks
• Architecture for a maintainable UI
• A "lawful" framework for styling/formatting UIs? (2022)
• UIs are streaming DAGs (2022) (HN) (Tweet) (Lobsters)
• TanStack Virtual - Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte. (Web)
• Papanasi - UI library to use cross Frameworks. (Docs)
• TanStack - High Quality Open-Source Software for Web Developers. (Code)
• Front-End Performance Checklist
• How to implement Hexagonal architecture in front end
• Reimagining front-end web development with htmx and hyperscript (2022) (HN)
• TanStack Table - Headless UI for building powerful tables & datagrids for React, Solid, Vue, Svelte and TS/JS. (Web)
• Ask HN: What's is your go to toolset for simple front end development? (2022)
• UI Learn - Learn interface design with articles, books and video course. (Course)
• Avoiding <img> layout shifts: aspect-ratio vs width & height attributes (2022)
• whyframe - Develop components in isolation. (Code)
• Client-side Rendering - Case study of CSR, it aims to explore the potential of client-side rendered apps compared to server-side rendering.
• How to handle spacing at scale (2022)
• Building mico-frontends with edge workers (2022)
• Building a UI Language w/ Dylan Piercey (2022)
• Front-end Testing Principles (2022)
• Backend for Front-end (2022) (HN)
• Lost Pixel - Holistic visual testing for your Frontend. First class integration with Storybook, Ladle & other frontend libraries.
• Frontend Mastery - Deep dives and guides on modern frontend development.
• Fastest Frontend Tooling in 2022
• UI Libraries: Picking The Best (2022)
• Headless UI Float - Easily use Headless UI with Floating UI to position floating elements.
• Фронтенд — это не больно - Пособие для разработчиков и сочувствующих. (Code)
• Composition Comparison - Collection of UI-framework compsition challenges.
• Modern FrontEnds Live (Twitter)
• Awesome Node-Based UIs
• CodyHouse - Lightweight front-end framework for building accessible, bespoke interfaces. (Code)
• OSS Is Out to End the Framework Wars: Jamstack Conf 2022 Opening Keynote
• Zoid - Cross-domain component toolkit.
• Breaking up with JavaScript front ends (2022) (HN)
• Framework.dev - Knowledge base for different front end frameworks. (Code)
• Full Stack Components (2022)
• Maverick - Build functional, reactive, type-safe, lightweight, and fast UI libraries.