11 Best PHP Blog Scripts and Blogging Platforms

Are you looking to start an independent blog or add a business blog to your website? Blogs are the most reliable means of growing a business and boosting revenue. They are the best way of letting visitors know what your business is about. In addition to help you generate leads, blogs build trust in existing…

Static Site Generators: A Beginner’s Guide

The Jamstack (JavaScript, APIs, and Markup) is increasingly becoming the development stack of choice on the Web. The title on the Jamstack website suggests that the Jamstack is “the modern way to build websites and apps” and that it “delivers better performance”.Performance is certainly one of the benefits the Jamstack brings to the table, together with better security, scalability, and developer experience. Sites built on this type of architecture make use of pre-rendered static pages served over CDNs, can get data from multiple sources, and replace traditional servers and their databases with micro service APIs.
What makes possible the creation of static sites quickly and relatively painlessly are static site generators (SSGs).
There are tons of static site generators in a range of programming languages, such as JavaScript, Ruby, Go, and more. You’ll find an exhaustive, unfiltered list on staticsitegenerators.net, but if you’d like something more manageable, check out the Jamstack website”s list, where you can filter static site generators by name or by the number of GitHub stars.
In this article, I’m going to list seven popular static site generators and their main features, so that you can form a better idea of which one among them would be a good fit for your project.
What Are Static Site Generators?
A common CMS (content management system) — like WordPress, for instance — builds the web page dynamically as it’s being requested by the client: it assembles all the data from the database, and processes the content through a template engine. In contrast, while static site generators also process pages through a template engine, they handle the build process before the pages are requested by the client, meaning that they’re ready to serve when requested. All that’s hosted online is static assets, which makes sites much more lightweight and faster to serve.
To learn more about the differences between a traditional CMS and a static site generator, and about the benefits of using an SSG, check out Craig Buckler’s article on “7 Reasons to Use a Static Site Generator”.
But, what about all the good things that come with CMSs, like content creation and update by non developers, team collaboration around content, and so on? Enter the headless CMS.
A headless CMS is one that has only has a back end. There’s no front end to display the content. Its only job is to manage content, but it also provides an API that another front end can use to retrieve the data entered into it.
This way, the editorial team, for example, can continue working from their familiar, user-friendly admin interface and the content they produce or update is just one data source among others that static site generators can access via the exposed API. Popular headless CMS software include Strapi, Sanity, and Contentful. Also, WordPress has a REST API that allows devs to use it as a headless CMS.
So, the modern Jamstack tooling makes it possible to build a statically-served website and still get the benefits of a content management system.
Now, let’s go through some static site generator options.
1. Gatsby

Gatsby is a full-blown framework for building static websites and apps. It’s built in React and leverages GraphQL for manipulating data. If you’re curious and want to delve deeper, check out “Getting Started with Gatsby: Build Your First Static Site” on SitePoint and the docs on the Gatsby website.

Here are some of Gatsby’s strong points:
With Gatsby you get to work with the latest web technologies — with React, webpack, modern JS, CSS and so on all ready for you to just start coding your site.
Gatsby’s rich plugin ecosystem allows you to use any kind of data you prefer from one or more sources.
Easy deployment and scalability, which is mainly due to the fact that Gatsby builds static pages that don’t require complicated setups.
Gatsby is a progressive web apps (PWA) generator:
You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. — Gatsby website

gatsby-image combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites.
Plenty of starter sites are available for you to grab freely and customize.
2. Next.js

Next is a versatile framework for the creation of server-rendered or statically exported JavaScript apps. It’s built on top of React and is created by Vercel.
To create a Next app, run the following command in your terminal:

npx create-next-app nextjs-blog –use-npm –example “https://github.com/vercel/next-learn-starter/tree/master/learn-starter”

cd into nextjs-blog, your newly created directory, and type the command to open your Next JS app’s development server on port 3000:

npm run dev

To check that everything works as expected, open http://localhost:3000 in your browser.
Next.js has great docs, where you can learn more about building and customizing your Next-based apps.
Here are a number of Next’s best features:
Next renders on the server by default, which is great for performance. For a discussion of the pros and cons of server-side rendering, check out this article by Alex Grigoryan on Medium.
No setup necessary: automatic code-splitting, routing and hot reload out of the box.
Image optimization, internationalization, and analytics.
Great docs, tutorials, quizzes and examples to get you up and running from beginner to advanced user.
Built-in CSS support.
Tons of example apps to get you started.
3. Hugo

Hugo is a very popular static site generator with over 49k stars on GitHub right now. It’s written in Go, and advertises itself as being the fastest framework for building websites. In fact, Hugo comes with a fast build process, which makes building static websites a breeze and works great for blogs with lots of posts.
The docs are great and on the platform’s website you’ll find a fantastic quickstart guide that gets you up and running with the software in no time.
Here are some of Hugo’s most loved features:

Designed and optimized for speed: as a rule of thumb, each piece of content renders in about one millisecond.
No need to install extra plugins for things like pagination, redirection, multiple content types, and more.
Rich theming system.
Shortcodes available as an alternative to using Markdown.
Since December 2020, Hugo offers Dart Sass support, and a new filter to overlay an image on top of another — Hugo 0.80: Last Release of 2020!
4. Nuxt.js

Nuxt.js is a higher-level framework built with Vue.js that lets you create production-ready web apps. With Nuxt, you can have:
Server-side rendering for your website, also called universal or isomorphic mode. Nuxt uses a Node server to deliver HTML based on Vue components.
Static site generation. With Nuxt, you can build static websites based on your Vue application.
Single-page apps (SPAs). Nuxt gives you the configuration and the framework to build your Vue-based SPA.
Creating Nuxt-based websites can be done super quickly. Here’s the Hello World example on the Nuxt website. You can download it on your machine or play with it on Codesandbox to get started.
Here are some of Nuxt.js’s features:
Great performance: Nuxt-based apps are optimized out of the box.
Modular: Nuxt is built using a powerful modular structure. There are more than 50 modules you can choose from to speed up your development experience.
Relatively easy learning curve. Nuxt is based on Vue, which is a framework that makes it quick and painless to get started.
Integrated state management with Vuex.
Automatic Code Splitting.
Cutting-edge JavaScript code transpilation.
Bundling and minifying of JS and CSS.
Managing element (, , etc.).
Pre-processor: Sass, Less, Stylus, etc.
5. Jekyll

Jekyll‘s simplicity and shallow learning curve make it a popular choice with 42k+ stars on GitHub at the time of writing. It’s been around since 2008, so it’s a mature and well supported piece of software.
Jekyll is built with Ruby. You write your content in Markdown, and the templating engine is Liquid. It’s ideal for blogs and other text-heavy websites. Jekyll is also the engine that powers up GitHub Pages, which means that you can host your Jekyll site on GitHub Pages for free, “custom domain name and all”.
Great features Jekyll has to offer include:
simplicity
free hosting on GitHub Pages
great community that takes care of maintenance and the creation of themes, plugins, tutorials and other resources
6. Eleventy

Eleventy, often considered as the JavaScript alternative to Jekyll, introduces itself as “a simpler static site generator”. Eleventy is built on native JavaScript, no frameworks (although you can use your favorite one, if you so choose), has a default zero configuration setup approach, and lets you use the templating engine that you prefer.
To quickly get up and running with Eleventy, check out Craig Buckler’s “Getting Started with Eleventy”, Raymond Camden’s “11ty Tutorial: Cranking Your Jamstack Blog Up to 11”, and Tatiana Mac’s “Beginner’s Guide to Eleventy”, or head over to the getting started docs pages on the Eleventy website.
Some nice features include:
simplicity and performance
community-driven
flexible templating system
fast build times
7. VuePress

VuePress is a Vue-powered static site generator. Its default theme is optimized for writing technical docs, so it works great for this type of site right out of the box. Its current, stable version at the time of writing is 1.8.0, but if you’re curious about the breaking changes that are in the works, check out version 2 alpha on GitHub.
A VuePress site works as an SPA that leverages the power of Vue, Vue Router and webpack.
To get started with VuePress, you need Node.js v.10+ and optionally Yarn Classic.
For a quick VuePress setup, use the create-vuepress-site generator by opening your terminal in your directory of choice and running either of the following commands, depending on whether you’re using Npm or Yarn:
Npm:

npx create-vuepress-site [optionalDirectoryName]

Yarn:

yarn create vuepress-site [optionalDirectoryName]

After you’ve answered a few configuration questions, you should see the new website file structure in your chosen folder.
Head over to the VuePress Guide for more details.
Here are some great features that VuePress has to offer:
Setting up your VuePress-based site is quick and you can write your content using Markdown.
VuePress is built on Vue, which means that you can enjoy the web experience of Vue, webpack, the possibility of using Vue components inside Markdown files and of developing custom themes with Vue.
Fast loading experience: VuePress static sites are made of pre-rendered static HTML and run as an SPA once they’re loaded in the browser.
Multilanguage support by default with i18n.
Nuxt.js or VuePress?
Both Nuxt.js and VuePress are built on top of Vue.js and let you create static websites. So, which one is to be preferred over the other?
Let’s say that Nuxt.js can do everything VuePress does. However, in essence, Nuxt is best suited for building applications. VuePress, on the other hand, is ideal for creating static documentation websites that display content written in Markdown.
In short, if all you need is a documentation site or a very simple blog in Vue.js, consider reaching out for VuePress, as Nuxt would be overkill.
How to Choose a Static Site Generator
With all the options available, it’s easy to feel paralyzed when it comes to choosing a static site generator that fits the bill. There are some considerations that could help you sieve through what’s on offer.
Your project’s requirements should throw some light on the features you should be looking for in your SSG.
If your project needs lots of dynamic capabilities out of the box, then Hugo and Gatsby could be a good choice. As for build and deploy time, all of the SSGs listed above perform very well, although Hugo seems to be the favorite, especially if your website has a lot of content.
Is your project a blog or a personal website? In this case Jekyll and Eleventy could be excellent choices, while for a simple documentation website VuePress would be a great fit. If you’re planning an ecommerce website, you might want to consider which SSG fits in well with a headless CMS for store management. In this case, Gatsby and Nuxt could work pretty well.
One more thing you might want to consider is your familiarity with each of the SSG languages. If you program in Go, then Hugo is most likely your preferred choice. On the other hand, if JavaScript is your favorite programming language, you’re spoilt for choice: Eleventy is built in pure JS, Next and Gatsby are built on top of React, while Nuxt and VuePress are built in Vue.
With regard to stuff like great documentation, strong community and support, all of the static site generators I listed figure among the most popular.

Creating Directionally Lit 3D Buttons with CSS

Creating Directionally Lit 3D Buttons with CSS – SitePointSkip to main contentFree JavaScript Book!Write powerful, clean and maintainable JavaScript.RRP $11.95 I’m not too sure how I stumbled into this one. But something led me to this tweet:

Has anyone done this directional lighting cursor interaction with CSS? pic.twitter.com/zLL7Sk6kW5
— Jed Bridges (@JedBridges) July 1, 2020

And, to me, that’s a challenge.
The button design is neat. But I didn’t want to do a direct copy. Instead, we decided to make a “Twitter” button. The idea is that we create an almost transparent button with a social icon on it. And then that social icon casts a shadow below. Moving our mouse across the button shines a light over it. Pressing the button pushes it onto the surface. Here’s the final result:

Directional Lighting 3D CSS Twitter Button 🐦
👉 https://t.co/qpfzEwUMey via @CodePen pic.twitter.com/zWfwtPaixo
— Jhey 🐻🛠 (@jh3yy) January 30, 2021

In this article, we’re going to look at how you can make it too. The cool thing is, you can swap the icon out to whatever you want.
The Markup
My first-take approach for creating something like this is to scaffold the markup. Upon first inspection, we’ll need to duplicate the social icon used. And a neat way to do this is to use Pug and leverage mixins:
mixin icon()
svg.button__icon(role=’img’ xmlns=’http://www.w3.org/2000/svg’ viewbox=’0 0 24 24′)
title Twitter icon
path(d=’M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z’)

Here, we’ve created a mixin for rendering an SVG of the Twitter icon. This would render the Twitter icon if we invoke it like so:
+icon()

Doing that will give us a big Twitter icon.

See the Pen 1. Render An Icon by SitePoint (@SitePoint)on CodePen.

Because social icon sets tend to use the same “0 0 24 24” viewBox, we could make the title and path arguments:
mixin icon(title, path)
svg.button__icon(role=’img’ xmlns=’http://www.w3.org/2000/svg’ viewbox=’0 0 24 24′)
title= title
path(d=path)

Then our Twitter icon becomes
+icon(‘Twitter Icon’, ‘M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z’)

But, we could pass it a key — and then have the paths stored in an object if we have many icons we wanted to use or repeat:
mixin icon(key)

const PATH_MAP = {
Twitter: “M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z”
}
svg.button__icon(role=’img’ xmlns=’http://www.w3.org/2000/svg’ viewbox=’0 0 24 24′)
title= `${key} Icon`
path(d=PATH_MAP[key])

+icon(‘Twitter’)

This can be a neat way to create an icon mixin to reuse. It’s a little overkill for our example, but worth noting.
Now, we need some markup for our button.
.scene
button.button
span.button__shadow
+icon(‘Twitter’)
span.button__content
+icon(‘Twitter’)
span.button__shine

It’s always good to be mindful of accessibility. We can check what our button gives off by checking the Accessibility panel in your browser’s developer tools.

It might be a good idea to put a span in for our button text and hide the icons with aria-hidden. We can hide the span text too whilst making it available to screen readers:
.scene
button.button
span.button__shadow
+icon(‘Twitter’)
span.button__content
span.button__text Twitter
+icon(‘Twitter’)
span.button__shine

We’ve got different options for applying those aria-hidden attributes. The one we’ll use is changing the mixin code to apply aria-hidden:
mixin icon(key)

const PATH_MAP = {
Twitter: “…path code”
}
svg.button__icon(role=’img’ aria-hidden=”true” xmlns=’http://www.w3.org/2000/svg’ viewbox=’0 0 24 24′)
title= `${key} Icon`
path(d=PATH_MAP[key])

Another neat way with Pug is to pass through all attributes to a mixin. This is useful in scenarios where we only want to pass some attributes through:
mixin icon(key)

const PATH_MAP = {
Twitter: “…path code”
}
svg.button__icon(role=’img’ xmlns=’http://www.w3.org/2000/svg’ viewbox=’0 0 24 24′)&attributes(attributes)
title= `${key} Icon`
path(d=PATH_MAP[key])

If we check the Accessibility panel again, our button only reads “Twitter”. And that’s what we want!
The Styles
Here’s the part you came for — how we style the thing. To start, we’ve dropped this in:
* {
transform-style: preserve-3d;
}

That allows us to create the 3D transforms we need for our button. Try switching that off in the final demo and you’ll see that everything breaks.
Let’s hide the span text from our eyes. We can do this in many ways. One recommended way to hide an element from our eyes, but not those of the screenreader, is to use these styles:
.button__text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

Before we start working on our button, we’re going to tilt the scene. We can do this using a transform. Here we chain the transform to get it into the position we want. I spent a bit of time tinkering with values here on live stream to get it close to the original:
.scene {
height: var(–size);
position: relative;
width: var(–size);
transform: rotateX(-40deg) rotateY(18deg) rotateX(90deg);
}

You’ll notice a size variable there too. We’re going to drive certain things for our button with CSS variables. This will make it handy for tinkering with values and the effect. Usually, we’d put these under the scope they’re required in. But, for demos like this, putting them under the :root at the top of our file makes it easier for us to play with.
:root {
–blur: 8px;
–shine-blur: calc(var(–blur) * 4);
–size: 25vmin;
–transition: 0.1s;
–depth: 3vmin;
–icon-size: 75%;
–radius: 24%;
–shine: rgba(255,255,255,0.85);
–button-bg: rgba(0,0,0,0.025);
–shadow-bg: rgba(0,0,0,0.115);
–shadow-icon: rgba(0,0,0,0.35);
–bg: #e8f4fd;
}

These are the variables we’re working with, and they’ll make sense as we build up our button.
The Button
Let’s move on to the button! The button element is going to fill the scene element. We could have applied the sizing and transforms directly on the button. But if we were to introduce other buttons and elements, we’d have to transform and size them all. This is something to be mindful of with CSS in general. Try to make your container elements dictate the layout:
.button {
appearance: none;
background: none;
border: 0;
cursor: pointer;
height: 100%;
outline: transparent;
position: absolute;
width: 100%;
}

Here we strip the button styles. And that gives us this.

See the Pen 9. Strip Button Styles by SitePoint (@SitePoint)on CodePen.

Next, we need to create a common starting point for the button content and the shadow. We can do this by giving each element absolute positioning. The content will have a 3D translate based on the depth variable we defined before:
.button__content,
.button__shadow {
border-radius: var(–radius);
display: grid;
height: 100%;
place-items: center;
position: absolute;
width: 100%;
}
.button__content {
transform: translate3d(0, 0, var(–depth));
}

Note how we’re also making use of the –radius variable too.

See the Pen 10. Give The Button Depth by SitePoint (@SitePoint)on CodePen.

It’s hard to distinguish between the two icons at this stage. And now’s a good time to style them. We can apply some basic icon styling and use a scoped fill for each SVG icon:
.button__content {
–fill: var(–icon-fill);
}
.button__shadow {
–fill: var(–shadow-fill);
}

.button__icon {
height: var(–icon-size);
fill: var(–fill);
width: var(–icon-size);
}

It’s getting there! The icons aren’t the same size at the moment, though. We’ll get to that.

See the Pen 11. Apply Scoped Fill by SitePoint (@SitePoint)on CodePen.

Let’s get the button press in place. This part is really quick to integrate:
.button__content {
transition: transform var(–transition);
}
.button:active {
–depth: 0;
}

That’s it! Using scoped CSS variables, we’re saying remove the z-axis translation on :active. Adding the transition to the transform stops it from being so instant.

See the Pen 12. Press on :active by SitePoint (@SitePoint)on CodePen.

All that’s left to do is style the button layers and the shine. Let’s start with the shadow:
.button__shadow {
background: var(–bg-shadow);
filter: blur(var(–blur));
transition: filter var(–transition);
}
.button:active {
–blur: 0;
}

Another scoped style here. We’re saying that when we press the button, the shadow is no longer blurred. And to blur the shadow, we use the CSS filter property with a blur filter — the value of which we defined in our CSS variables. Have a play with the –blur variable and see what happens.

See the Pen 13. Reduce Blur on Hover by SitePoint (@SitePoint)on CodePen.

For the content layer, we’re going to use a background color and then apply a backdrop filter. Much like filter, backdrop-filter is a way for us to apply visual effects to elements. A common use case currently is to use blur for “Glassmorphism”:
.button__content {
backdrop-filter: blur(calc(var(–blur) * 0.25));
background: var(–button-bg);
overflow: hidden;
transition: transform var(–transition), backdrop-filter var(–transition);
}

We use the value of –blur and apply a transition for backdrop-filter. Because of the way we scoped our –blur variable on :active, we get the transition almost for free. Why the overflow: hidden? We’re anticipating that shine element that will move around the button. We don’t want it wandering off outside, though.

See the Pen 14. Styling Content Layer by SitePoint (@SitePoint)on CodePen.

And now, the last piece of the puzzle— that light shine. This is what’s been causing the icons to be a different size. Because it has no styles, it’s affecting the layout. Let’s give it some styles:
.button__shine {
–shine-size: calc(var(–size) * 0.5);
background: var(–shine);
border-radius: 50%;
height: var(–shine-size);
filter: blur(var(–shine-blur)) brightness(1.25);
position: absolute;
transform: translate3d(0, 0, 1vmin);
width: var(–shine-size);
}

That absolute positioning will sort out the icon sizing. Applying a border radius will make the spotlight round. And we use filter again to give the blurry spot light effect. You’ll notice we’ve chained a brightness filter on the end there to brighten things up a bit after they’re blurred.

See the Pen 15. Styling Shine by SitePoint (@SitePoint)on CodePen.

Using the 3D translation ensures that the shine sits above the button, which it would do. This way, there’s no chance of it getting cut by z-fighting with other elements.
That’s all we need for the styles for now. Now it’s time for some scripts.
Script
We’re going to use GreenSock here for convenience. They have some neat utilities for what we want. But, we could achieve the same result with vanilla JavaScript. Because we’re using scripts with type “module”, we can take advantage of SkyPack.
import gsap from ‘https://cdn.skypack.dev/gsap’

And now we’re ready to start tinkering. We want our button to respond to pointer movement. The first thing we want is to translate the shine as if it follows our pointer. The second is to shift the button depending on where our pointer is.
Let’s grab the elements we need and set up some basic event listeners on the document:
import gsap from ‘https://cdn.skypack.dev/gsap’

const BUTTON = document.querySelector(‘.button’)
const CONTENT = document.querySelector(‘.button__content’)
const SHINE = document.querySelector(‘.button__shine’)

const UPDATE = ({x, y}) = > console.info({x, y})

document.addEventListener(‘pointermove’, UPDATE)
document.addEventListener(‘pointerdown’, UPDATE)

Try moving your pointer around in this demo to see the valuables we get returned for x and y:

See the Pen 16. Grabbing Elements and Creating Event Listeners by SitePoint (@SitePoint)on CodePen.

This is the trickiest bit. We need some math to work out the shine position. We’re going to translate the shine after its initial reset. We need to first update the shine styles to accommodate this. We’re using the scoped CSS variables –x and –y. We give them a fallback of -150 so they’ll be out of shot when the demo loads:
.button__shine {
top: 0;
left: 0;
transform: translate3d(-50%, -50%, 1vmin) translate(calc(var(–x, -150) * 1%), calc(var(–y, -150) * 1%));
}

Then, in our update function we calculate the new position for the shine. We’re basing this on a percentage of the button size. We can calculate this by subtracting the button position from our pointer position. Then we divide that by the position. To finish, multiply by 200 to get a percentage:
const BOUNDS = CONTENT.getBoundingClientRect()
const POS_X = ((x – BOUNDS.x) / BOUNDS.width) * 200
const POS_Y = ((y – BOUNDS.y) / BOUNDS.height) * 200

For example, POS_X:
Grab pointer position x.
Subtract button position x.
Divide by button width.
Multiply by 200.
We multiply by 200 because the shine is half the size of the button. This particular part is tricky because we’re trying to track the pointer and map it into 3D space.
To apply that to the button, we can set those CSS variables using gsap.set. That’s a GSAP method that works as a zero second tween. It’s particularly useful for setting values on elements:
gsap.set(SHINE, {
‘–x’: POS_X,
‘–y’: POS_Y
})

But, if we want to take it one step further, we can use a quickSetter from GSAP, which would be better for performance in real-world scenarios where we’re making lots of updates:
const xySet = gsap.quickSetter(SHINE, ‘css’)

xySet({
‘–x’: POS_X,
‘–y’: POS_Y
})

That makes our update function look something like this:
const UPDATE = ({x, y}) = > {
const BOUNDS = CONTENT.getBoundingClientRect()
const POS_X = ((x – BOUNDS.x) / BOUNDS.width) * 200
const POS_Y = ((y – BOUNDS.y) / BOUNDS.height) * 200
xySet({
‘–x’: POS_X,
‘–y’: POS_Y
})
}

The accuracy of following the pointer would need more calculations to be precise. Have a play with this demo where the overflow on the button is visible and the shine is more prominent. You can see how the shine element loses its tracking.

See the Pen 17. Translating the Shine Playground by SitePoint (@SitePoint)on CodePen.

This demo puts everything where it should be.

See the Pen 18. Translating the Shine by SitePoint (@SitePoint)on CodePen.

Last feature. Let’s shift the button for an added touch. Here, we’re going to base the shift of the button on pointer position. But, we’re going to limit its movement. To do this, we can use another GSAP utility. We’re going to use mapRange. This allows us to map one set of values to another. We can then pass a value in and get a mapped value back out.
First, we’ll define a limit for movement. This will be a percentage of the button size:
const LIMIT = 10

Now, in our update function we can calculate the percentage of shift. We do this by mapping the window width against the limit. And we input our pointer position to get the mapped percentage back:
const xPercent = gsap.utils.mapRange(
0,
window.innerWidth,
-LIMIT,
LIMIT,
x
)

In this block we’re mapping the range of 0 to window.innerWidth against -10 to 10. Passing pointer position x will give us a value between -10 and 10. And then we can apply that percentage shift to our button. We do the same for vertical shift and this gives us an update function like the following:
const buttonSet = gsap.quickSetter(BUTTON, ‘css’)
const xySet = gsap.quickSetter(SHINE, ‘css’)
const LIMIT = 10

const UPDATE = ({x, y}) = > {
const BOUNDS = CONTENT.getBoundingClientRect()
const POS_X = ((x – BOUNDS.x) / BOUNDS.width) * 200
const POS_Y = ((y – BOUNDS.y) / BOUNDS.height) * 200
xySet({
‘–x’: POS_X,
‘–y’: POS_Y
})
const xPercent = gsap.utils.mapRange(
0,
window.innerWidth,
-LIMIT,
LIMIT,
x
)
const yPercent = gsap.utils.mapRange(
0,
window.innerHeight,
-LIMIT,
LIMIT,
y
)
buttonSet({
xPercent,
yPercent,
})
}

That’s it!
That’s how you create a directional lit 3D button with CSS and a little scripting. The cool thing is that we can make changes with relative ease.
For the final demo, I’ve added some extra details and changed the icon. You might recognize it.

See the Pen 20. SitePoint Button by SitePoint (@SitePoint)on CodePen.

As always, thanks for reading. Wanna see more? Come find me on Twitter or check out the the live stream!

Jhey makes awesome things for awesome people! He’s a web developer with almost 10 years of experience. Working with and for names such as Eurostar, Uber, NearForm, Barclaycard, ATG, O2, and M&C Saatchi.

Jhey thrives on bringing ideas to life. He takes pride in crafting innovative solutions with polished user experiences. This whilst possessing a keen eye for design, accessibility, and well-structured code.

He’s a CodePen advocate and shares attention-catching demos over on Twitter. New books out now!Get practical advice to start your career in programming!Master complex transitions, transformations and animations in CSS! Latest Remote JobsDevOpsPingthings, Inc.kubernetesdocker

The Differences in Web Hosting (Go with the Happy Path)

One of our readers checked out “Helping a Beginner Understand Getting a Website Live” and had some follow up questions specifically about hosting providers. Here’s what they asked: What’s the difference between hosting providers? For example, what is the difference between GoDaddy and Hostgator, which seems like “traditional” web hosting providers, to others like Heroku, Digital…

12 Best WordPress Themes for Your 2021 Projects

This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.Virtually any WordPress theme you choose will have its advantages and limitations. Naturally, you’ll want to look for a theme that has a maximum number of the former and few or none of the latter.
Finding the “best” among many is not without its challenges. Because there are so many popular WordPress themes on the market today, sifting through them to find exactly what you’re looking for can be a daunting task, not to mention a time-consuming one.
The purpose of this article is to make the search easy for you. Here, we’re presenting you with 12 top WordPress themes for 2021 — more than one of which could be precisely the one for you.
Instead of a lengthy search, the only problem you may encounter now is deciding among two or three great WordPress themes — unless, of course, there’s one that obviously stands out above the rest.
That said, let’s give it a try.

With its more than 40 core web design features, BeTheme easily qualifies as the biggest WordPress theme on the market today, and Be’s more than 200,000 sales can attest to its popularity and the quality of its performance.
While you’re unlikely to need to take advantage of all of those core features for a given project, the message is that if there’s a design aid you need, you’ll readily find it in this popular theme.
Some Highlights:
Be’s library of 600+ professionally-crafted prebuilt websites guarantees that any project you may be considering will get off to a fast start. These pre-built websites are attractive, customizable, responsive, and cover all the major industries, many small business niches, and all the popular website types or styles.
Be’s Muffin Builder, Admin Panel, Shortcode Generator and Shortcode Library give you maximum design flexibility and negate any need for coding.
The Layout Generator enables you to design a website page from scratch. Plus, there’s a wealth of color, font, grid, and header options and special effects.
Click on the banner to find out everything you’ll ever need to know about BeTheme and each of its powerful core features.

When a theme is designed with perfection in mind, you might find it a bit intimidating to get to know and use. That’s not the case with Total. In addition to being straightforward to work with, you can disable any feature you won’t be needing for your project, so there’s nothing to get in the way or become a distraction.
With respect to theme flexibility, Total’s Dynamic Template Function has it in spades. You can customize a layout exactly as you want to.
The Theme Customizer gives you even more options and flexibility, as it allows you to change colors, column or section widths, fonts, and more.
WPBakery is the page builder of choice, and there are plenty of pre-made demos and page-building modules to work with.
Total is drag and drop and WordPress-plugin and WooCommerce friendly.

You usually can’t go wrong when you select a best-seller, assuming it has the website-building features and tools you’re looking for. It just so happens that with its 450,000 users, Avada is the all-time WordPress theme best seller, so they must have gotten most everything right.
Avada’s building materials include demos you can import with a single click and an impressive array of design elements.
The drag and drop Fusion Builder, Fusion Theme Options, and Fusion Page Options make it possible to create websites quickly, including relatively complex ones.
As good as it is, Avada is only going to improve, and as it does, you’ll receive updates free of charge.
Click on the banner to learn more about how Avada enables you to design and build what you want, as you want it to be.

This ultimate, multipurpose WordPress theme includes every feature and function you’ll need to create awesome high performance websites:
400+ beautiful pre-built websites and templates for any purpose and niche
industry-leading, front-end page builders for easy editing and customizing for Elementor and WPBakery
a rich collection of WooCommerce templates and features for better online shops
a unique tool — TheGem Blocks — with 300+ premium pre-designed section templates to speed up your workflow
TheGem is 5-star rated with a 50,000-strong customer base.

This pixel-perfect, multi-use theme will be a great choice for creative types, agencies, and small businesses.
80.000+ sales to date make Uncode one of ThemeForest’s top sellers
Uncode’s WooCommerce Custom Builder ensures that your online shop or store will provide for great UX
Visiting the site and viewing Uncode’s showcase of user-built websites is a “must” if you want to learn more. Be prepared to be impressed and quite likely inspired.

To call Rey an innovative WordPress theme would be an understatement. Rey is modern, lightweight, and features a selection of genuinely stunning design elements:
it’s easy easy to set up.
it has a library of professionally designed templates is included
it offers powerful integrations into Elementor, WordPress, and WooCommerce, and will take your website-building experience to the next level.
Rey is SEO friendly, developer friendly, and features built-in SVG support.

This highly rated premium WordPress theme, created for more advanced WordPress users, is an excellent choice for beginners as well.
You’ll find a large selection of professionally designed demos and design elements that you can import and put to immediate use.
Popular WordPress plugins supported and included at no cost include Slider Revolution, WooCommerce, WPBakery, and Elementor.
Kalium is responsive, SEO friendly, and GDPR compliant.

XStore is totally focused on WooCommerce, and it’s highly recommended if your next project will be an online store.
The selection of 100+ good-to-go shops is XStore’s most impressive feature.
The XStore package also includes a full Ajax shop, a Single Product page builder, a WooCommerce Email Builder, and more than $500 worth of premium plugins.
XStore was developed by an 8Theme Elite Power Author and has over 55,000+ sales to date.

Typer will convert your blogging website into a powerful, multi-author platform. Front-end publishing, article searches, bookmarks, and recommendations for articles are among Typer’s many useful features.
Typer is Elementor and Gutenberg compatible.
Beautiful user profile and multiple article layout design aids will spruce up your site.
Activity feeds and weekly digests are two other useful features.
Typer was developed by an Elite Author. It’s 5-star rated.

You’re spending too much time answering repetitive questions, and customers are finding your site’s FAQ page a source of irritation and have given it a 1-star rating.
Maybe it’s a good time to invest in KnowAll, which:
provides detailed answers to customers any hour of any day
provides related content suggestions
helps customers formulate their questions through its search capability
Customers will appreciate what KnowAll can do for them and your business will benefit from it.

Pofo is a great match for creative types and agencies. It’s also an ideal choice for creating blogging and portfolio sites.
Pofo is flexible, crazy-fast, and SEO optimized.
Key features include Revolution Slider, WPBakery, 150+ pre-built design elements, and an attractive selection of home and demo pages.
Documentation is online and user support is excellent.

What users like most about this thoroughly modern WordPress theme is trendy demos and its creative design elements and templates.
Hongo will serve you well, whether you plan to use it to create a blogging site, a company site, or an eCommerce store.
Key features include selections of premium plugins and WPBakery shortcodes.
Hongo’s product-related features include compare, quick view, catalog mode, and wish lists.
Documentation is excellent, as is the customer support.
Wrap
2020 was a rough year for many, but any selection from the above listing of top WordPress themes should brighten your mood and put you in a good place for whatever website design challenges you may encounter in 2021.
Since each of these cool WordPress themes features the latest website design trends, there should be at least one that will meet your needs, whether your project is personal or for a corporate entity.
We hope you enjoy your shopping experience.