Bruno Skvorc, Jul 25

Why Is a String Called a String?

Did you know the history of the "string" in computation stretches back all the way to 1944? Come learn why strings are strings, and where they come from!
Adrian Try, Jul 25

The Best Markdown Editors for Mac

Adrian Try covers a selection of the best Markdown editors for Mac, to help you choose which is the best for you.
James Hibbard, Jul 24

How to Bundle a Simple Static Site Using Webpack

You don't need to be working on a fancy, large-scale project to use Webpack. James Hibbard demonstrates how you can use it to bundle a simple static site.
Design & UX
Gabrielle Gosha, Jul 24

4 Photoshop Styles to Lift Your Photos Above the Crowd

Duotones, Muted Black & White, Targeted Blur Effect, and more. Gabrielle has four fresh Photoshop styles to spice up to your repetoire.
Dino Londis, Jul 21

Why the IoT Threatens Your WordPress Site (and How to Fix It)

The Internet of Things has brought unprecedented security challenges to the web. Dino Londis looks at why, and what you can do to protect your site.
Design & UX
Alec McGuffey, Jul 21

What Type of Design Education is Best For You?

Alec McGuffey looks at four types of design education, and helps you figure out which one is the best fit for you.
James Edwards, Jul 20

Instant Form Validation Using JavaScript

This article teaches readers how they can perform instant form validation using JavaScript. The article also explains how a validation polyfill can be made.
Maria Antonietta Perna, Jul 20

GreenSock for Beginners (Part 2): GSAP's Timeline

In Part 2 of her GreenSock (GSAP) tutorial for beginners, Maria Antonietta Perna shows how GSAP timeline makes coding complex animations easier and faster.
Christopher Pitt, Jul 20

How to Write JavaScript-Style Test Watchers in PHP

Chris writes test watchers: auto-compiling PHP from Preprocess files, and auto-testing after every file-change. No need to manually run PHPUnit ever again!
Tahir Taous, Jul 20

6 of the Best Free Contact Form Plugins for WordPress

Forms are essential for most websites. In this article we cover the most popular, regularly updated and free contact form plugins for WordPress available.
Jason Daszkewicz, Jul 19

How to Use AMP with WordPress

Have you used Google's Accelerated Mobile Pages to display your content to mobile audiences? Take a look at some pointers on using AMP with WordPress here!
John Sonmez, Jul 19

The Software Developer's Guide to Salary Negotiation

John Sonmez guides software developers on how to ensure the best possible deal from salary negotiations.
Giulio Mainardi, Jul 18

6 jQuery-inspired Native DOM Manipulation Methods You Should Know

Take a step along the path to library-free development & join Giulio Mainardi for look at six native DOM manipulation methods that were inspired by jQuery.
Design & UX
Nadya Khoja, Jul 18

7 Famous Design Hacks You Can Steal From Star Wars

For all its sci-fi modernism, Star Wars used a lot of classic methods. Nadya has extracted 7 sure-fire design hacks that you can apply to your projects.
Giulio Mainardi, Jul 18

Building a 3D Rotating Carousel with CSS and JavaScript

Giulio Mainardi shows you how to build a 3D rotating carousel using CSS 3D transforms, with some nifty math tricks and some JavaScript to enhance.
Simon Holmes, Jul 17

A Practical Guide to Planning a MEAN Stack Application

From architecture options to wrapping everything in an Express project, Simon Holmes looks at what you need to consider when planning a MEAN stack app.
Alex, Jul 16

21 Excellent Tools & Services for Web Professionals

Take a look at 21 well-reviewed tools and services for developers, designers and entrepreneurs.
Christopher Vundi, Jul 14

Re-Introducing Eloquent's Polymorphic Relationships

Christopher presents Eloquent's polymorphic relationships in a human-friendly way - come learn what they're all about and master this awesome ORM!
Camilo Reyes, Jul 14

The MVC Design Pattern in Vanilla JavaScript

Tired of learning yet another framework? Camilo Reyes teaches you how to implement the MVC design pattern (model-view-controller) in vanilla JavaScript.
Craig Buckler, Jul 13

7 of the Best Code Playgrounds

Craig Buckler lists 7 code playgrounds to experiment with your front-end code. Every developer likes to play with code, which one is your favorite?
Ralph Mason, Jul 13

Grab Our Free Printable Markdown Cheat Sheet

Authors writing for publications are more and more expected to submit their writing in Markdown format, so it pays to be familiar with this simple syntax.
Design & UX
Daniel Schwarz, Jul 13

Punctuation & Grammar: Bridging the Gap Between UX and Copywriting

Daniel Schwarz discusses UX writing, why it's important for designers to be excellent writers, and how punctuation can make copy look and sound appealing.
Graham Cox, Jul 12

Add Social Login via Google & Facebook to Your Single-page App

Adding social login to your SPA needn't be a difficult task. Graham Cox demonstrates how to easily authenticate your users via Google and Facebook.
Design & UX
Alex Walker, Jul 12

SVG Tip: Create a Bold Vector Halftone Graphic in Under 2 Minutes

This is a section from a 500 year old woodcut from perhaps the 'Andy Warhol of woodcut artists' - Albrecht Dürer. Woodcut is an old printing technique where the image is hand engraved into a wooden block by specialist blockcutters. Prints are then taken from the block.

[caption id="attachment_157164" align="alignright" width="187"]Dürer Dürer (Surprisingly, not the
guy from Nickleback.)[/caption]

Woodcuts are always bold and stark in nature because – unlike most painting techniques – there are no mid-tone colors or blends. The paper is either clean white or drenched ink black – there are no gray areas.

However as you can see, Dürer is able to mimic mid-tone grays by building up a fine rendering of linework. In his case, he uses parallel fill lines, but it's possible to get the same effect with cross-hatching, waves, ribbons, arcs, dots and other patterns.

Although it's a very old technique, we still see it everywhere today – from tattoos to beer labels to bank notes. Most of us have admired the beautiful, wavy ribbon linework used on paper money, sometimes called 'guilloché'.

Halftone examples

It also turns out to be perfectly suited to the mathematical precision of SVG – though hand rendering thousands of precision lines by hand may be impractical for many of us. There are professional options available if you're super-serious – Excentro is cool.

But if that's overkill, let's look at a simpler, more affordable solution.

How do I make a Halftone?

HalftonePro is an online service that converts photos into 'halftones' - what the printing industry calls these graphics.

Using this app is relatively simple but the results take some tuning.

  1. IMAGE: Upload your photo. If this is your first time, jump to the 'Preset' menu at the bottom, as it will give you a feel for the app faster.

  2. SHAPE: The 'Shape' menu lets you change the shape that makes up the image – circles, squares, lines, etc.

  3. PATTERN: The 'Pattern' menu is where things get complex. You can choose the grid that your shape adhere to. While I'm not going to bore you by explaining all the sliders here, the 'Vertical elements' slider is probably the most important. This sets the level of detail in your conversion. A setting of 25 is chunky – a setting of 150 is finely detailed. TIP: Don't set Vertical elements higher than about 150 as you'll be creating a HUGE SVG file and may even crash your browser.

  4. COLORS: Pick your palette.

  5. RESIZE: You can guess.

  6. PRESETS: The dozen or so presets provided give you a good sense of what this app can do. You can also save your own custom presets here.

Bowie - Before changes

High contrast images are likely to work best. I uploaded this classic black and white Bowie shot as a test and used the default 'Wave' preset with a 'Vertical elements' setting of 150.