Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Craig's articles
![7 Reasons to Use a Static Site Generator](https://uploads.sitepoint.com/wp-content/uploads/2016/03/1619483568static-site-generators.jpg)
Is a CMS overkill for your next app? Could a static site generator improve performance, management and security? Learn about the benefits of using an SSG.
![ngrok Step-by-Step Guide: Easily Share Your Local Server](https://uploads.sitepoint.com/wp-content/uploads/2015/05/1618802574ngrok-b_result_1200.jpg)
ngrok is a free service that helps you share a site or server running on your local machine. This tutorial shows you how to use it.
![How to Use JSON Data Fields in MySQL Databases](https://uploads.sitepoint.com/wp-content/uploads/2016/04/1616284736db.jpg)
MySQL 5.7+ InnoDB databases and PostgreSQL 9.2+ support JSON document types in a single field. We explore the MySQL 8.0 JSON implementation in more detail.
![How to Simulate Mobile Devices with Device Mode in Chrome](https://uploads.sitepoint.com/wp-content/uploads/2017/02/1615949272mobile-testing.jpg)
Does your web app work in all devices? Testing is a huge job. Learn how to enable Chrome's useful device mode to emulate dozens of mobile devices.
![What is the JavaScript Internationalization API (I18n)?](https://uploads.sitepoint.com/wp-content/uploads/2021/03/1615778552I18n-civ.jpg)
Need to translate your website? Learn how to use the JavaScript Internationalization API (I18n) and how easy it is to implement it in your apps.
![5 Different Ways to Declare Functions in jQuery](https://uploads.sitepoint.com/wp-content/uploads/2011/08/1619486326javascript-functions.png)
There are several ways to define a block of JavaScript functionality. Learn which is the most appropriate one for your particular use case.
![How to Use SVG Image Sprites](https://uploads.sitepoint.com/wp-content/uploads/2013/10/1617930547svg-sprite.png)
Sprites are popular for bundling graphics into a single file. And they can even be made with SVGs! Learn how SVG sprites work and why they're so awesome.
![How to Use PostCSS as a Configurable Alternative to Sass](https://uploads.sitepoint.com/wp-content/uploads/2021/02/1614052561postcss-preprocessor.png)
Sass is handy, but can't do everything. Learn how to use PostCSS to create a custom CSS preprocessor that compiles Sass syntax but also adds extra features.
![Lightweight Autocomplete Controls with the HTML5 Datalist](https://uploads.sitepoint.com/wp-content/uploads/2021/02/1612660068html5-datalist.png)
Too many options in your HTML Select list? Try a Datalist! Learn how to work with this lightweight, accessible, cross-browser autocomplete form control.
![How to Add Scalable Vector Graphics to Your Web Page](https://uploads.sitepoint.com/wp-content/uploads/2012/05/1617069182svg-web-page.jpg)
How should you add scalable vector graphics to a web page? Learn about six different methods, including inlining, image tags, iframes, and CSS backgrounds.
![How to Use WordPress as a Headless CMS for Eleventy](https://uploads.sitepoint.com/wp-content/uploads/2021/01/1611717996wordpress-eleventy.png)
You want to offer static-site benefits to clients, but they want WordPress! Learn how to use Eleventy with WordPress to offer the best of both worlds.
![An Introduction to the Rollup.js JavaScript Bundler](https://uploads.sitepoint.com/wp-content/uploads/2021/01/1611620524rollup-bundler.png)
Snowpack, webpack and Parcel bundle your JS but are hard to custom configure. Rollup.js is faster and more configurable. Learn how to set it up!
![An Introduction to the JavaScript Temporal API](https://uploads.sitepoint.com/wp-content/uploads/2021/01/1610926620js-temporal-api.png)
Date handling in JavaScript? Ugh. It's a mess. But there's hope! Find out what the new JavaScript Temporal API will bring to a browser near you in 2021.
![Records and Tuples: JavaScript’s New Immutable Data Types](https://uploads.sitepoint.com/wp-content/uploads/2021/01/1610417197records-tuples-immutable-js.png)
Are you frustrated by immutability issues in JavaScript? Learn how records and tuples will finally permit robust immutable data storage and comparisons.
![5 JavaScript Tools to Look Out For in 2021](https://uploads.sitepoint.com/wp-content/uploads/2021/01/1610336323js-tools.png)
Got your JavaScript toolset organized for 2021? Not so fast! Check out our predictions for rising stars that are looking hot for 2021.
![Cut, Copy and Paste in JavaScript with the Clipboard API](https://uploads.sitepoint.com/wp-content/uploads/2020/12/1608732487ccp.jpg)
Need to access the OS clipboard using browser JS? Learn how to use the new asynchronous Clipboard API, a better option than the old document.execCommand().
![How to Draw Cubic Bézier Curves on HTML5 SVGs](https://uploads.sitepoint.com/wp-content/uploads/2012/08/1607365801svg-curve.jpg)
The SVG path element offers a range of curve effects, and in this article, Craig Buckler demonstrates how to draw cubic bézier curves.
![How to Draw Quadratic Bézier Curves on HTML5 SVGs](https://uploads.sitepoint.com/wp-content/uploads/2020/12/1607365813svg-curve-2.jpg)
The SVG path element offers a range of curve effects. In his first tutorial, Craig demonstrates how to draw quadratic bézier curves.
![How to Translate from DOM to SVG Coordinates and Back Again](https://uploads.sitepoint.com/wp-content/uploads/2016/08/1606932285coord.jpg)
Mix DOM and vector interactions in SVG, translating from SVG to DOM coordinates and back, and translating to transformed SVG coordinates.
![CSS with SVG: Real World Usage](https://uploads.sitepoint.com/wp-content/uploads/2018/08/1606842070svg-realworld.jpg)
Craig explains how to add CSS styles to SVGs when used as static images, inlined backgrounds and HTML, sprites, HTML content effects and portable files.
![How to Create Complex Paths in SVGs](https://uploads.sitepoint.com/wp-content/uploads/2020/11/1606760620complex.jpg)
Craig Buckler demonstrates more advanced uses of the SVG path element, explaining how each of its various parts actually work.
![Scalable Vector Graphics: Drawing Basics](https://uploads.sitepoint.com/wp-content/uploads/2012/05/1606301957svg.jpg)
Craig Buckler introduces SVG drawing basics, explaining the SVG viewbox, document structure, and how to draw shapes such as lines, circles, and rectangles.
![Core Web Vitals: A Guide to Google’s Web Performance Metrics](https://uploads.sitepoint.com/wp-content/uploads/2020/10/1602776726i2339-02-1200.jpg)
Core Web Vitals are Google's metrics for evaluating real-world web performance. Learn how to optimize for Core Web Vitals and improve both UX and SEO.
![How to Test Responsive Web Design Cross-Browser Compatibility](https://uploads.sitepoint.com/wp-content/uploads/2013/03/1602775800CBT.jpg)
Craig introduces CSS options for setting up a responsive website, including media queries, Flexbox and Grid, and covers tools for testing cross-browser compatibility.
![Eleventy Guide: A Framework-Agnostic Static Site Generator](https://uploads.sitepoint.com/wp-content/uploads/2020/09/160086168211ty.jpg)
Craig Buckler introduces Eleventy (11ty), a Node.js static site generator, showing how to build a simple site with pages and blog/article posts.
![Windows Terminal: The Complete Guide](https://uploads.sitepoint.com/wp-content/uploads/2020/08/1598541084laptop.jpg)
Windows Terminal is an ideal accompaniment to WSL2. It's fast, configurable, looks great, and offers all the benefits of both Windows and Linux development.
![How to Use Deno’s Built-in Tools](https://uploads.sitepoint.com/wp-content/uploads/2020/08/1598232667deno-dev-tools.png)
Learn to use the Deno built-in tools including a linter, test runner, script tools, and many others. We introduce each inclusion and provide usage advice.
![Deno Modules: Usage, Best Practices & Node Module Imports](https://uploads.sitepoint.com/wp-content/uploads/2020/07/1596086356deno-modules.png)
Learn how Deno modules work – the biggest change from Node.js. Find out how to use them, best practices to make your life easier, and what differs from npm.
![How to Install Apache Web Server on Windows](https://uploads.sitepoint.com/wp-content/uploads/2020/07/1593595022mar7-outline-02.jpg)
A step-by-step guide to manually installing the Apache Web Server on Windows, with links to further reading and resources.
![5 Projects to Help You Master Modern CSS](https://uploads.sitepoint.com/wp-content/uploads/2020/03/1583198333master-modern-css.jpg)
Master modern CSS with these project suggestions, starting with the easiest and designed to build a breadth of skill in modern techniques.