Knowledgebase

Articles

Animating Interfaces Motion with purpose.WHAT ANIMATION SHOULD DOShow relationships: where something came from, where... Architecture and Design Systems: Everything That Matters, Briefly The summary.ORGANISE BY FEATURE, AND ESTABLISH WHICH WAY DEPENDENCIES FLOWFeatures may depend on... Avoiding State Management Mistakes Common errors.PUTTING EVERYTHING IN A GLOBAL STOREWhich makes the application difficult to reason... Build Tools: Everything That Matters, Briefly The summary.VERSIONED FILENAMES ARE WHAT MAKE CACHING SAFEAssets can then be cached indefinitely,... Building Accessible Dialogs Modals done correctly.WHAT A DIALOG MUST DOTrap focus within itself while open Return focus to... Building Accessible Menus and Selects Disclosure components.WHAT THEY MUST DOIndicate their expanded state Open and close by keyboard... Building Tables and Data Grids Displaying structured data.WHAT TO USEA proper table, with marked header cells.WHYAssistive... Building With SvelteKit The Svelte framework.WHAT IT PROVIDESFile-based routing Server rendering, static generation and... Building Your Own Component Library Internal components.WHEN IT IS WARRANTEDSeveral projects sharing an interface A distinctive... Building and Maintaining a Design System Practical implementation.WHAT TO DO FIRSTAudit what exists.WHAT THAT REVEALSHow many button... Choosing Between These Frameworks Practical selection.WHAT SUITS LARGE ORGANISATIONS AND LONG-LIVED APPLICATIONSA complete... Choosing an Approach: Everything That Matters, Briefly The summary.A LARGE PROPORTION OF SITES BUILT WITH A FRAMEWORK DID NOT NEED ONEAsk what problem... Client-Side Routing Navigation without page loads.WHAT IT DOESChanges the view and the address without a full page... Common Frontend Anti-Patterns What repeatedly goes wrong.ADDING A FRAMEWORK A CONTENT SITE DID NOT NEEDREBUILDING NATIVE... Common React Mistakes Frequent errors.USING EFFECTS FOR EVERYTHINGTransforming data, responding to events, or computing... Comparing Styling Approaches The options.PLAIN STYLESHEETSSimple, no build step, requires discipline and a naming... Comparing the Main Frontend Frameworks The landscape.REACTThe most widely used. A library rather than a full framework, with an enormous... Component Libraries: Everything That Matters, Briefly The summary.BUILDING A DIALOG OR MENU CORRECTLY IS HARDER THAN IT APPEARSFocus trapped and... Components and Props in React Building blocks.WHAT A COMPONENT SHOULD DOOne identifiable thing.WHAT MAKES A GOOD ONEA clear... Composables and Reusable Logic in Vue Sharing behaviour.WHAT A COMPOSABLE ISA function encapsulating reactive logic, usable across... Data Fetching and State in Nuxt Applications Loading and sharing data.WHAT THE FRAMEWORK PROVIDESComposables for fetching, handling server and... Debugging Framework Applications Finding faults in component code.WHAT TO ESTABLISH FIRSTWhether the data is wrong, or the... Deciding What Needs State Management Before reaching for a library.WHAT KINDS OF STATE EXISTLocal, belonging to one component Shared,... Deciding Whether You Need a Framework The first question.WHAT A FRAMEWORK PROVIDESComponents, as a way of structuring interfaces... Deciding Whether to Use a Component Library Build or adopt.WHAT A LIBRARY PROVIDESPrebuilt components: buttons, inputs, dialogs, menus,... Deploying React Framework Applications Getting them live.WHAT TO ESTABLISH FIRSTWhat output the framework produces What your hosting can... Documenting Components Making a library usable.WHAT DOCUMENTATION MUST INCLUDEWhat the component is for When to use it,... Drag, Drop and Direct Manipulation Moving things.WHAT IT SUITSReordering Moving items between groups Arranging things spatiallyWHAT... Effects and Side Effects Work outside rendering.WHAT AN EFFECT IS FORSynchronising with something outside React: a... Error Handling in Frontend Applications When things fail.WHAT WILL FAILNetwork requests External services Component rendering Anything... Form Validation Patterns Checking input well.WHEN TO VALIDATEAfter a field is completed, not while typing.WHYAn error... Frontend Architecture Fundamentals Structuring an application.WHAT ARCHITECTURE DECIDESWhere code lives What depends on what Where... Frontend Development Without a Framework When plain code suffices.WHAT THE PLATFORM PROVIDES NOWModule loading Element selection and... Frontend Development: Everything That Matters, Briefly The whole category in one page.CHOOSE THE TOOL BY WHO WILL MAINTAIN ITNot benchmarks, novelty or... Handling Authentication in Frontend Applications Signed-in state.WHAT THE FRONTEND IS RESPONSIBLE FORPresenting sign-in Holding whatever the... Handling Events and Forms in React User interaction.HOW EVENTS WORKHandlers are attached as props, with React managing the... Handling File Uploads Getting files from users.WHAT TO ESTABLISHWhat types are permitted What size is permitted Whether... Implementing Dark Mode and Themes Alternative appearances.WHAT TO BASE IT ONCustom properties, redefined per theme.WHYThey change... Interaction and Polish: Everything That Matters, Briefly The summary.USE ESTABLISHED LIBRARIES FOR DIALOGS, MENUS AND SELECTSFocus trapped and restored,... Internationalisation and Localisation Supporting several languages.WHAT INTERNATIONALISATION MEANSBuilding so that translation is... Keeping Design and Code in Step Alignment between disciplines.WHAT CAUSES DIVERGENCEDesigns produced without reference to what... Linting, Formatting and Code Quality Tools Automated consistency.WHAT A FORMATTER DOESApplies consistent formatting automatically.WHY IT... Lists, Keys and Rendering Displaying collections.WHAT A KEY ISAn identifier telling React which item is which between... Loading States and Perceived Performance While waiting.WHY IT MATTERSPerceived speed depends on feedback as much as on actual... Managing Design Tokens Shared values.WHAT A TOKEN ISA named value used throughout: a colour, a spacing step, a type... Managing Frontend Dependencies Packages and versions.WHAT TO COMMITThe dependency declaration, and the lock file.WHY THE LOCK... Managing Server Data Separately Data from an API is not application state.WHY IT IS DIFFERENTIt is owned elsewhere It can become... Measuring Real User Performance Field data.WHY IT MATTERSLaboratory measurement is controlled and repeatable. It is not what your... Migrating Between Frameworks Changing technology.WHEN IT IS WARRANTEDThe current framework is unsupported It genuinely cannot... Notifications and User Feedback Confirming what happened.WHAT EVERY ACTION NEEDSConfirmation that it occurred, or explanation... Onboarding Developers to a Frontend Codebase Helping people become productive.WHAT TO PROVIDESetup instructions that actually work An overview... Optimising the Build Output Shipping less.WHAT TO MEASURE FIRSTTotal output size, and what the largest contributors... Pagination and Infinite Scrolling Presenting long lists.WHAT PAGINATION PROVIDESA sense of scale The ability to return to a... Performance in React Applications Avoiding unnecessary work.WHAT CAUSES SLOWNESSComponents re-rendering when nothing relevant... React Frameworks: Everything That Matters, Briefly The summary.META-FRAMEWORKS REMOVE DECISIONS EVERY APPLICATION OTHERWISE MAKES... React: Everything That Matters, Briefly The summary.DESCRIBE THE INTERFACE FOR A GIVEN STATE, AND KEEP STATE MINIMALNever store values... Reactivity and State in Vue Data that updates the interface.WHAT REACTIVE STATE ISValues tracked by the framework, updating... Rendering and Data Loading in Next.js Where work happens.WHAT OPTIONS EXISTStatic generation at build time Server rendering per request... Reviewing Frontend Code What to look for.CORRECTNESSEvery state handled: loading, empty, errorEdge cases: no data, very... Routing and Navigation in Next.js Moving between views.HOW ROUTING WORKSDetermined by the file structure, rather than... Search and Filtering Interfaces Helping people find things.WHAT TO PROVIDEA visible search field Filters appropriate to the data... Setting Performance Budgets Limits that hold.WHAT A BUDGET ISA defined limit on size or timing, enforced automatically.WHAT... Setting Up a Frontend Project Starting well.WHAT TO DECIDE FIRSTThe framework and tooling The styling approach The state... State Management: Everything That Matters, Briefly The summary.MOST APPLICATIONS HAVE FAR LESS SHARED STATE THAN ASSUMEDMost of what ends up in a... State and the Rules of Hooks Managing data in components.WHAT STATE IS FORData that changes and affects what is displayed.WHAT... Structuring Large Frontend Codebases Organisation at scale.WHAT BREAKS DOWN FIRSTFinding where something lives Knowing what a change... Structuring a React Application Organisation at scale.WHAT TO ORGANISE BYFeature, rather than by file type.WHYFiles that change... Styling Components in JavaScript Frameworks Scoped approaches.WHAT THE OPTIONS AREStyles written in JavaScript, generated at runtime or build... Styling: Everything That Matters, Briefly The summary.WHAT MATTERS MOST AT SCALEWhether styles can be found, understood and removed safely.... Testing React Applications Verifying components.WHAT TO TESTBehaviour as a user experiences it.WHAT NOT TO... Understanding Angular A complete framework.WHAT IT ISA full framework, providing everything an application needs.WHAT... Understanding Astro Content-focused building.WHAT IT ISA framework for content-driven sites, shipping no JavaScript... Understanding Bootstrap A component framework.WHAT IT PROVIDESA grid systemPrebuilt components: navigation, modals,... Understanding Copy-In Component Approaches Components you own.WHAT THE APPROACH ISComponents copied into your project rather than installed... Understanding Gatsby and Static Site Generation Building sites as files.WHAT IT DOESProduces a static site at build time, from content in various... Understanding Lighter State Libraries Simpler alternatives.WHAT THEY PROVIDEShared state without the ceremony of a full pattern.WHAT... Understanding Material UI and Full Component Libraries Complete styled systems.WHAT THEY PROVIDEA comprehensive set of components A coherent visual... Understanding Meta-Frameworks Frameworks built on frameworks.WHAT THEY AREFrameworks adding structure and capability on top of... Understanding Micro-Frontends Independently deployed interfaces.WHAT THEY AREAn application composed of separately built and... Understanding Next.js The most widely used React framework.WHAT IT ADDS TO REACTRouting based on file structure Server... Understanding Nuxt The Vue meta-framework.WHAT IT ADDSFile-based routing Server rendering, static generation and... Understanding React What it is and how it works.WHAT IT ISA library for building interfaces from components.WHAT IT... Understanding Redux The established pattern.WHAT IT PROVIDESA single store holding application state Changes made... Understanding Remix A different emphasis.WHAT IT EMPHASISESWorking with the web platform rather than around it.WHAT... Understanding Rendering Strategies Where and when pages are produced.CLIENT-SIDE RENDERINGThe browser downloads scripts, then builds... Understanding Svelte Compiling away the framework.WHAT IT DOES DIFFERENTLYCompiles components into direct, efficient... Understanding Tailwind CSS Utility-first styling.WHAT IT ISA framework providing small single-purpose classes composed in... Understanding Vite The modern build tool.WHAT IT DOES DIFFERENTLY IN DEVELOPMENTServes modules directly to the... Understanding Vue The framework and its approach.WHAT IT ISA framework for building interfaces, designed to be... Understanding Webpack The established bundler.WHAT IT DOESBuilds a dependency graph from an entry point, and produces... Understanding the Cost of JavaScript What frameworks ship.WHY IT MATTERSScripts must be downloaded, parsed, compiled and executed.WHAT... Upgrading Frameworks and Dependencies Keeping current.WHY IT MATTERSUnsupported versions receive no security fixes, and falling far... Using Sass and Preprocessors Extending CSS.WHAT THEY PROVIDEVariables Nesting Mixins and functions Splitting into files,... Vue Templates and Directives Describing the interface.WHAT A TEMPLATE ISMarkup with additional syntax for binding data and... Vue and Nuxt: Everything That Matters, Briefly The summary.VUE CAN ENHANCE PART OF A PAGE OR BUILD A WHOLE APPLICATIONWhich means it can be... What Build Tools Do The processing step.WHY A BUILD EXISTSSource code uses features, syntax and structure that... What a Design System Is Beyond a component library.WHAT IT INCLUDESDesign tokens Components Patterns, combining... Working With Angular Effectively Practical use.WHAT TO LEARN FIRSTComponents and templates Services and dependency injection... Working With Dates, Numbers and Currency Formatting and correctness.WHAT GOES WRONG WITH DATESTime zones Formats differing by locale... Working on Frontend Teams: Everything That Matters, Briefly The summary.ESTABLISH FORMATTING, LINTING, TYPE CHECKING AND TESTS IMMEDIATELYIntroducing them...
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot