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.

Jay Raj, Jul 11

Using MySQL with Node.js & the mysql JavaScript Client

Jay Raj shows how to use the mysql module to connect to your database and perform basic CRUD operations, before moving on to some more advanced uses.
Giannis Konstantinidis, Jul 11

6 Free Material Design CSS Frameworks for 2017 Compared

Giannis Konstantinidis lists some great Material Design CSS frameworks and compares them to make it easier for you to choose what best fits your needs.
Jacob McMillen, Jul 11

The Beginner's Guide to Website Staging

Jacob McMillen shows you how to use your web host's staging environment features.
Bruno Skvorc, Jul 11

The Theory of Constraints in PHP

What is the theory of constraints, and can be it be applied to PHP application development? The answer to the latter is oh yes, and for the former, dive in!
Jacco Blankenspoor, Jul 10

How to Create a Portfolio Site That Will Get You Hired

In today’s market competition is fierce, which means you need to stand out. Here's a guide to building a portfolio site that will get people's attention.
Jacob McMillen, Jul 10

5 Best WordPress Site Builders for the Technically Challenged

Jacob McMillen takes a look at five WordPress site builders that enable entrepreneurs to create custom sites even when they can't afford a development team.
Jorge Bucaran, Jul 10

HyperApp: The 1 KB JavaScript Library for Building Front-End Apps

Jorge Bucaran introduces HyperApp, a tiny, 1kb library with a compact API, built-in state management, and unrivaled, small bundle size.
Jacob McMillen, Jul 10

The 5 Best WordPress Themes for SEO Visibility

Jacob McMillen finds some of the best WordPress themes for users who want the greatest SEO benefit.
Design & UX
Tobi Abdulgafar, Jul 10

Here are the 5 Things Great Designers Do Differently

Web and interface designers are becoming a dime a dozen, Tobi explains what great designers do to stand out from the crowd.
Jacob McMillen, Jul 07

6 Essential WordPress Plugins for Solopreneurs

Jacob McMillen looks at six plugins that help solo entrepreneurs, or solopreneurs, automate more of their workflow.
Ralph Mason, Jul 07

Grab Our Free Printable Docker Cheat Sheet

Grab SitePoint's free Docker cheat sheet, which gathers all the commands you’re most likely to need in your Docker workflow.
Jacob McMillen, Jul 07

7 Setup Tips for WordPress Beginners

Check out these tips for WordPress beginners in Jacob McMillen's quickstart guide for new users.
Allan MacGregor, Jul 07

How to Analyze Tweet Sentiments with PHP Machine Learning

Allan takes us on a ride in Machine Learning land with PHP-ML and explains how to develop a tweet sentiment analyzer with it (positive, negative, neutral)
Michael Wanyoike, Jul 06

14 jQuery Live Search Plugins

Display live search results for your search as you type. Michael Wanyoike looks at 14 exceptionally nice jQuery Search plugins to do the hard work for you.