Useful technology, techniques and stories from modern web development and design
Entries filed under Web Development. Narrower categories: CSS, Git, Javascript, SCSS, Tutorials, WordPress.
Search visibility starts with a page a crawler can reach and read. Before anyone argues about keywords, it is worth confirming that the routes you have built are actually linked from somewhere, that robots.txt is not quietly excluding a whole directory, and that the sitemap you generate matches the pages that really exist.
Filed under: SEO, Web Development · Permalink
Most of the work a front-end developer does can be done through a visual application, right up until it cannot. Installing a build tool, checking what a server is doing, or moving two hundred files into a new folder structure are all faster typed than clicked.
Filed under: Terminal, Tips, Tutorials, Web Development · Permalink
Git's own documentation is thorough and, at the moment you need it, almost entirely unhelpful. It is organised around commands rather than around the situations people find themselves in, so a developer who has just committed to the wrong branch has to already know which command they are looking for.
Filed under: Git, Showcase, Web Development · Permalink
Editing files directly on a live server is fast until the moment it is catastrophic. A local environment means every change is tested somewhere private first, and a mistake costs a page refresh rather than a public outage.
Filed under: Tutorials, Web Development · Permalink
A mixin is a named block of declarations you can include wherever you need them, optionally with arguments. The value is not that it saves typing, but that it puts one decision in one place: change the mixin and every element using it changes with it.
Filed under: CSS, SCSS, Showcase, Web Development · Tagged awesome, codepen, creative, css, examples, scss · Permalink
Install a valid certificate covering every hostname the site actually answers on, including the www variant if it resolves. A certificate that covers the apex but not the subdomain produces a warning that is more alarming to visitors than no encryption at all.
Filed under: Security, Tips, Tutorials, Web Development · Permalink
Before scalable icon sets, interface symbols were images, and every size and colour variant was another file to produce and cache. Treating icons as glyphs meant a single dependency could serve a whole interface, scale cleanly, and be recoloured with the same CSS that styles text.
Filed under: CSS, Icons, Web Design, Web Development · Permalink
Plugin recommendations date badly, but the categories do not. A content site generally needs help in four places: search metadata, security hardening, caching and performance, and backups. Everything else is specific to the project.
Filed under: Resources, Security, SEO, Web Development, WordPress, WordPress Plugins · Permalink
WordPress decides which template file renders a request through a fixed hierarchy. Sketching which of those files a project actually needs, before writing any of them, prevents the common outcome of one enormous template full of conditional branches.
Filed under: Web Development, WordPress · Permalink
An animated gradient gives a page movement without loading a video or a sequence of images. The whole effect is colour values changing over time, which costs a fraction of what any media file would.
Filed under: CSS, Javascript, Resources, Web Development · Permalink
Web development runs on abbreviations, and most of them are learned by absorption rather than explanation. That works fine until a client, a designer or a new starter is in the room, at which point a shared vocabulary saves a great deal of circling.
Filed under: Web Development · Permalink
A search engine reading a page sees text. It can infer a great deal, but it is inferring. Structured data lets the page state directly that this string is a publication date, that one is an author, and the page as a whole describes an article.
Filed under: SEO, Tips, Web Development · Permalink
A useful bookmark list splits into three parts: places to solve a specific technical problem, places to check how something is supposed to behave, and places to look when the work needs fresh air. Mixing them into one list is why most bookmark folders go unused.
Filed under: Resources, Web Design, Web Development · Permalink
The release began marking HTTP pages that collect passwords or card details as not secure, directly in the address bar. Previously the absence of encryption was communicated by the absence of a padlock, which almost nobody notices.
Filed under: Security, SEO, Web Development · Permalink
For years, layout was built with floats, and a container holding only floated children collapsed to no height at all. The clearfix was the workaround: a generated pseudo-element that cleared the floats and forced the parent to contain them.
Filed under: CSS, Web Development · Permalink