DEV Community: Ayotunde Ikuesan

The best way to start your developer career

Ayotunde Ikuesan — Fri, 19 Aug 2022 11:27:00 +0000

I get this question a lot:

Ayooooo! I wanna get into coding. What languages do you recommend?

Normally, I’d give the standard answer of Python or Javascript — each being a widely adopted language with many great resources available for learning. But lately I’ve been giving that response a little more thought.

In my opinion, the best way to start your developer career is by investing your time and energy into something that inspires you about technology. For example, if you like using apps, learn to make one yourself. If web design interests you, learn how to create a website. If you’re more into algorithms and maths, why not focus on something related to data science or machine learning?

The reason I say this is because from my own personal experience, I feel like focussing on web and mobile app development would have been a better use of my time at uni. Don’t get me wrong, all four years were incredibly valuable for learning theories & concepts, increasing my chances of employability and of course, making good friends. But (speaking only technically), I’ve only used a subset of what I’ve learnt from my degree in the real world and everything I’ve learned about web development since I did via some YouTube videos & online tutorials.

If getting a degree in computer science isn’t looking like an option, or something you’re not interested in, a lot of the online courses available assume no prior programming knowledge. This makes it even easier for beginners to get into coding — if you were worried you needed to know the basics beforehand. Not to mention, these courses are typically much cheaper than a £9000+ per year degree (at least here in the UK). For instance, freeCodeCamp offers a wealth of knowledge and certifications for absolutely no fee whatsoever. People literally use the platform to get the knowledge they need and then get the job they want.

Speaking of which, if you’re completely stuck and don’t know where to begin, I’d recommend taking a look at a few junior level job adverts and taking note of what sort of programming languages and tools they expect you to be familiar with. Find some trends and commonalities in those ads and then, commit to learning that tech! Once you’re comfortable, use those skills to build a portfolio that will demonstrate your abilities to potential employers. The earlier exposure you have to the languages and tools you’ll be working with every day, the better!

If you were looking for some quick and dirty method to start your coding career, this probably isn’t what you wanted to read. Not gonna lie, coding in general is not the most straightforward thing to pick up and instantly become a master at. Even I still question my life choices every time I’m left gazing upon a meaty bug. But it’s the same with anything worthwhile — your time, energy and genuine commitment will be required to succeed. So regardless of whatever you’re seeking to learn, commit to it and you’ll get there. 💪🏾

Privacy first analytics with Cloudflare Web Analytics

Ayotunde Ikuesan — Mon, 02 May 2022 07:41:15 +0000

> “We use cookies to track your activity across the internet and build a personalised profile about your interests, background and location so advertisers can sell you stuff you’re likely to be interested in but don’t actually need. Is that cool?”

No. I’m tired of having to reject all non-essential cookies from almost every single website I visit online. Similarly, when I’m building a website, the last thing I want to do is put anyone else through that burden. However, when I was building my website, I didn’t want to be without a way to track which pages and blog posts were popular and where my visitors were coming from… And I wanted to do it for free.

The natural choice was to go for Google Analytics, but apart from it now apparently being “illegal”, I’d be injecting one of the most invasive tracking cookies into my visitor’s browsers - which I wanted to avoid.

Introducing Cloudflare Web Analytics

The thing is, when something is free, you normally pay for it in some other way. Google Analytics is a free, effective service for tracking a wide array of site metrics, but it does so at the expense of user’s data. Cloudflare Web Analytics on the other hand is a totally free service that does not collect or use any personal data from users. The tool provides exactly all the information I’m looking for:

Page views
Popular browsers, devices & operating systems
Referrers
Geographical location of visitors (by country)
Core Web Vitals (LCP, FID, CLS)

For a low-traffic website like mine, there’s not much else I can ask for.

How does it work?

After signing up for a free account with Cloudflare, there’s two options for getting analytics working on your site.

If your domain’s DNS records are using Cloudflare’s nameservers, then you can simply select your domain from the admin interface and you’re good to go!

If not, then you’ll need to add a lightweight script to your website in order to start tracking.

‹script defer src="https://static.cloudflareinsights.com/beacon.min.js"
    data-cf-beacon='{"token":"your-script-token"}'>
‹script>

If you test on multiple environments, no need to worry, as the tracking only applies to a single hostname you define — i.e. www.yourwebsite.com

The best thing about both of these methods, is that there’s no need for yet another cookie banner to find its way onto the internet! 🙌🏾

Is it enough?

For businesses, marketers and content creators trying to understand user behaviours and drive conversion rates, then it’s likely that Cloudflare Web Analytics won’t be enough. For example, I couldn’t find any options for tracking outbound button clicks. Also, data is restricted to 15 items on any report. So you’ll only see the top 15 pages, browsers, countries and so on, at any one time. Whether or not you decide to use CWA will come down to your own needs and assessment of the tool.

But if you are looking for a simple, free, privacy-focussed tool to track metrics on your website then Cloudflare Web Analytics is a pretty good option. However, if you don't mind paying and want a little more data & extra features, Plausible.io looks like another great option that maintains user's privacy.

Either way, leave the cookies in the cookie jar.

How to optimise remote images in Gatsby

Ayotunde Ikuesan — Mon, 02 May 2022 07:28:28 +0000

GatsbyJS is awesome for creating fast, scalable, static websites that source content from anywhere. Whilst a lot of the major plugins for feeding data into your site support the Gatsby image optimisation plugin (gatsby-plugin-image) out-of-the-box, it’s not the case for all. Luckily for us, it's simple to transform such images and make them utilise that optimising goodness! 🤤

Why bother?

In the relentless pursuit of owning a perfect Lighthouse score for your website, having properly optimised images is only going to help. The file sizes are smaller overall, so it's quicker to load a webpage on devices with a dodgy internet connection. Also, using responsive images that are sized according to the device width, is going to ensure your images look great on all screen sizes. i.e. who wants to wait for an 8K image to load on their 4-inch iPhone SE? If you want to follow the best practices and recommendations for building a modern website, your images have got to be optimised.

So let's get it working for Gatsby!

Update project dependencies

In order to get things working, we need to first update our project dependencies. Run the following command in a Gatsby project directory to get all the necessary packages for optimising images:

yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp

And just in case you're wondering, here's what each plugin does:
gatsby-plugin-image creates responsive, optimised images for our Gatsby site.
gatsby-source-filesystem creates file nodes from our remote images.
gatsby-plugin-sharp handles the processing of our images.
gatsby-transformer-sharp creates the necessary nodes we can query with GraphQL for our site in conjunction with gatsby-source-filesystem.

Next, we should get our source plugin where we'll pull content into our Gatsby site. For this tutorial we'll use gatsby-source-ghost to pull content from a Ghost blog, but feel free to use any other source plugin.

yarn add gatsby-source-ghost

Alternatively, check out this GitHub repo where you’ll find all the dependencies and the completed example project.

Now we just need to add our new plugins to the list of plugins in gatsby-config.js:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
  siteMetadata: {
    siteUrl: "https://www.example.tld",
    title: "gatsby-optimise-remote-images",
  },
  plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-ghost",
      options: {
        apiUrl: process.env.GHOST_API_URL,
        contentApiKey: process.env.GHOST_API_KEY,
        version: "v3",
      },
    },
  ],
}

If you don’t have a Ghost blog already, follow these instructions to set one up on your machine. If you need API keys, this guide will show you what to do. Just be sure to put them into a .env.development file.

Create remote nodes for GraphQL queries

Now with our dependencies installed, we can move on to creating the necessary nodes for our optimised remote images. With this, we can include the nodes in our GraphQL queries and access the necessary data to feed into the GatsbyImage component, which will optimise our images.

Create the file gatsby-node.js if you don't have it already and add in the following code. Peep the comments if you want to know what’s going on! 👀

// gatsby-node,js
const { createRemoteFileNode } = require("gatsby-source-filesystem"); // We'll use this to create the file nodes from the remote images
exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;

  // creates a relationship between GhostPost and the File node for the optimized image
  createTypes(`
    type GhostPost implements Node {
      remote_image: File @link
    }
  `); // change "GhostPost" to whatever type you're using from your source plugin
};
exports.onCreateNode = async ({
  actions: { createNode },
  getCache,
  createNodeId,
  node, }) => {
  // we need to verify that we're using the correct node created by our source plugin so we check its type and if it has a value
  if (node.internal.type === `GhostPost` && node.feature_image !== null) {
    // create the file node
    const fileNode = await createRemoteFileNode({
      url: node.feature_image, // URL of the remote image
      getCache, // Gatsby cache
      createNode, // helper function to generate the node
      createNodeId, // helper function to generate the node ID
      parentNodeId: node.id, // id of the parent node of the file
      node
    });
    // if the file node was created, attach the new node
    if (fileNode) {
      node.remote_image = fileNode.id;
    }
  }
}

Now we can access our new remote images for optimisation in our GraphQL queries! 🎉 Put simply, all that we're doing here is downloading the remote images to the filesystem, so that Gatsby can use the created files and optimise our images for us.

Usage in pages

Adding the optimised images to our site is exactly the same procedure we would use for adding a locally sourced image. We just need to update the GraphQL query. Let's test this out by adding a list of our blog posts to the home page, with their featured images displayed as well. This is where we'll make use of the GatsbyImage component. Replace everything in src/pages/index.js with this:

// src/pages/index.js
import * as React from "react"
import { Link, graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
const IndexPage = ({ data }) => {
  const blogPosts = data.allGhostPost.edges
  return (
    <>
      <h1>Blog Posts</h1>
      <div>
        <ul>
          {blogPosts.map((post, i) => (
            <li key={I}>
              <Link to={post.node.slug}>
                {/* GatsbyImage component to render our optimised image */}
                <GatsbyImage
                  image={post.node.remote_image.childImageSharp.gatsbyImageData}
                  alt={post.node.title}
                />
                <p>{post.node.title}</p>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </>
  )
}
export default IndexPage
export const IndexQuery = graphql`
  query blogListQuery {
    allGhostPost(sort: { fields: [published_at], order: DESC }) {
      edges {
        node {
          slug
          title
          published_at(formatString: "DD MMMM YYYY")
          remote_image {
            childImageSharp {
              # this is the field which we'll pass into the GatsbyImage component
              # we add the DOMINANT_COLOR placeholder to make a nice effect when lazy loading
              gatsbyImageData(placeholder: DOMINANT_COLOR)
            }
          }
        }
      }
    }
  }
`

And that's it! Run yarn develop in your terminal and navigate to http://localhost:8000/ to see it all in action. Don't forget to add some styles to make it all look 🔥

Building my new website with NextJS, Ghost and Tailwind

Ayotunde Ikuesan — Fri, 04 Mar 2022 06:48:16 +0000

For some reason, rebuilding my website from scratch has become some kind of yearly, unforced habit of mine. 2021 was a miss, but now in 2022 we’re back on track. With each iteration, I try to find a way to make some aspect of the site better. It’s a fun little side project I spend way too much time on.

This time, the focus was a little different. It wasn’t so much about making the technical implementation better, but instead, concentrating on one of my favourite hobbies: writing. In 2021 I wrote and published exactly 0 articles. (There’s a trend here.) This year I plan to change that and so I wanted to build myself a platform where I would be proud to publish all of my articles. My website is where I get to exercise pretty much every creative muscle I have by bringing together two passions: coding and writing. And so this is how things went this time around.

From Markdown to Ghost

The previous version of my website had all of its content sourced from Markdown files. Combined with Gatsby it was pretty much the perfect match in terms of managing blog posts and other site data. I used GraphQL and a few Gatsby source/transformer plugins and that was it. It was so simple.

And yet, building up a reliable authoring system was a challenge. If I wanted to schedule a post in advance, then I’d need to set up some GitHub Actions. In order to keep my blog tags consistent, I’d have to remind myself of what tags I’d used previously and make sure the spelling was perfect. Editing a post meant pushing another commit to GitHub… You get the idea. In all honesty those things aren’t a big deal separately, but added together it put me off writing any new posts.

So, given the focus is now on the content, I felt I had to use a CMS for this new version of my site and in my opinion there is no better CMS for blogging than Ghost. Everything about it from the developer documentation to the actual editor itself is so well crafted. All the functionality I could need is right there: scheduling posts, webhooks, extensive tag management. And the platform is so easy to use.

Another thing about Ghost I found beneficial was the fact that it comes with a default set of posts after installing on your machine. This “dummy” content is not just Lorem Ipsum (or, my favourite, Bacon Ipsum ). They’re fully fledged blog posts with headings, images, lists, block quotes and some other fancy elements. This made styling my website even easier to get on with, as I had a ready-made example of almost every possible element. I know it’s not the most advanced feature of any CMS, but it saved a lot of time.

(👀 I’m hosting Ghost on Digital Ocean. If you want to try it out for yourself, here’s a Digital Ocean referral link you can use with $100 credit 🤗)

Building with NextJS

I think the thing that really won me over with Ghost is being able to source content with its Javascript API library. It made working with NextJS even simpler than the previous GraphQL + Gatsby setup. Which is great because I’m still fairly new to the NextJS framework. I switched over from Gatsby for exactly that reason — to learn something new. However, there is definitely a learning curve when you’re already used to doing things a certain way.

For example, the work section of my website is still sourced by Markdown files. By contrast to Gatsby, sourcing and using Markdown in Next feels a lot more convoluted. What was abstracted away into two plugins now has to be re-implemented using multiple libraries and some DIY Javascript. It’s good practice to be honest and thankfully, there was an example to follow. In fact, that turned out to be the case with a lot of what I wanted to do with Next. There are many example projects which look at different functionalities for your site. E.g. adding sitemaps, styling with various CSS frameworks, getting content from different sources, adding comments to blog posts… the list goes on and on. It made the transition from Gatsby to Next a lot smoother.

And of course, opting to go with Next, I still have all the same benefits of a static site as with Gatsby: super speedy, secure and scalable. I haven’t made use of the Incremental Static Generation or preview mode as of yet, but I’m pretty sure these will be straightforward enough to add later on.

(👀 I plan on going more in-depth with the features & differences with NextJS and Gatsby soon. Stay tuned!)

Styles by Tailwind

I’ve being using Tailwind CSS for a while now and each time I work with it, I’m amazed at how simple yet powerful it is at creating completely custom layouts and designs. There’s no wrestling with prebuilt styles like with other CSS frameworks and if you need to configure something it’s usually just a simple change in the config file.

This kind of workflow enables me to work much quicker. With the previous version of my website, I had to style each HTML element in my blog posts and ensure all the styles were responsive. Now (with the help of an additional plugin ) all I need to do is add a prose class where my blog content is and the whole thing is styled up with a nice set of opinionated styles.

The best bit about all of this though is that dark-mode ( prefers-color-scheme version) is enabled by default in Tailwind V3. So all I need to do is add dark: followed by the relevant property value across my components and layouts.

I know the low-level utility vibes aren’t for everybody and that standard CSS still has its usages. But for brand new projects with no other dependencies or strict coding guidelines, Tailwind is my go to.

Going forward

I’m pretty happy with how things turned out this time round with redesigning my website. If another update comes later this year, I’m preempting it’s going to be a lot more iterative. Adding blog comments & reactions is still on my radar, alongside potentially setting up a newsletter and introducing some funky animations.

But at the end of the day, what’s the point in adding all these features if what you’re reading now is the only post I publish in 2022?

So here’s to getting the balance right between writing code and writing stories this year 🍻

…and going outside every once in a while.

Introduction to HTML

Ayotunde Ikuesan — Thu, 29 Oct 2020 18:19:05 +0000

Hypertext Markup Language is the language of the world wide web. Every single webpage in existence eventually boils down to some kind of HTML. This is because it plays a fundamental role in building webpages.

Purpose

HTML defines the structure of a webpage. It does this by making use of different elements which are defined by tags. These elements can describe any number of things including paragraphs, headings, images, lists, tables and more.

For example, the following would define some truly basic content.

<h1>I like cheese</h1>
<p>Oh, how I yearn for the enticing, creamy flavour of dairy's finest.</p>
<p>Just one more bite of that savoury goodness, then I shall be complete.</p>
<p>These are my reasons for my love of cheese:</p>
<ul>
    <li>It's creamy.</li>
    <li>I like yellow food.</li>
    <li>It's fun to look at.</li>
</ul>

<img src="https://source.unsplash.com/gMW2NZ7JGrE/800x400" alt="Some maaaaddd cheese bro.">

That don’t look pretty.

True. If you were to type out the above into a code editor and view it on your browser, you’d probably get some old school Times New Roman abomination and a picture of some maaaaddd cheese. HTML only has one very specific purpose, which as we found out earlier is to define the structure of content on a web page. Making it look like something a little less basic? That task belongs to CSS. But that’s outside our scope here.

Attributes

Taking another look at our example above, you may notice an extra bit of code on that <img> tag. It has a src attribute. In this case, the src attribute defines where the browser should look to source the image from. This could be anywhere — so an image located somewhere on our server, or from another website. Unsplash is a particularly great source for free images.

Attributes can define a wide array of extra bits needed to ensure an element functions correctly. But not all attributes work across all elements. For example: an <img> is commonly coupled with the src and alt attributes. But these would be useless for an <a> (link) element which at its most basic level only needs href to tell the browser where to link to. class is one of the most well known attributes and can be used with the majority of HTML elements. Its purpose is to provide names of ‘classes’ which can then be used for styling and other purposes.

The <head>

You might be thinking:

“Okay, that’s great. I understand HTML defines the structure and presentation of a webpage. Tell me then good sir, where does the title of a page come from?”

To understand this, we need to back up a little bit. The structure of a complete HTML webpage usually looks something like this:

<!DOCTYPE html> 
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>YOUR TITLE HERE!</title>
    </head>
    <body>
        <!-- Page content -->
    </body>
</html>

(Try saving this code in a HTML file and then opening it with your browser to see what the above will look like as a proper webpage.)

Let’s break down each part:

<!DOCTYPE html> — this is the declaration which lives at the top of our file. It tells the browser that this is a HTML file, and the page should be handled as such. It’s mandatory.
<html lang=“en”> — this is the HTML element. Inside here is where we can write the rest of our HTML code. The lang attribute is recommended so the browser knows what language the content is written in.
<body> — here is where we can define the things that will actually render out on our page. Our mad cheese example will live in here.

And so what about the <head>?

In a way, the <head> is special, because it doesn’t actually render any viewable content, but instead describes some things about our webpage. For example:

<meta charset="UTF-8"> — defines the character encoding our webpage is written in.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — tells the browser how to handle the page’s size and any scaling that's needed.
<title>YOUR TITLE HERE!</title> — where we define our page’s title. This will appear on the tabs section of your browser (depending on which one you use) and your browser's history.

That’s really just a subset of what the <head> gets used for though. From here, we can also link to external stylesheets, set the description for our page, set up social media sharing content (i.e. the stuff that appears on Facebook when someone shares a link on their platform), and even inject some Javascript!

This is quite a big subject. If you want to know more, this article from MDN is a great starting point!

Nesting

You’ll notice nesting has been in all of the code examples so far, but let’s talk more about it. Here is where the structure part of HTML becomes important. Although basic, the language does require you to follow some practices when you’re using it.

<ul>
    <li>It’s creamy</li>
    <li>I like things that are yellow</li>
    <li>It’s fun to look at</li>
</ul>

Coming back to our cheesy example, this provides a great demonstration of nesting in action. The <ul> tag denotes an “unordered list”. This will basically render a list of bullet points. However, in order for this to work, we need to add list items <li> within the unordered list. This is syntactically correct and browsers will know how to render this code properly.

Is this really a big deal?

Of course, you might not even notice the effects of a syntax error with HTML. You might even be able to get around most visual bugs with some clever CSS. But these days web browsers are getting smarter and accessibility is increasingly important. Many browsers have the feature of displaying a “reader view” for articles and long form text. If the syntax of the page isn’t correct, this view might appear incorrect. More importantly, tabbing through web pages could be the primary way a user interacts with your site. To ensure they have the best experience possible, it’s important the page makes sense semantically (the elements chosen to structure the webpage) and syntactically (the order those elements are arranged).

Caveats

Even though HTML is one of the most basic languages used in web development, it still comes with a few gotchas! Most elements require an opening and closing tag, but there are some which don’t. These are the elements that don’t necessarily render any text. So <img> for images and <br> for line breaks. In these scenarios, it’s common to leave the element unclosed, like this:

<img src=“https://yourimagesource.jpg”>

If you’re working with React, you have no choice but to close those elements. But that’s something else altogether.

Wrap up

We’ve only just scratched the surface of HTML! There’s a lot more we can go into, but hopefully that’s given you an insight into what it is, what it does and how to use it. For more reading, I’d recommend this other article from MDN.

Until next time.

✌🏾

Adding Tailwind CSS to a Gatsby project

Ayotunde Ikuesan — Thu, 06 Aug 2020 06:50:36 +0000

There are two types of people in this world: those who don’t put a case on their phone and those who put a case, side load apps, run beta versions of an unreleased OS, jailbreak their device and accept tracking cookies. 😬 Cookies aside, sometimes you just need a little customisation to get the most out of something. The same can be said for styling web apps. CSS frameworks like Bulma & Bootstrap give you some awesome styles out of the box, but that’s what your stuck with. If you’re tasked with creating something truly unique, surely there’s another way than just writing 100s of lines of CSS code yourself?

Introducing Tailwind CSS

Yes, it’s another framework, but there is a significant difference with this one. Tailwind works under the basis of “utility classes”. For example, rather than giving you a pre-defined button class which would style your buttons, you can group together a bunch of low-level classes which would render out any kind of button you can think of. Something like this:

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
    Green button
</button>

Conversely, with Bulma for example, you’re likely doing something like this:

<button class="button">
    Simples.
</button>

“Multiple classes instead of a simple, single class? Hogwash I say!”

True. At first it looks a little dicey and completely against the standard way of writing HTML and CSS. Luckily for us, Tailwind also allows you to extract commonly used classes into component classes. So we can get back to our beloved way of writing the web:

<button class="btn btn-green">
    Green button
</button>

<style>
    .btn {
        @apply font-bold py-2 px-4 rounded;
    }

    .btn-green {
        @apply bg-green-500 text-white;
    }

    .btn-green:hover {
        background: #2F855A;
    }
</style>

(Lol, those styles can also exist in a CSS file if you want — more on that later…)

The @apply directive allows us to use Tailwind classes in CSS (really useful if you’ve defined some extra custom stuff in your config), but you can also mix and match with traditional CSS.

Adding to Gatsby

Now we’ve got an idea of what Tailwind is and how it works, let’s add it to a Gatsby project. We’ll be using Tailwind via PostCSS, but other methods are available. If you want to find out more, visit the Gatsby docs. You’ll need a Gatsby project to follow along with. If you don’t have one yet, just run these commands in your terminal to get started:

yarn global add gatsby-cli  # install gatsby-cli globally
gatsby new gatsby-site      # create a new site
cd gatsby-site              # change into our newly created site's directory

Now we’re ready! 🔥💪🏾
Firstly, let’s install the additional dependencies we’re going to need in our project:

yarn add gatsby-plugin-postcss tailwindcss

(If you’re rocking npm, replace those yarn commands above with the following: npm install -g gatsby-cli & npm install gatsby-plugin-postcss tailwindcss)

We’re using PostCSS so we can use the @tailwind directives in our CSS files, alongside all the other directives — like @apply mentioned previously.

Go ahead and add the PostCSS plugin into your gatsby-config.js file:

// gatsby-config.js 

module.exports = {
    plugins: [
        `gatsby-plugin-postcss`,
    ]
}

Now create a postcss.config.js file in the root of your project. This is where we’ll include our reference to Tailwind:

// postcss.config.js

module.exports = () => {
    return {
        plugins: [require('tailwindcss')]
    }
}

Now we just need to include the Tailwind directives in our CSS file, giving us access to all of that utility first goodness! 🤤

Open up layout.css (should be located in:src/components if not, create it and import it in your app’s layout component ). That’s a lot of CSS in there! We can leave this as it is for now, but we need to add some things around it. Begin by adding @tailwind base; in the very first line of the file. Then underneath that mountain of CSS code, add @tailwind components; . Finally, underneath that, add @tailwind utilities;. So you should have something like this:

/* src/components/layout.css */

@tailwind base;

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* ...the rest of the element styles... */

@tailwind components;

.heading {
    @apply font-bold text-4xl; /* a heading with bold font and 2.25rem font size */
}

@tailwind utilities;

Let’s go over those directives!

@tailwind base -- adds base styles offered by Tailwind and any additional plugins, alongside boilerplate CSS
@tailwind components -- adds component classes from Tailwind and any additional plugins
@tailwind utilities -- adds utility classes from Tailwind and, of course, any additional plugins

You’ll notice I’ve also sneaked in a cheeky custom component class there called heading. This is just to demonstrate how easy it is to add reusable component classes in your CSS. Now everything’s installed and configured, let’s use it!

Using Tailwind

This. Is. Easy. Make a new file in your pages directory called demo.js and add the following code to it:

// src/pages/demo.js

import React from "react"

import Layout from "../components/layout"
import SEO from "../components/seo"

const DemoPage = () => (
    <Layout>
        <SEO title="Tailwind Demo" />
        <h1 className="heading">What's up, my people!</h1>
        <p className="tracking-wide">Ain't this sweet?</p>
        <button className="font-bold py-2 px-4 rounded bg-green-500 text-white hover:bg-green-700 block mb-8">Yaaassssss!</button>
        <h2 className="inline-block md:hidden text-xl">Small screen size (full width paragraph)</h2>
        <h2 className="hidden lg:hidden md:inline-block text-xl">Medium screen size (3/4 width paragraph)</h2>
        <h2 className="hidden lg:inline-block text-xl">Large screen size (1/2 width paragraph)</h2>
        <p className="w-full md:w-3/4 lg:w-1/2">
            Look at me! I am a really long paragraph to demonstrate how Tailwind handles responsive layouts. Unfortunately, I have run out of things to say so will now revert to everyone's favourite: <a className="font-bold underline" href="https://baconipsum.com/">Bacon Ipsum!!!!</a> Bacon ipsum dolor amet tail beef ribs prosciutto tenderloin. Leberkas brisket sausage landjaeger shoulder filet mignon. Chislic tail andouille strip steak, short loin turducken pork leberkas prosciutto burgdoggen sausage alcatra bresaola tongue. Kielbasa turkey tongue ground round meatloaf venison.
        </p>
    </Layout>
)

export default DemoPage

As you can see, in the className props, we’re just adding Tailwind classes, alongside our custom heading class we created earlier. Run gatsby develop in your terminal and navigate to localhost:8000/demo in your browser to see what it looks like. Try resizing your screen to see some pseudo responsiveness in action!

With our simple demo, we’ve only just scratched the surface of what we can do with Tailwind. Their documentation is the best place to go to understand what other classes and styles are available, as well as information on how to utilise Flexbox and grids to achieve some modern, responsive layouts.

Customising

Let’s say you really wanted to up your customisation game and include your own colours, container styles and more. Well, it’s pretty straightforward to do that with Tailwind, but we do need to set up some more configurations. In the root of your project, create a new file called: tailwind.config.js and enter the following:

// tailwind.config.js

module.exports = {
    purge: [
        './src/**/*.js',
        './src/**/*.tsx',
    ],
    theme: {
        container: {
            center: true,
            padding: {
                default: '1rem',
                sm: '2rem',
                lg: '3rem',
                xl: '4rem',
            },
        },
        extend: {
            colors: {
                primary: '#de7261',

            },
            height: {
                '1/4': '25vh',
                '1/3': '33vh',
                '1/2': '50vh',
                '3/4': '75vh',
                'in': 'inherit',
            },

            fontSize: {
                '7xl': '5rem',
                '8xl': '6rem',
            }
        },
    },
}

The code above is telling Tailwind that we’d like to modify our theme by allowing container styles (otherwise disabled by default) and extending the colour, height and fontSize options with some new values. This theme section is where we can define a custom colour palette, fonts families, breakpoints — everything related to the visual style and design. With the options above, we can now use bg-primary , h-3/4 and text-7xl throughout our site’s styles wherever we want! (As well as similar classes for the other options.)

Also notice the purge bit at the top of the file. This means our final compiled CSS (in production builds only) will be stripped of all the styles that we didn’t use, minimising the size of our overall app.

Try adding some of these new classes into any page of your project or extend the config further to create your own styles and watch something truly unique come to life!

(You’ll probably need to restart your dev server to see the changes take place!)

From Ghost To Markdown Files -- Updating my website (again)

Ayotunde Ikuesan — Tue, 04 Aug 2020 14:54:05 +0000

Change is always driven by some kind of problem, right? Something that exists to eventually be fixed, no? These rhetorical questions are annoying, yes? The latest round of changes that have befallen my website can be summed up in one word: control. As in, I have taken it back.

Jheez, when did you lose it?

Previously, I have raved about the CMS Ghost. It’s a fast, modern and easy way to host a blog and get your content onto the internet. However, when you want to expand beyond the boundaries of blogging, things can get a little awkward. The platform itself is geared toward online magazines and newsletters — not necessarily bored web developers with too much time on their hands during a lockdown, who want to expand their online presence.

What does that even mean?

All of the content I had planned for this latest iteration of my website wouldn’t sit well within a CMS made for articles. 👈🏾 This was the problem that inspired the change.

So I started my search for a new CMS that would allow for a flexible, customisable content model. I considered a whole host of offerings including Contentful, Prismic and Sanity. I even ventured back to… Wordpress <shudders>. Alas, I wasn’t fully satisfied with any of them. I felt more a like passenger, rather than the one in the driving seat.

(Sidenote: I’m also cheap and didn’t want to pay Digital Ocean $5 a month for the Ghost server that gets used 5 minutes a week. But if you do, here’s a referral link 😉)

Solution

My search for a new CMS had me scouring the internet for inspiration. Eventually, I stumbled over this post from Samantha Ming: Building my New Site with VuePress. In it she talks about a static site generator called VuePress. It’s pretty cool and comes with a plethora of features baked in. I was still happy with Gatsby for all my SSG needs, but something else about her post garnered my interest:

The Power of Markdown

I’ve used the markup language before, but never saw it as the basis for storing different kinds of content. Older and wiser, I realise that by defining different frontmatter fields, I can create pretty much any type of anything that my brain can imagine. Meaning, my content no longer has to be manipulated to fit the management system, the system can be easily manipulated to fit the content. It’s all just there, however I define it — ready to be consumed by my GraphQL queries and rendered into something presentable through a React component.

Combined with Gatsby, Markdown gains some extra superpowers. (I think that’s the nerdiest thing I’ve ever written in my life.) Headings can easily be extracted and linked up from my posts to create some permalinks. Images can be referenced and designed with predefined styles. The time to read a post can be taken from a query and used in an archive listing (for example). I’m only scratching the surface here.

It’s undeniable. A perfectly made match: Markdown + Gatsby, like cookies and cream.

However in this context, Markdown is like the juice, not the bottle. In terms of an actual CMS, that’s just files in git being handled by a code editor. I’ve got both eyes on TinaCMS, but in all honesty that makes no difference for you: the person consuming the content. So what exactly does change for you?

New Design

Another problem I had with the previous site was using a CSS framework. Pretty much the same story: as soon as I tried to do something out of the ordinary, things became unnecessarily complex. Bulma was the framework in question. It’s honestly great and I’d recommend it to anybody, but if you’re looking for something that allows you to be more creative, Tailwind CSS is awesome. (Another inspiration from Samantha’s post!)

It’s different to other CSS frameworks. The best way to demonstrate is by example. Let’s say I wanted to create a nice button. Here’s how that might look with Bulma:

<a class="button">
    Tidy.
</a>

And with Tailwind:

<a class="whitespace-no-wrap inline-flex px-2 py-1 rounded-sm text-sm tracking-widest items-center justify-center leading-6 font-medium transition ease-in-out duration-150 bg-dark text-white">
    Wowza.
</a>

I know, I know. Why would anyone want so many classes in their HTML? Well, when you’re in the pursuit of control, this kind of tool can be incredibly helpful. Tailwind works by giving us utility classes. These classes — rather than holding an entire set of styles like that button for Bulma — each specify a subset/one thing about your HTML element. I agree, it looks messy, but this can be cleared up to look a lot neater:

<a class="btn btn-secodnary">
    Phew.
</a>

We can do this by abstracting Tailwind’s utility classes into custom component classes for our elements/components. See this article if you’re interested.

The point is, this way of styling my site has allowed me to create something that’s truly one-of-a-kind — heavily influenced by Temi Coker’s website — without having to write thousands of lines of CSS code.

Tutorials*

But let’s say you do want to write thousands of lines of CSS, or better yet just know what it is. Helping and encouraging others has been a driving force behind my interest in technology and programming since day one. What good is knowledge stored up within yourself if you don’t share it with other people? So I’ve created a new Tutorials section — bringing (what I hope are) useful, easy to follow tutorials and intros on various aspects of web development. The hope is you’ll learn something and if I’ve really succeeded, become a fellow nerd. 🤓

*Follow me on DEV for just the 1s and 0s!

Privacy

In an effort to enhance visitor’s privacy, I’ve switched out Google Analytics for Netlify Analytics. Using analytics directly from the same peeps who are hosting this site allows for a more simple and streamlined analytics gathering experience, with a focus on user privacy. The data is collected from the servers dishing out the content, rather than from cookies and scripts loaded onto your browser. In theory, that also means no performance loss! 🙌🏾 Maintaining fast load times, not storing any cookies on your browser and being totally GDPR compliant is peace of mind for you and for me.

Wrap up

Anyway, that pretty much wraps up this latest round of changes! It’s become a sort of unofficial yearly tradition of mine to reiterate this website and try out some new features and designs. I’m excited to see what’s going to crop up, now I’m back in control.

✌🏾

Learn to Code

Ayotunde Ikuesan — Sat, 01 Aug 2020 09:32:35 +0000

When I first started my computer science degree seven years ago (whoa), I instantly regretted all the decisions that led up to that first lecture. It quickly became apparent that I couldn't write or perhaps more importantly understand code. Literally, it was like trying to learn an entirely new language. I found it so difficult that I considered giving up and trying something else.

But I persisted through my wayward understanding, smashed my dissertation, graduated and got a job in web development which has me set up nicely for the rest of my career. Even more surprising is the fact that I now enjoy writing code and creating components for the web that people can use.

None of this would have been possible if I gave up or completely ignored the prospect of programming in the first place. So now I'm here to convince you, digital stranger, that you should learn to code also. It could genuinely change your life and the lives of those around you.

Starting Out

It’s pretty easy to get overwhelmed here. When it comes to learning how to code, there are many different routes to go down:

Web development
Mobile app development
Software engineering
Data analytics
DevOps

Most of those can even be split into more granular specialities. I've learned that the general consensus for beginners is to start off learning something like Python. It’s an easy to learn scripting language that will get you up and running with the basics of programming very quickly. By all means, do that. However, I also like to encourage people that you should start off with what actually interests you. If the snazziest, fanciest websites get your heart racing (like my one no doubt), then why not learn how to make one? Or, if you’re fascinated by all the apps keeping you glued to your phone, then try creating some. These initial projects tend to be more involved than writing lines of Python code, but at the end of it you’ll have a solid understanding of programming that can be readily applied to real world applications.

Having spoken to many people about what they should start with, the number one fear always seems to be ‘finding it too difficult’ and I too can vouch for that. Real talk, creating websites and mobile apps can be complex. But regardless of whatever you choose to start out with, there exists thousands of online tutorials and articles that can help you learn at a pace that suits you. A bunch of those are also guaranteed to require no prior programming knowledge (🙌🏾) so you can learn from scratch. Just remember, you’ll only get out what you put in.

When do I become rich and famous?

It is well documented that this field of work can be incredibly lucrative. We’ve all heard of Mark Zuckerberg and the book of faces along with Dong Nguyen and the bird that flaps. But where does that leave you, a promising prospective programmer? Well, actually in quite a good position according to the following average salaries for various developer positions in London*

Software Engineer: £55,000/yr (https://www.glassdoor.co.uk/Salaries/london-software-engineer-salary-SRCH_IL.0,6_IM1035_KO7,24.htm)
Web developer: £39,249/yr (https://www.glassdoor.co.uk/Salaries/london-web-developer-salary-SRCH_IL.0,6_IM1035_KO7,20.htm)
DevOps: £53,445/yr (https://www.glassdoor.co.uk/Salaries/london-devops-engineer-salary-SRCH_IL.0,6_IM1035_KO7,22.htm)
Mobile app (iOS) developer: £53,391/yr (https://www.glassdoor.co.uk/Salaries/london-ios-developer-salary-SRCH_IL.0,6_IM1035_KO7,20.htm)

These are all full time salaries. You could earn a lot more if you hire yourself out as a contractor — up to and over £500 a day.

But I sense you want more. You want to be earning millions and billions and trillions for your highly addictive and super successful app, right? The truth is, success stories like Nguyen's and Zuckerberg’s aren’t necessarily the norm and have perhaps warped expectations when it comes to understanding how much you can earn from this line of work. If you’re going to learn to code and make a career out of it, how much money you make shouldn’t be the driving factor. Same could be said for pretty much any other kind of work. You'll find a lot more fulfilment in managing your expectations well and doing something because you love it.

Tools 🛠

So, you know where you want to start out and what kind of job you want afterwards. Now it’s time to learn about some commonplace tools to help you out with your brand new venture.

Integrated Development Environment (IDE)

This is where the magic happens. IDEs are basically where your code gets written and in some cases, compiles and debugs too. Here’s some of my favourites:

Visual Studio Code — great for web development and Javascript apps.

Xcode — Apple’s own IDE for building apps across the Apple ecosystem.

Visual Studio — different to the other VS, but great for building more complex websites and apps utilising Microsoft products (for example, the .NET framework).

Websites

Some useful tools that’ll help you understand your code, connect with others, and enhance your apps:

Github — think of this as like Dropbox for your code. You can push and pull down updates via the cloud and even roll back to previous versions whenever you need to.

MDN Web Docs — if you’re building a website, this is an invaluable resource covering tutorials and explanations on various aspects of web development.

DEV Community — a community of developers from many different disciplines sharing walkthroughs and experiences about literally anything you can think of related to code.

web.dev — after you’ve built your website and it’s live (or in staging), this is a great place where you can test it out and see how it performs regarding today’s best web practices.

Google Fonts — a vast collection of open source fonts, available for use in your projects.

Apps

More useful tools to enhance your developer experience!

Sip — a Mac app allowing you to collate different colour palettes for your projects.

Postman — you can use this to test out API calls and see what kind of responses you get.
Github Desktop — a simple, easy-to-use git GUI that will make handling your code a lot easier! (If you detest the command line.)

Also, just bookmark StackOverflow.com right now. This is a programming forum and it will save your life.

Final tips

Persistence is key. Practice makes perfect. I could throw a bunch more clichés at you, but the message remains the same. If you want to become the world's next Ultimate Developer, you'll have to put in the hours. When I discovered this for myself as I was starting out, my heart broke into thousands of little 1s and 0s. But the value of hard work is tangible with programming. Nothing beats the feeling of creating something that — after many hours of debugging, screaming and refactoring — actually, finally, works.

*Salaries correct as of 24th July 2020

From Wordpress to Gatsby -- Updating my blog!

Ayotunde Ikuesan — Fri, 01 Nov 2019 09:25:46 +0000

I recently updated my blog. Except this time, I wanted to try something different. If by some miracle you're an avid follower of my blog, you'll know I've been a fan of WordPress for many years. The platform powers around 30% of the internet and has gained a cult following amongst many bloggers, developers and publications around the world.

Alas, not too long ago, I decided that it's no longer for me. Not for the first time mind you, but this time I'm fairly certain that decision is going to stick.

The problem

My biggest problem with the platform is one of its most important features: themes and templates. Trying to style one of these themes to get it to look exactly how I want is guaranteed to ruin any day. As a web developer, the restricted layout and styling options provided hinder my creativity. And the interface which allows me to express whatever amount of said creativity is left, is just as poor. Limited CSS, only a handful of colour palettes, paying more to unlock more features and relatively slow page loads led me to a dark and lowly place: I had a created website I secretly hated.

"Jeez man, so dramatic. Why don't you just self host?" 🙄

It's true, a self-hosted instance of WordPress would have allowed me to upload my own fully designed template and install a whole host of plugins, without paying significantly more. But hosting WordPress on your own is a tricky business. Security vulnerabilities are lurking around every corner and I don't have the experience to confidently manage my own LAMP stack.

Don't even get me started on PHP.

The solution

I needed a platform that would allow for a few of things:

Freedom to easily style my blog any way I like
Use of modern web development languages and architectures
Super fast
Super cheap

That's all I asked for.

A few thorough Google searches later (going all the way to page three folks), I came across a cool tool called Ghost.

Think of Ghost as being like that really popular dude at your school or work that your friend introduces you to, then you realise you already know them. Ghost powers the publications behind some of the world's biggest companies: Apple, Tinder and DailyMotion just to name a few. When I started looking for an alternative to WordPress, I hadn't heard of Ghost beforehand (apart from once but I think that was an accident). In a lot of ways it's similar to WordPress, but it's different enough in all the ways that count:

I can fully customise everything about this website, from head to footer.
The platform runs on Node.js, bringing it into the era of modern web development.
Advanced SEO tools also come as standard (paid with Wordpress.com), making tunde.io more visible on the web and across social media. Which is good because not a lot of people are searching or indeed asking for it.
$5/month hosting with Digital Ocean 🌊

(Dare I sneak in a free referral link for DO? I do! https://m.do.co/c/73c719991456)

Good, but not good enough

I wasn't finished there. Ghost would turn out to only be part of the story. I had the whole blog set up – ready to push that big blue publish button and go live – when I started to think about scaling. Let's be optimistic for a second and assume that one day, a vast number of people want to access the blog (I can't think of a valid reason either). That's gonna put a lot of pressure on the one server I had set up to run the website. With new page requests coming in every single second from every corner of the globe, that server would only crash and burn, leaving a pool of melting 1s and 0s...

So I took myself back to Google, in search of more wisdom, and came across Gatsby. Gatsby is a static site generator. Put simply, SSGs allow you to create websites that serve pre-compiled web pages, rather than dynamically generating the content whenever you want to access a page. Imagine having your Facebook feed loaded as soon you clicked facebook.com, rather than having to wait for a database to be queried to generate all of your friend's cat pics.

Having everything ready to go in these pre-compiled pages, reduces the amount of time it takes to serve that page to you, making all of the things so much faster. These compiled pages can also be served efficiently via a CDN, significantly reducing server cramp and providing you with even faster content delivery times.

So how does this all tie in here? Well, Ghost has been set up in such a way that it's possible to retrieve only the content (i.e. my blog posts and pages) via an API -- a headless CMS if you will. Gatsby then takes that content and spits out what you're reading right now. This spit, gets pushed to a CDN, ready when you are to serve the pages, fast. Almost - almost, like a bird feeding a chick. And because of the way Gatsby is integrated with Ghost, I lose none of those benefits listed earlier.

It's probably a bit overkill for my little corner of the world wide web, I'm fully aware. Check out the end result for yourself at tunde.io. Whether you do or don't, the nerd in me thinks it's all rather cool.

DEV Community: Ayotunde Ikuesan

The best way to start your developer career

Privacy first analytics with Cloudflare Web Analytics

Introducing Cloudflare Web Analytics

How does it work?

Is it enough?

How to optimise remote images in Gatsby

Why bother?

Update project dependencies

Create remote nodes for GraphQL queries

Usage in pages

Building my new website with NextJS, Ghost and Tailwind

From Markdown to Ghost

Building with NextJS

Styles by Tailwind

Going forward

Introduction to HTML

Purpose

That don’t look pretty.

Attributes

The <head>

Nesting

Is this really a big deal?

Caveats

Wrap up

Adding Tailwind CSS to a Gatsby project

Introducing Tailwind CSS

Adding to Gatsby

Using Tailwind

Customising

Further reading

From Ghost To Markdown Files -- Updating my website (again)

Jheez, when did you lose it?

Solution

The Power of Markdown

New Design

Tutorials*

Privacy

Wrap up

Learn to Code

Starting Out

When do I become rich and famous?

Tools 🛠

Integrated Development Environment (IDE)

Websites

Apps

Final tips

From Wordpress to Gatsby -- Updating my blog!

The problem

The solution

Good, but not good enough