HTML & CSS
Diogo Souza, Aug 29

Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid

Diogo Souza walks through how to convert a traditional, float-based layout into one that harnesses the benefits of CSS Flexbox & Grid — while discussing graceful degradation and progressive enhancement along the way.
Web
Alberto Roura, Aug 28

How to Deploy Apps Effortlessly with Packer and Terraform

As developers, we can easily incorporate DevOps in our daily tasks. With this tutorial you will see how easy is to orchestrate a whole deployment with just a couple of config files.
HTML & CSS
Craig Buckler, Aug 28

How to Create Printer-friendly Pages with CSS

Craig Buckler reviews the art of creating printer-friendly web pages with CSS, showing how to retrofit them to any site, at minimal cost, without affecting or breaking existing functionality — delighting users and raising your site above competitor sites.
Web
SitePoint Team, Aug 27

Case Study: AO.com Builds Single Customer View with MongoDB

We spoke with Jon Vines, Software Development Team Lead at AO.com, about the experience of building the single customer view application, his development philosophy, and the impact it’s having at AO.
HTML & CSS
Craig Buckler, Aug 27

20 Tips for Optimizing CSS Performance

Craig Buckler discusses 20 ways to optimize your CSS so that it’s faster-loading, easier to work with and more efficient, covering analysis tools, CDNs, HTTP/2, CSS3, animations and transitions, fonts, concatenation and minifying, build tools, flexbox, grid, SVG, critical CSS, and more.
Web
Simon Julian, Aug 26

Three ways to grow your traffic and capture audience

Entrepreneur
Simon Julian, Aug 26

Three winning strategies for setting up Google Adsense

JavaScript
Matt Raible, Aug 24

Build a Health Tracking App with React, GraphQL, and User Authentication

I’m going to show you how to build a GraphQL API with Vesper framework, TypeORM, and MySQL. These are Node frameworks, and I’ll use TypeScript for the language. For the client, I’ll use React, reactstrap, and Apollo Client to talk to the API.
HTML & CSS
Craig Buckler, Aug 24

The Benefits of Using CSS Grid for Web Form Layout

Craig Buckler discusses form layout in the age of CSS Grid, discussing the difficulties of laying out forms with floats and flexbox, and demonstrating the benefits of grid in terms of form layout, the possibilities it offers, and how and why to take a progressive enhancement approach to form layout.
Web
SitePoint Team, Aug 23

Mobile Gaming: Build a Security Token Service with Object Storage Service

Through STS, you can issue federated users, who are managed in your local account system, with an access credential that customizes the expiration duration and access permission.
HTML & CSS
Ahmed Bouchefra, Aug 23

CSS Optimization Tools for Boosting PWA Performance

Ahmed Bouchefra shows how to use various tools and related techniques to help build a better PWA by focusing on CSS optimization — demonstrating how to remove unused CSS, inline the critical path CSS, and minify the resulting code.
Blockchain
Michiel Mulders, Aug 23

Smart Contract Safety: Best Practices & Design Patterns

Developing with a security mindset is extremely important as the cost of failure can be high and change can be difficult. It’s recommended to use secure design patterns like rate limiters, exit strategies or circuit breakers to protect your contract against unexpected events.
HTML & CSS
David Attard, Aug 22

CSS and PWAs: Some Tips for Building Progressive Web Apps

In this article on CSS and PWAs, David Attard discusses a number of techniques that can be used when creating the CSS required for the development of PWAs.
HTML & CSS
Craig Buckler, Aug 21

Real World Use of CSS with SVG

Craig Buckler describes various ways to use CSS with SVG, covering the benefits of using SVGs, a range of SVG tools, SVGs as static images, CSS inlined SVG backgrounds, responsive SVG images, HTML-inlined SVG images, SVG sprites, SVG effects on HTML content, and portable SVGs.
Entrepreneur
Nikki Stefanoff, Aug 20

How Hitting the Books Can Help Your Business

Nikki Stefanoff interviews Andrew Hardwick, the Managing Director of Hard Edge — a creative agency focusing on innovative brand communications — to get his thoughts on how entrepreneurs can continue to learn and grow while still staying focused on their business.
HTML & CSS
Ilya Bodrov-Krukowski, Aug 20

Using CSS Transforms in the Real World

Ilya Bodrov explains how CSS transforms can be used in the real world to solve various tasks and achieve interesting results — showing how to adjust elements vertically, create nice-looking arrows, build loading animations and create flip animations.
HTML & CSS
Ahmed Bouchefra, Aug 17

Easy and Responsive Modern CSS Grid Layout

Ahmed Bouchefra shows how to create a responsive modern CSS Grid layout, demonstrating how to use fallback code for old browsers, how to add CSS Grid progressively, and how to restructure the layout in small devices and center elements using the alignment properties.
Entrepreneur
SitePoint Team, Aug 16

5 Top Development Tools that Will Help You Do More in Less Time

Here are 5 great tools and services to make your life as a developer a lot more productive. Bonus content: 3 tips to get your developer skills to the next level.
HTML & CSS
Giulio Mainardi, Aug 16

Redesigning a Card-based Tumblr Layout with CSS Grid

Giulio Mainardi shows how to retrofit a popular, card-based Tumblr layout with CSS grid, demonstrating how to plan for responsive behavior and utilize other cutting edge CSS features such as object-fit: cover, @supports and the :focus-within pseudo-class.
HTML & CSS
Ilya Bodrov-Krukowski, Aug 15

Redesigning a Site to Use CSS Grid Layout

Ilya Bodrov demonstrates how to retrofit a layout with CSS Grid, showing how easy it is to utilize CSS Grid to create robust layouts. He also discusses fallbacks for older browsers, should you need them.
HTML & CSS
Claudio Ribeiro, Aug 14

Variable Fonts: What They Are, and How to Use Them

In this article, Cláudio Ribeiro looks at the exciting new possibilities surrounding variable fonts — now bundled with the OpenType scalable font format — which allows a single font to behave like multiple fonts.
10 COMMENTs
HTML & CSS
Craig Buckler, Aug 14

7 of the Best Code Playgrounds

Craig Buckler lists 7 of the most popular code playgrounds tfor experimenting with your front-end code, such as CodePen and JSFiddle, along with suggestions for playing with back-end code, hosting your own code playground, and even installing an offline code playground in your own browser!
HTML & CSS
Craig Buckler, Aug 13

3D Transformation Functions in CSS

Craig Buckler shows how to add another dimension to your web pages and applications with the new 3D transformation functions and properties in CSS, covering transform, translate, rotations, scaling, perspective and more, along with z-index, browser gotchas, and ideal use cases.
42 COMMENTs
JavaScript
Syed Fazle Rahman, Aug 13

24 JavaScript Libraries for Creating Beautiful Charts

This article provides a quick overview of 24 JavaScript libraries for creating charts and graphs — from heavy-duty libraries like D3.js to some super-simple options for representing data quickly and beautifully.