Gatsby & GraphQL: Nodes vs. Edges
Gatsby and GraphQL nodes versus edges explained through graph theory, query shape, pagination, and why Gatsby data often exposes both structures.
Articles
Development, page 13 of 24
This is a very broad category within my articles which encompasses any aspect of web development, from initial design and architecture to coding, testing, and deployment.
Below you will find a subset of articles from my blog specifically about Development. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are four hundred twenty‑six articles collected together for you below.
Gatsby & GraphQL: Nodes vs. Edges. 
HTML Video and the preload Attribute. HTML Video and the
preloadAttributeUnderstand the HTML video preload attribute, including auto, metadata, none, browser behaviour, bandwidth cost, playback expectations, and trade‑offs.
Why You Should Not Use Protocol‑Relative URLs. Why You Should Not Use Protocol‑Relative URLs
Avoid protocol‑relative URLs on modern sites, with reasons around HTTPS, security, performance, browser expectations, and clearer absolute resource loading.
Can I Learn Front‑End Development in 2 Months? Can I Learn Front‑End Development in 2 Months?
Can you learn front‑end development in 2 months? Yes for fundamentals and small projects, no for mastery. Here is what eight focused weeks can realistically do.
Where to Find Jobs in Web Development. Where to Find Jobs in Web Development
Find web development jobs through job boards, aggregators, social networking, cold outreach, freelance routes, contract listings, and better search habits.
Detecting Breakpoints in React Using Chakra UI. Detecting Breakpoints in React Using Chakra UI
Use Chakra UI breakpoints in React with useBreakpoint and ThemeProvider, including responsive interface choices and custom breakpoint configuration.
Optional Chaining in JavaScript (?.). Optional Chaining in JavaScript (
?.)Introduced as part of the ES2020 spec, JavaScript optional chaining takes some of the guesswork and convoluted if statement structuring out of accessing data.
Semantic HTML. Semantic HTML
Semantic HTML explained through meaningful elements, HTML5 structure, header, nav, footer, section, figure, accessibility, and more understandable markup.
Positioning in CSS. Positioning in CSS
Understand CSS positioning with static, relative, absolute, fixed, and sticky values, including containing blocks, layout effects, and common front‑end bugs.
Automatically Submit Sitemaps to Google During Gatsby Build. Automatically Submit Sitemaps to Google During Gatsby Build
You can let Google know that your website (and the content within) has been updated by submitting an updated sitemap automatically via a simple Node.js script.
Margin Collapse in CSS. Margin Collapse in CSS
Understand CSS margin collapse, including vertical margins, parent‑child behaviour, margin transference, why it feels odd, and how to prevent it.
Use CSS to Change the Mouse Cursor. Use CSS to Change the Mouse Cursor
Change the mouse cursor with CSS using built‑in cursor values or custom assets, whilst keeping interaction cues useful and avoiding distracting effects.
Exploring CSS Viewport Units Beyond vw and vh. Exploring CSS Viewport Units Beyond
vwandvhExplore CSS viewport units beyond vw and vh, including vmin, vmax, vi, vb, svh, lvh, and dvh for mobile browser chrome, writing modes, and sizing bugs.
Cleaning up Your JavaScript Code: The Double Bang (!!) Operator. Cleaning up Your JavaScript Code: The Double Bang (
!!) OperatorThe double bang operator turns values into explicit booleans, but it is not always the clearest option. Here's when it helps and when it does not.
Performance Lessons from Small Brighton Websites. Performance Lessons from Small Brighton Websites
Small Brighton websites can still be slow. Here are practical performance lessons on images, scripts, hosting, mobile UX, and maintainable fixes.
Web Development and the Environment. Web Development and the Environment
Web development has an environmental cost, from heavy pages to inefficient infrastructure. This article looks at where teams can reduce the damage.
React vs. Vue vs. Angular. React vs. Vue vs. Angular
Compare React, Vue, and Angular across ecosystem, learning curve, state, templates, team fit, SEO concerns, and how to choose a front‑end framework.
Specificity in CSS. Specificity in CSS
CSS specificity explains why some selectors win and others stubbornly do not. This guide breaks down the rules without making them feel mystical.
