DEV Community: Maciej

Building a carousel component with TailwindCSS and Alpine.js

Maciej — Sun, 27 Mar 2022 07:34:16 +0000

By the end of this article you will be able to create a carousel component with TailwindCSS and Alpine.js

Here is what a working example will look like

Set up

First add tailwind and alpine.
In the index.html add what's below to your <head>

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

For Tailwind we are using the jit compiler cdn to keep it simple and keep the size small.

<script src="https://unpkg.com/alpinejs" defer></script>

And then the official alpine.js cdn

Creating the component

Create the main image

<body class="p-4 font-serif bg-gray-50">
    <h1 class="text-2xl font-semibold">
      TailwindCSS + Alpine.js Carousel
    </h1>
    <div class="relative">
      <img
        class="h-64 w-full object-cover object-center"
        src="https://images.unsplash.com/photo-1527549993586-dff825b37782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
        alt="mountains"
      />
    </div>
</body>

I used mountain pics as a placeholder for the images.

previous/next buttons

Let's create to big buttons with arrows on each side to switch between items

<img class="h-64 w-full object-cover object-center"
    src="https://images.unsplash.com/photo-1527549993586-dff825b37782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
    alt="mountains" />
<button
    class="absolute inset-y-0 left-0 px-2 py-[25%] h-full w-8 group hover:bg-gray-500 hover:bg-opacity-75 cursor-pointer">
    <span class="hidden group-hover:block text-gray-50">
        &larr;
    </span>
</button>
<button
    class="absolute inset-y-0 right-0 px-2 py-[25%] h-full w-8 group hover:bg-gray-500 hover:bg-opacity-75 cursor-pointer">
    <span class="hidden group-hover:block text-gray-50">
        &rarr;
    </span>
</button>

dot buttons

Next dot buttons to switch between items by index, and also show the selected item

<div class="absolute bottom-0 w-full p-4 flex justify-center space-x-2">
    <button class="h-2 w-2 rounded-full bg-gray-300 hover:bg-gray-300 ring-2 ring-gray-300"></button>
    <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-300 ring-2 ring-gray-300"></button>
    <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-300 ring-2 ring-gray-300"></button>
</div>

Your code should look like this

<div class="relative">
    <img class="h-64 w-full object-cover object-center"
        src="https://images.unsplash.com/photo-1527549993586-dff825b37782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
        alt="mountains" />
    <button
        class="absolute inset-y-0 left-0 px-2 py-[25%] h-full w-8 group hover:bg-gray-500 hover:bg-opacity-75 cursor-pointer">
        <span class="hidden group-hover:block text-gray-50">
            &larr;
        </span>
    </button>
    <button
        class="absolute inset-y-0 right-0 px-2 py-[25%] h-full w-8 group hover:bg-gray-500 hover:bg-opacity-75 cursor-pointer">
        <span class="hidden group-hover:block text-gray-50">
            &rarr;
        </span>
    </button>
    <div class="absolute bottom-0 w-full p-4 flex justify-center space-x-2">
        <button class="h-2 w-2 rounded-full bg-gray-300 hover:bg-gray-300 ring-2 ring-gray-300"></button>
        <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-300 ring-2 ring-gray-300"></button>
        <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-300 ring-2 ring-gray-300"></button>
    </div>
</div>

Adding alpine.js

Now for the fun part let's open a script tag before the closing body tag and create our alpine object.

We need two variables:

selected to show a current index of image list
images array with the list of images we want to show in the carousel.

I will use a couple of mountain landscape images from Unsplash

const carousel = () => {
    return {
        selected: 0,
        images: [
            "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
            "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
            "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80",
            "https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
            "https://images.unsplash.com/photo-1485160497022-3e09382fb310?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
            "https://images.unsplash.com/photo-1472791108553-c9405341e398?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2137&q=80"
        ]
    };
};

Next let's add x-data property to the top div of our app

<div x-data="carousel()" class="relative">

Showing the image

Let's make the image source show the images[selected] image.
Edit the img tag

<img class="h-64 w-full object-cover object-center" :src="images[selected]" alt="mountains" />

We removed the src tag and added the :src which is alpnie.js shorthand for x-bind:src

Now your image should show the first image from the images array

Next button

Let's add @click which is alpine's shorthand for x-on:click, and make it increase selected by 1 unless it's the last image then reset it back to 0

<button
    class="absolute inset-y-0 right-0 px-2 py-[25%] h-full w-8 group hover:bg-gray-500 hover:bg-opacity-75 cursor-pointer">
    <span class="hidden group-hover:block text-gray-50">
        &rarr;
    </span>
</button>

Previous button

The back button other way around

<button
    class="absolute inset-y-0 left-0 px-2 py-[25%] h-full w-8 group hover:bg-gray-500 hover:bg-opacity-75 cursor-pointer">
    <span class="hidden group-hover:block text-gray-50">
        &larr;
    </span>
</button>

Dot buttons

First we want to render as many buttons as there are images for that we will use the template tag and alpine x-for

<template x-for="(image,index) in images" :key="index">
    <button class="h-2 w-2 rounded-full hover:bg-gray-300 ring-2 ring-gray-300"></button>
</template>

Add @click to set the new index

<template x-for="(image,index) in images" :key="index">
    <button @click="selected = index" class="h-2 w-2 rounded-full hover:bg-gray-300 ring-2 ring-gray-300"></button>
</template>

Finally add conditional styling so the button for selected image looks different

<template x-for="(image,index) in images" :key="index">
    <button @click="selected = index" :class="{'bg-gray-300': selected == index, 'bg-gray-500': selected != index}"
        class="h-2 w-2 rounded-full hover:bg-gray-300 ring-2 ring-gray-300"></button>
</template>

Now your component is fully working

What's next?

You could further improve the carousel component by:

making it mobile responsive
adding animation on image change
auto changing the image on interval

Or you can start using the carousel in your projects.

Follow me on Twitter @MaciejJanowski to stay updated on my content.

Adding Strapi as headless CMS to 11ty blog

Maciej — Tue, 23 Nov 2021 02:42:45 +0000

Setting up Strapi

Open up a terminal and type

npx create-strapi-app backend --quickstart

this will create all the strapi files in the backend folder and run strapi instance on http://localhost:1337

If you want to run Strapi again after terminating the process, you can do it from the backend folder by typing

npm run develop

Now you have to create your first Strapi admin user, go to http://localhost:1337 and press Create the first administrator and fill the form.

You will see the main dashboard, let's create a Content-Type for our blog articles,

Press Create your first content-type button.
In the Display name enter article
Select Text field, fill the name field with title
On the advanced tab check required and unique
Press Add Another Field, select Rich Text, and call it content
Press Add Another Field, select Text, and call it author
Press Finish and then Save

We also want to have a way to tag the posts with tag, so let's create a content-type for that.

In Content-Types Builder tab under Plugins press Create new collection type
In the Display name enter tag
Select Text field, fill the name field with name
On the advanced tab check required and unique
Press Finish and then Save

We will also create a relation to link tags with articles.

In Content-Types Builder tab press Article collection and click Add another field
Select Relation
On the right side select box chose tag
In the middle press the second button from the right to set the relation type to Many to Many
Press Finish and then Save

Now let's add some content.

Under the Collection Types section select tags and create and publish few examples.

Do the same for articles and assign tags to them.

Final thing we have to do in strapi is assign permissons so the articles are visible to anyone.

Under General select Settings
Under Users & Permissions Plugin select Roles
Click Public
In Permissions section find article and select find and findone checkboxes
Do the same for tag
Press Save

You should see articles and tags under http://localhost:1337/articles and http://localhost:1337/tags

We are done with Strapi set up.

Setting up Eleventy

Now let's set up eleventy, as a starting point let's use a simple 11ty + markdown blog we created in this guide

In the main project directory create a new folder called frontend
Clone the starting blog repository, and install required packages.

cd frontend
git clone https://github.com/druidmaciek/11ty-tailwind-alpine-blog .
npm i

Now install Axios so we can make requests to strapi api

npm install axios

Create a new folder called _data and inside create articles.js and tags.js files

mkdir _data
touch _data/article.js
touch _data/tags.js

article.js

const { default: axios } = require('axios');

module.exports = async () => {
  try {
    const res = await axios.get('http://localhost:1337/articles');
    return res.data;
  } catch (error) {
    console.error(error);
  }
};

tags.js

const { default: axios } = require('axios');

module.exports = async () => {
  try {
    const res = await axios.get('http://localhost:1337/tags');
    return res.data;
  } catch (error) {
    console.error(error);
  }
};

Now delete blog folder, and edit the index.liquid

---
title: "My Blog"
layout: layouts/main
pagination:
  data: articles
  size: 100
  alias: articles
---

{% include components/hero, hero_title: "Blog", hero_subtitle: "Read my articles", hero_img:
"https://images.unsplash.com/photo-1628607292260-9195108b03b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1502&q=80"
%}
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4 ">
    {%- for article in articles -%}
    <a href="/articles/{{ article.id }}/" class="p-4 border rounded shadow hover:bg-gray-100">
        <h3 class="text-lg font-bold">{{ article.title }}</h3>
    </a>
    {%- endfor -%}
</div>

Now run your eleventy site, and visit localhost:8080 to see if our blog posts from Strapi appeared

Now let's work on indivdual article page.

Create a article.liquid file.

--------
title: Article
layout: layouts/blog
pagination:
  data: articles
  size: 1
  alias: article
permalink: 'articles/{{ article.id }}/'
--------

then edit _includes/layouts/blog

--------
layout: layouts/main
--------

{% include components/hero, hero_title: article.title, hero_subtitle: '', hero_img:
"https://images.unsplash.com/photo-1628366757132-6c49770ec9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1500&q=80"
%}

<div class="mt-4">
    {% for tag in article.tags %}
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
        {{ tag.name }}
    </span>
    {% endfor %}
</div>


<div class="mt-6 md:mt-12">
    {{ article.content | safe }}
</div>

Now go to localhost:8080/articles/1/, you should see your content.

As you can see it's super easy to set up headless CMS with 11ty using Strapi.

Next steps

Next thing to do is deploy our site, since Strapi is self hosted backend service we will need to deploy it. You can deploy it for free on Heroku, by following this steps.

To deploy our front-end we can deploy it on service such as Netlify.

Here is a link to GitHub repo of the finished project.

If you liked this guide, follow me on twitter, to stay up to date with my latest content.

How to create a contact form for a static site with Netlify

Maciej — Tue, 21 Sep 2021 18:26:05 +0000

How to create a contact form for a static site with Netlify

Creating form on a static website hosted on Netlify is super easy.
Here is how to do it in couple simple steps.

First let's create a index.html file in our project's folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Netlify Contact Form</title>
</head>
<body>

</body>
</html>

Then let's create our contact form inside the body

<h1>Send Me a Message</h1>
<p>Fill the contact form below to send me a message, and I will contact you soon</p>

<form>
    <input type="text" name='name' placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message"cols="30" rows="10" placeholder="Your Message"></textarea>
    <button type="submit">Send</button>
</form>

We also want to redirect the user to a thank you page after submitting the form. Let's create, one real quick, create a thanks.html file in our project directory.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Thank You</h1>
    <p>I will try to reply to your message as soon as possible</p>
</body>
</html>

Now let's upload it to Netlify, go to https://netlify.com login or register if you don't have an account. Go to sites tab and drag and drop the folder with our html files

Now our site is available to the world, let's make the contact form work. Open index.html again, and edit the form tag by adding few attributes.
name - this value will show up in Netlify as the name of our form, it's useful if you have many forms on your website
action - this indicates to which page it should redirect after a successful form submit. In our case it's thanks.html
netlify - this attribute tells Netlify to handle the form

This is how our new form will look

<form name="contact" action="/thanks.html" netlify>
    <input type="text" name='name' placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message"cols="30" rows="10" placeholder="Your Message"></textarea>
    <button type="submit">Send</button>
</form>

On Netlify go to site's overview. Click the deploy tab, and once again drag and drop the site's folder to update the files.

Now let's try submitting a form.

It seems to be working! Now let's check out our form submission in Netlify.
Go to our site overview and select the forms tab.

As you can see it works perfectly, and required almost 0 effort to set up. It also has a spam filter inbuilt so you don't have to worry about combing through spam emails. And you can get your form submissions sent straight to your email inbox.

How to create Notification pop up component with Alpine.js and TailwindCSS

Maciej — Fri, 10 Sep 2021 16:21:09 +0000

I will show you how to create a notifications pop-up component using Alpine.js and Tailwind.
So you can have a nice way to notify your users of things happening at your website.

Here is a simple starting page that we will use. It's a title, input and button. After you submit something in the input the notification will pop-up and then user can dismiss it.

To store notifications we will use Alpine.store, for storing global data. We use it because we want to separate input and notifications components.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notifications</title>
    <script src="//unpkg.com/alpinejs" defer></script>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-yellow-50">
    <div class="mt-4 max-w-2xl mx-auto text-center">
        <h1 class="text-5xl  font-bold">Alpine Notifications</h1>
        <div class="mt-2">
            <p>Add items below to see notifications pop-up</p>
        </div>
        <div class="mt-4">
            <input class="px-4 py-2 border-2 border-gray-900 rounded" type="text">
            <button class="px-4 py-2 bg-yellow-400 hover:bg-yellow-500 border-2 border-yellow-500 rounded ">Add Item</button> 
        </div>
    </div>   
</body>
</html>

Now let's make the input work by adding some Alpine magic.
Let's change the parent div of the input to include x-data, add x-model attribute to the input.



<div x-data="{ value: '' }" class="mt-4">
    <input x-model="value" class="px-4 py-2 border-2 border-gray-900 rounded" type="text">
    <button class="px-4 py-2 bg-yellow-400 hover:bg-yellow-500 border-2 border-yellow-500 rounded ">Add Item</button> 
</div>

Now let's create a global store. Open a script tag before closing body tag, and create our global store.

Inside we create an empty list items to store our notification and a function called notify.
We will use the function to add messages to items list.



<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('notifications', {
        items: [],
        notify(message) {
            this.items.push(message)
        }
    })
})
</script>

Now let's go back to the button next to the input and add the @click attribute and call the notify function there.
Also let's clear the input after pressing the button and check if it has content.



<button @click="if (value) { $store.notifications.notify(value); value = ''; }"
        class="px-4 py-2 bg-yellow-400 hover:bg-yellow-500 border-2 border-yellow-500 rounded">Add Item</button>

Now we can add messages to our notification list, but we can't actually see them. So before we create our notifications
Component, let's add a quick preview of our items in the list.



<div x-data class="mt-2 space-y-2">
    <template x-for="item in $store.notifications.items">
        <p x-text="item"></p>
    </template>
</div>

We can see our items appear in the list belo the input. Now we are ready to create the notifications pop ups.

Create a new element before the script tag with the simple notification badge.



<div class="fixed bottom-0 flex items-end px-4 py-6 sm:p-6 sm:items-start">
    <div class="w-full flex flex-col space-y-4 items-end">
        <!-- Notification Badge -->
        <div class="px-4 py-2 w-64 rounded bg-white border-2 border-gray-900">
            <button class="underline">dismiss</button>
            <p>This is a a pop up</p> 
        </div>
    </div>
</div>

Now let's make it render our notification badges from the global store.



<div x-data class="fixed bottom-0 flex items-end px-4 py-6 sm:p-6 sm:items-start">
    <div class="w-full flex flex-col space-y-4 items-end">
        <!-- Notification Badges -->
        <template x-for="item in $store.notifications.items">
            <div class="px-4 py-2 w-64 rounded bg-white border-2 border-gray-900">
                <button class="underline">dismiss</button>
                <p x-text="item"></p>
            </div>
        </template>
    </div>
</div>

To finish let's add @click property to the dismiss button, to remove the item from the array.
Remove the old list we used to preview if items are being added to the array.
Now test out are notifications pop up, by adding few items and dismissing them.

If you liked this guide, follow me on twitter, to stay up to date with my latest content.

How to set up a personal website with 11ty, Markdown, TailwindCSS, and Alpine.js

Maciej — Mon, 23 Aug 2021 20:43:05 +0000

So I rebuild my website for about 100th time.
I was testing out some new website stacks, and this is the one I particularly enjoy.

We will use:

11ty static site generator
markdown files for content such as blog posts and projects
Tailwind to add some styling
Alpine.js for some interactivity, e.g mobile menu
Netlify to host our website

When finished you will have a website that you can use as your personal developer portfolio.
Show it to your employers or clients to showcase your work and establish expertise.

This tutorial assumes you have basic understanding of Tailwind, HTML, JavaScript, and npm.

Getting Started

Create a new directory for our project, and initialize it with package.json

npm init -y

Now let's install eleventy, tailwind, and posts
npm install --save-dev @11ty/eleventy tailwindcss postcss-cli autoprefixer

Now let's create a index.liquid file (liquid is one of the templating languages supported by 11ty )

---
title: "Home Page"
description: "This is our homepage"
layout: layouts/main
---
<h1>{{ title }}</h1>
<p>{{ description }}</p>

The code between --- signs is the front matter.
Here we define variables for different pages. We can access them in our html using double curly brackets (if you used Django this should be familiar to you)

Layout variable is to point 11ty to a file that our page will use.
This way we can reuse the same code across many pages with out writing it more than once.

Templating

Let's create a directory called _includes, this is where we can create reusable blocks of code for layouts, and components.
Let's create another directory called layouts and inside a file for our HTML boilerplate main.liquid

---
title: Default Title
---
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ title }}</title>
    {% if description %}
    <meta name="description" content="{{description}}" />
    {% endif %}

    <link rel="stylesheet" href="/style.css?v={% version %}" />

</head>

<body>
    <div id="content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="max-w-3xl mx-auto">
            {% block content %}
            {{ content | safe }}
            {% endblock %}
        </div>
    </div>
</body>

</html>

TailwindCSS Config

Create a folder called styles and a file inside tailwind.config.js

module.exports = {
  purge: [
    '_site/**/*.html',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Create another file in styles folder called tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

In the root directory of the project create a posts.config.js file

module.exports = {
  plugins: [
    require(`tailwindcss`)(`./styles/tailwind.config.js`),
    require(`autoprefixer`),
  ],
}

Setting up the project

Create a .gitignore file in root directory

_site/
_tmp/
.DS_Store
node_modules/
package-lock.json

Next create a .eleventyignore file

node_modules

Finally let's create 11ty configuration file .eleventy.js

const now = String(Date.now())

module.exports = function (eleventyConfig) {
  eleventyConfig.setUseGitIgnore(false)
 
  eleventyConfig.addWatchTarget('./_tmp/style.css')
 
  eleventyConfig.addPassthroughCopy({ './_tmp/style.css': './style.css' })
 
  eleventyConfig.addShortcode('version', function () {
    return now
  })
};

Now update package.json file with scripts to start the build.

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch",
    "build": "ELEVENTY_PRODUCTION=true eleventy & NODE_ENV=production postcss styles/tailwind.css --o _site/style.css"
  },
  "devDependencies": {
    "@11ty/eleventy": "^0.12.1",
    "autoprefixer": "^10.3.2",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.7"
  }
}

Now we can build the project

npm run build

And to start the site

npm run start

Open http://localhost:8080 in your browser and you should see this in your browser

Optimising HTML

Now we want to improve our site by minifing HTML and cleaning CSS. Install required packages

npm install --save-dev html-minifier clean-css-cli

Next update .eleventy.js

const htmlmin = require('html-minifier')

const now = String(Date.now())
 
module.exports = function (eleventyConfig) {
  eleventyConfig.setUseGitIgnore(false)
 
  eleventyConfig.addWatchTarget('./_tmp/style.css')
 
  eleventyConfig.addPassthroughCopy({ './_tmp/style.css': './style.css' })
 
  eleventyConfig.addShortcode('version', function () {
    return now
  })
 
  eleventyConfig.addTransform('htmlmin', function (content, outputPath) {
    if (
      process.env.ELEVENTY_PRODUCTION &&
      outputPath &&
      outputPath.endsWith('.html')
    ) {
      let minified = htmlmin.minify(content, {
        useShortDoctype: true,
        removeComments: true,
        collapseWhitespace: true,
      });
      return minified
    }
 
    return content
  })
}

Lastly update the build script in package.json

{
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch",
    "build": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production postcss styles/tailwind.css --o _site/style.css && cleancss _site/style.css -o _site/style.css"
  },
  "devDependencies": {
    "@11ty/eleventy": "^0.12.1",
    "autoprefixer": "^10.3.2",
    "clean-css-cli": "^5.3.3",
    "html-minifier": "^4.0.0",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.7"
  }
}

Run npm run build again and you should see your files in _site directory take less space

Adding Alpine.js

Now for the last bit of configuration let's add Alpine.js.
First install it through npm

npm install --save-dev alpinejs

Update the .eleventy.js file

eleventyConfig.addPassthroughCopy({
  './node_modules/alpinejs/dist/cdn.js': './js/alpine.js',
})

Finally update the _includes/layouts/main.liquid, by importing alpine in the <head>

<script src="/js/alpine.js?v={% version %}"></script>

Now let's complete the website by adding pages, blog pages and styling it

Adding hero header

Inside _includes dir create a components folder with hero.liquid file inside.

<div class="relative">
    <div class="absolute inset-0">
        <img class="w-full h-full object-cover"
            src="https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1502&q=80"
            alt="">
        <div class="absolute inset-0 bg-gray-400 mix-blend-multiply" aria-hidden="true"></div>
    </div>
    <div class="relative text-center py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
        <h1 class="text-5xl font-extrabold text-white sm:text-6xl lg:text-7xl">My Personal Website</h1>
        <p class="mt-4 text-xl max-w-3xl">Read my web development tutorials, and see projects I worked on.
        </p>
    </div>
</div>

Now update the index.liquid file by including the header

---
title: Home Page
description: This is our homepage
layout: layouts/main
---
{% include components/hero %}

Run the site npm run start and you should see our hero header

Adding a Navigation Bar

Create a navigation.liquid file in the _includes/components directory

<div class="mt-6 flex justify-between items-center">
        <a class="font-extrabold uppercase text-xl" href="/">Web Dev Blog</a>
        <button @click="isOpen = !isOpen" class="block md:hidden p-1 rounded-lg bg-gray-900 bg-opacity-80 hover:bg-opacity-100 text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
        <div class="hidden md:flex md:justify-end md:items-center md:space-x-6">
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/">Home</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/blog">Blog</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/about">About</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/work">Work</a>
        </div>
    </div>

Making a Mobile Nav

Now let's make a mobile navigation with the help of some Alpine.js magic

<style>
    [x-cloak] {
      display: none;
    }
  </style>

<div x-cloak x-data="navigation()">
    <!-- Mobile navigation -->
    <div class="-mt-6 absolute z-50 bg-white h-screen w-screen" x-show="isOpen"
        x-transition:enter="transition ease-in-out duration-300"
        x-transition:enter-start="opacity-0 transform scale-x-0 -translate-x-1/2"
        x-transition:enter-end="opacity-100 transform scale-x-100 translate-x-0"
        x-transition:leave="transition ease-in-out duration-300"
        x-transition:leave-start="opacity-100 transform scale-x-100 translate-x-0"
        x-transition:leave-end="opacity-0 transform scale-x-0 -translate-x-1/2">

        <div class="flex justify-between items-center p-6">
            <a class="font-extrabold uppercase text-xl" href="/">Web Dev Blog</a>
            <button @click="isOpen = !isOpen" class="block md:hidden p-1 rounded-lg bg-gray-900 bg-opacity-80 hover:bg-opacity-100 text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                  </svg>
            </button>
        </div>
        <div class="grid grid-cols-1 gap-4 p-6">
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/">Home</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/blog">Blog</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/about">About</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/work">Work</a>
        </div>

    </div>
    <!-- Desktop navigation -->
    <div class="mt-6 flex justify-between items-center">
        <a class="font-extrabold uppercase text-xl" href="/">Web Dev Blog</a>
        <button @click="isOpen = !isOpen" class="block md:hidden p-1 rounded-lg bg-gray-900 bg-opacity-80 hover:bg-opacity-100 text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
        <div class="hidden md:flex md:justify-end md:items-center md:space-x-6">
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/">Home</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/blog">Blog</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/about">About</a>
            <a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/work">Work</a>
        </div>
    </div>
</div>

<script>
    function navigation() {
        return {
            isOpen: false
        }
    }
</script>

Now let's include the navigation in our layout file _includes/layouts/main.liquid

<body>
    <div id="content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto">
            {% include components/navigation %}
            {% block content %}
            {{ content | safe }}
            {% endblock %}
        </div>
    </div>
</body>

Preview our website in the browser

Making reusable components

Let's make our hero header reusable by adding few variables to it, for title text, sub text and image url. Update _includes/compnoents/hero.liquid

    <div class="mt-2 relative">
        <div class="absolute inset-0">
            <img class="w-full h-full object-cover"
                src="{{ hero_img }}"
                alt="">
            <div class="absolute inset-0 bg-gray-400 mix-blend-multiply" aria-hidden="true"></div>
        </div>
        <div class="relative text-center py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
            <h1 class="text-5xl font-extrabold text-white sm:text-6xl lg:text-7xl">{{ hero_title }}</h1>
            <p class="mt-4 text-xl text-gray-50 max-w-3xl">{{ hero_subtitle }}</p>
        </div>
    </div>

Next update the include in the index.liquid

---
title: Home Page
description: This is our homepage
layout: layouts/main
---

{% include components/hero, hero_title: "My Web Development Blog", hero_subtitle: "Read my web development tutorials,
and see projects I worked
on.", hero_img:
"https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg"
%}

Check if everything still work in the browser.

Adding pages

Let's create an about page. In the root directory create a file about.liquid

---
title: About Page
description: This is the about page
layout: layouts/main
---

{% include components/hero, hero_title: "About Me", hero_subtitle: "Learn more about me here", hero_img:
"https://images.unsplash.com/photo-1628373791626-fe21d99fbd58?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
%}
<p>Here is a short summary about me and what I do.</p>

Visit http://localhost:8080/aboutt in your browser

Creating collections

Create a new directory in the root dir of the project called blog
Inside create 3 files blog1.md, blog2.md,index.liquid

The markdown files will be used to render our blog articles content, and the index.liquid will list all the articles under /blog

blog1.md

---
title: Example Blog post no. 1
description: This is a basic description of the post
date: 2021-08-21
layout: layouts/blog
tags: blog
---
This is some placeholder content that will be rendered to html

blog2.md

---
title: Example Blog post no. 1
description: This is a basic description of the post
date: 2021-08-23
layout: layouts/blog
tags: blog
---
This is another peace of  placeholder content that will be rendered to html

blog/index.liquid

---
title: About Page
description: This is the about page
layout: layouts/main
---

{% include components/hero, hero_title: "Blog", hero_subtitle: "Read my articles", hero_img:
"https://images.unsplash.com/photo-1628607292260-9195108b03b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1502&q=80"
%}
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4 ">
    {% for article in collections.blog reversed %}

    <a href="{{ article.url }}" class="p-4 border rounded shadow hover:bg-gray-100">
        <h3 class="text-lg font-bold">{{ article.data.title }}</h3>
        <p class="text-gray-700">{{ article.data.description }}</p>
    </a>

    {% endfor %}
</div>

Finally we need to create a layout for articles, create _includes/layouts/blog.liquid file

---
layout: layouts/main
---

{% include components/hero, hero_title: title, hero_subtitle: description, hero_img:
"https://images.unsplash.com/photo-1628366757132-6c49770ec9d7"
%}

<div class="mt-6 md:mt-12">
    {{ content | safe }}
</div>

Now visit http://localhost:8080/blog to view a list of posts, and click one of them to see the content

You can do the same to list projects you worked on, but I will let you add it yourself as an exercise.

Deploying website to Netlify

Firstly, let's upload our website to GitHub.
Create a new repo on GitHub, and then initialise git local and upload our files

git init
git add . 
git commit -m "first commit"
git branch -M main
git remote add origin https://github/your_username/your_repo.git
git push -u origin main

Now go to Netlify.com, login or register if you don't have an account.

On main dashboard click New site from Git button. And under Continuous Deployment click GitHub button. Authenticate your GitHub account, and you should see a list of your repositories.
Select the one we just created.

On the next screen leave everything on defaults, and press Deploy.
You built and deployed your eleventy blog to netlify and should have your website available on address like that.
The website will automaticly deploy when you push changes to github.

Here is a link to GitHub repo of the finished project.

If you liked this guide, follow me on twitter, to stay up to date with my latest content.

Simple To-Do List With Django, Alpine.Js, Tailwidcss, And Axios

Maciej — Mon, 21 Sep 2020 17:57:09 +0000

While back I wrote a tutorial on how to make a todo app with Django, Alpine.js, and Axios, however, there was some room for improvement as I was just beginning with Alpine, so I decided to write a new version.

In this tutorial, I will show you how to create a simple and beautiful ToDo app with

Django
TailwindCSS
Alpine.js
Axios

We will divide this into 2 parts

Building The Backend with Django
Building the Front-end and connecting it with the Backend using TailwindCSS, Alpine.js, and Axios

Check the finished project on GitHub

Back-end

Let’s start by creating a new project and its virtualenvironment, and installing Django

pip install Django

Then create a Django project, an app called tasks

django-admin startproject todo_list .
django-admin startapp tasks

Add tasks applications to INSTALLED_APPS in the settings.py file.

INSTALLED_APPS = [
    ‘django.contrib.admin’,
    ‘django.contrib.auth’,
    ‘django.contrib.contenttypes’,
    ‘django.contrib.sessions’,
    ‘django.contrib.messages’,
    ‘django.contrib.staticfiles’,
    ‘tasks’ # Add newly created app
]

Now to go the tasks app, and models.py file, and create a model for our task

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=255)
    completed = models.BooleanField(default=False)

To keep things simple we just use two fields title and completed

Next let’s create views for reading, creating, deleting, and updating the status of the task.

from django.http import JsonResponse
from django.shortcuts import get_object_or_404

from tasks.models import Task

def task_list(request):
    tasks = [{“id”: task.id,
              “title”: task.title,
              “completed”: task.completed} for task in Task.objects.all()]
    return JsonResponse(status=200, data=tasks, safe=False)

def create_task(request):
    title = request.POST.get(‘title’)
    if not title:
        return JsonResponse(status=400, data={‘error’: ‘title is required’})
    task = Task.objects.create(title=title)
    return JsonResponse(status=201, data={‘title’: task.title,
                                          ‘completed’: task.completed,
                                          ‘id’: task.id}, safe=False)

def delete_task(request, task_id):
    task = get_object_or_404(Task, pk=task_id)
    task.delete()
    return JsonResponse(status=204, data={‘message’: ‘task deleted’})

def update_task_status(request, task_id):
    task = get_object_or_404(Task, pk=task_id)
    status = request.POST.get(‘status’)
    if not status:
        return JsonResponse(status=400, data={‘error’: ‘status is required’})
    task.completed = int(status)
    task.save()
    return JsonResponse(status=204, data={‘message’: ‘task status updated’})

Now let’s create urls.py file inside our tasks app, and create url routes for our views.

from django.urls import path

from . import views

urlpatterns = [
    path(‘tasks/’, views.task_list, name=‘task_list’),
    path(‘tasks/create/’, views.create_task, name=‘create_task’),
    path(‘tasks/<int:task_id>/delete/’, views.delete_task, name=‘delete_task’),
    path(‘task/<int:task_id>/update/’, views.update_task_status, name=‘update_task’)
]

Now go to the main urls.py file of our application and include the tasks app urls.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path(‘admin/’, admin.site.urls),
    path(″, include(‘tasks.urls’)),
]

Now run the migrations, and start our app

python manage.py makemigratinos
python manage.py migrate
python manage.py runserver

Now using HTTP client ( i am using httpie, but you can use any other tool like postman or insomia)

test our endpoints. Here are the httpie commands I am using.

# Making Get request to retrive task list
http http://127.0.0.1:8000/tasks

# To test the POST/DELETE request you will need to add @csrf_exempt 
# decorator to the views, to bypass the csrf token check, 
# so you don’t need to pass csrf token in http client.
# Once we will be building front-end part you can delete the decorator

# Making POST request to create a task 
http -f POST http://127.0.0.1:8000/tasks/create/ title=“Clean the dishes”

# Making task Delete request 
http -f DELETE http://127.0.0.1:8000/tasks/1/delete/

# Making POST request to update a task status
http -f POST http://127.0.0.1:8000/tasks/2/update/ status=1

Create a few tasks to populate our database.

Before moving to the front-end let’s create last view for the home page. Go to views.py file and create a simple view.

def index(request):
    return render(request, ‘index.html’)

Finally add it to the urls.py of the tasks app.

urlpatterns = [
    path(″, views.index, name=‘index’),
    path(‘tasks/’, views.task_list, name=‘task_list’),
    path(‘tasks/create/’, views.create_task, name=‘create_task’),
    path(‘tasks/<int:task_id>/delete/’, views.delete_task, name=‘delete_task’),
    path(‘tasks/<int:task_id>/update/’, views.update_task_status, name=‘update_task’)
]

Front-end

In the tasks application create a directory called templates and inside a file called index.html

Include CDNs for TailwindCSS, Alpine.js and Axios in the <head>

<!DOCTYPE html>
<html lang=“en”>
  <head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
    <title>Simple ToDo List</title>

    <link href=“https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=“stylesheet”>
    <script src=“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js” defer></script>
    <script src=“https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js” defer></script>

  </head>

  <body>

  </body>
</html>

We need to create a simple form for adding tasks, and task list component.

Let’s start with the form. Add the input and button for adding tasks inside the body

<div class=“max-w-4xl mx-auto mt-6”>

      <div class=“text-5xl font-extrabold leading-none tracking-tight text-center”>
          <h1 class=“bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-pink-600 to-purple-900”>Simple To-Do List</h1>
      </div>

      <!-- Task Input -->
      <div id=“task-input” class=“mt-4 flex justify-center”>
          <div class=“m-4 flex”>
              <input class=“rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200” placeholder=“Task Title”/>
              <button class=“px-8 rounded-r-lg bg-purple-800 text-gray-100 font-bold p-4 uppercase”>Add Task</button>
          </div>
      </div>

  </div>

Now let’s create a task component, we need one for a completed task and one for an uncompleted one.

<!-- Task Input -->
<div id=“task-input” class=“mt-4 flex justify-center”>
    <div class=“m-4 flex”>
        <input class=“rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200” placeholder=“Task Title”/>
        <button class=“px-8 rounded-r-lg bg-purple-800 text-gray-100 font-bold p-4 uppercase”>Add Task</button>
    </div>
</div>

<!-- Task List -->
<div id=“task-list” class=“max-w-md mx-auto grid grid-cols-1 gap-2 mt-6”>

    <!-- Task in progress -->
    <div class=“p-4 bg-white hover:bg-gray-100 cursor-pointer flex justify-between items-center border rounded-md”>
        <p>Uncompleted Task</p>
        <button type=“button”>
            <svg class=“h-6 w-6 text-gray-500 hover:text-green-500” xmlns=“http://www.w3.org/2000/svg” fill=“none” viewBox=“0 0 24 24” stroke=“currentColor”>
                <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z” />
            </svg>
        </button>
    </div>

    <!-- Completed Task -->
    <div class=“p-4 bg-white hover:bg-gray-100 cursor-pointer flex justify-between items-center border rounded-md”>
        <p class=“line-through”>Completed Task</p>
        <svg class=“h-6 w-6 text-green-500” xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 20 20” fill=“currentColor”>
            <path fill-rule=“evenodd” d=“M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=“evenodd” />
        </svg>
    </div>

</div>

Ok now we have our HTML, ready let’s connect it all together using Alpine.js and Axios

Let’s start by populating the list with the initial tasks, we created earlier.

Open a <script> tag before closing the body tag and create a function for Alpine components.

We will create a tasks array to hold our tasks, and couple functions equavilent to the endpoints we created earlier in views.py

<script>
    function todos() {
        return {
            tasks: [],
            loadTasks() {},
            addTask() {},
            deleteTask(taskId) {},
            updateTask() {},
        }
    }
  </script>
</body>

Let’s start with loadTasks()

loadTasks() {
    let self = this;
    axios.get(’http://127.0.0.1:8000/tasks/’)
      .then(function (response) {
        // handle success
        self.tasks = response.data;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
}

Now let’s go back to HTML, and add x-data properties and x-init to the div enclosing the task input and task list.

<div x-data=“todos()” x-init=“loadTasks()” class=“max-w-4xl mx-auto mt-6”>

x-init is used to run a function once a component is initialized, so we will get the list of the tasks we have. Now go to the task list div and inside create a <template> tag enclosing the task component, and add x-for property to iterate through all tasks on the list

<!-- Task List -->
<div id=“task-list” class=“max-w-md mx-auto grid grid-cols-1 gap-2 mt-6”>
    <template x-for=“task in tasks”>
        <div class=“p-4 bg-white hover:bg-gray-100 cursor-pointer flex justify-between items-center border rounded-md”>
            <p>Uncompleted Task</p>
            <button type=“button”>
                <svg class=“h-6 w-6 text-gray-500 hover:text-green-500” xmlns=“http://www.w3.org/2000/svg” fill=“none” viewBox=“0 0 24 24” stroke=“currentColor”>
                    <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z” />
                </svg>
            </button>
        </div>
    </template>
</div>

Now when you reload your page you should have couple of tasks, now let’s modify the task component to be populated with data from our /tasks/ endpoint.

On the <p> tag we will use the x-text property, and :class to bind the line-through class based on task status, finally we will use x-show to display the right task icon based on task status.

Your new task list should look like that

<!-- Task List -->
<div id=“task-list” class=“max-w-md mx-auto grid grid-cols-1 gap-2 mt-6”>
    <template x-for=“task in tasks”>
        <div class=“p-4 bg-white hover:bg-gray-100 cursor-pointer flex justify-between items-center border rounded-md”>
            <p :class=“{ ‘line-through’: task.completed }” x-text=“task.title”></p>
            <button type=“button”>
                <svg x-show=“!task.completed” class=“h-6 w-6 text-gray-500 hover:text-green-500” xmlns=“http://www.w3.org/2000/svg” fill=“none” viewBox=“0 0 24 24” stroke=“currentColor”>
                    <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z” />
                </svg>
                <svg x-show=“task.completed” class=“h-6 w-6 text-green-500 hover:text-gray-500” xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 20 20” fill=“currentColor”>
                    <path fill-rule=“evenodd” d=“M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=“evenodd” />
                </svg>
            </button>
        </div>
    </template>
</div>

Now let’s make the input work. Go back to the script tag and finish the addTask() function, and also add a new variable to taskTitle

taskTitle: ″,
addTask() {
    let self = this;
    let params = new URLSearchParams();
    params.append(‘title’, this.taskTitle );
    axios.post(‘http://127.0.0.1:8000/tasks/create/’, params,
        {
            headers: { ‘X-CSRFToken’: ‘{{ csrf_token }}’ },
        }
        )
        .then(function (response) {
            self.tasks.push(response.data);
            self.taskTitle = ″;
        }).catch(function (error) {
        // handle error
        console.log(error);
      });
},

In this function we create a new task, and on append the task to the tasks array, and reset the taskTitle variable, so the DOM will be updated. Now we just need to bind the taskTitle with the input using x-model property, and fire off the addTask() function on button click, using @click

<!-- Task Input -->
<div id=“task-input” class=“mt-4 flex justify-center”>
    <div class=“m-4 flex”>
        <input x-model=“taskTitle” class=“rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200” placeholder=“Task Title”/>
        <button @click=“if (taskTitle) { addTask() } else { alert(‘task title cannot be empty’)}” 
                                class=“px-8 rounded-r-lg bg-purple-800 text-gray-100 font-bold p-4 uppercase”>Add Task</button>
    </div>
</div>

Now try adding couple of tasks, magic!

Deleting Tasks

Now let’s make deleting task works. First let’s modify the task component, by adding button for deleting tasks, we will also include the @click to trigger the deleteTask function

<!-- Task List -->
<div id=“task-list” class=“max-w-md mx-auto grid grid-cols-1 gap-2 mt-6”>
    <template x-for=“task in tasks”>
        <div class=“p-4 bg-white hover:bg-gray-100 cursor-pointer flex justify-between items-center border rounded-md”>
            <p :class=“{ ‘line-through’: task.completed }” x-text=“task.title”></p>
            <div class=“flex”>
                <button  class=“mr-4” type=“button”>
                    <svg x-show=“!task.completed” class=“h-6 w-6 text-gray-500 hover:text-green-500” xmlns=“http://www.w3.org/2000/svg” fill=“none” viewBox=“0 0 24 24” stroke=“currentColor”>
                        <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z” />
                    </svg>
                    <svg x-show=“task.completed” class=“h-6 w-6 text-green-500 hover:text-gray-500” xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 20 20” fill=“currentColor”>
                        <path fill-rule=“evenodd” d=“M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=“evenodd” />
                    </svg>
                </button> 
                <button @click=“deleteTask(task.id)” type=“button”>
                    <svg class=“h-6 w-6 text-red-400 hover:text-red-600” xmlns=“http://www.w3.org/2000/svg” fill=“none” viewBox=“0 0 24 24” stroke=“currentColor”>
                        <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16” />
                    </svg>
                </button>
            </div>
        </div>
    </template>
</div>

Now scroll down and finish up deleteTask(taskId) function.

deleteTask(taskId) {
  let self = this;
  axios.post(‘http://127.0.0.1:8000/tasks/’ + taskId +  ‘/delete/’, {},
  { headers: { ‘X-CSRFToken’: ‘{{ csrf_token }}’ }})
      .then(function (response) {
          let removeIndex = self.tasks.map(item => item.id).indexOf(taskId);
          ~removeIndex && self.tasks.splice(removeIndex, 1);
      }).catch(function (error) {
      // handle error
      console.log(error);
      });
},

And now we can remove the tasks from the list

Updating Task Status

Let’s finish updateTask(task) function

updateTask(task) {
    let self = this;
    let params = new URLSearchParams();
    if (task.completed) {
        params.append(‘status’, 0);
    } else {
        params.append(‘status’, 1);
    }
    axios.post(‘http://127.0.0.1:8000/tasks/’ + task.id + ‘/update/’, params,
        { headers: { ‘X-CSRFToken’: ‘{{ csrf_token }}’ }})
    .then(function (response) {
        task.completed = !task.completed;
    }).catch(function (error) {
        // handle error
        console.log(error);
    });
}

And add @click property to update button

<button @click=“updateTask(task)”  class=“mr-4” type=“button”>
    <svg x-show=“!task.completed” class=“h-6 w-6 text-gray-500 hover:text-green-500” xmlns=“http://www.w3.org/2000/svg” fill=“none” viewBox=“0 0 24 24” stroke=“currentColor”>
        <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z” />
    </svg>
    <svg x-show=“task.completed” class=“h-6 w-6 text-green-500 hover:text-gray-500” xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 20 20” fill=“currentColor”>
        <path fill-rule=“evenodd” d=“M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=“evenodd” />
    </svg>
</button>

Test it out, and as you can see the task status updates, and the task updates its look!

In this tutorial, you learned how to make a simple to-do list with Django and Alpine.js.

Give me a follow on Twitter, to stay up to date on my latest articles.

ToDo List With Django, DRF, Alpine.JS, and Axios

Maciej — Thu, 23 Jul 2020 16:26:31 +0000

Introduction

To-do List is a pretty basic example app that is often done as one of the first projects, today we will make it a little more interesting by using few interesting technologies.

As the backend we will use Django and Django Rest Framework, and Alpine.js + Axios to glue it all together easily on the frontend.

What is Alpine.js

A pretty new lightwave framework inspired by Vue.js created last year by Caleb Porzio it gives us reactivity and declarativity of React and Vue, while keeping it light, and in the DOM. It’s described as TailwindCSS for JS. And I pretty much agree with that, using it together with Tailwind is a great boost to productivity when doing front-end because you can stay in one HTML file, and keep writing HTML, CSS, and js.

Axios

It’s an asynchronous HTTP client for JS.

Here is a link to finished project GitHub repo

Starting the app

Let’s start by creating a new virtual environment for our project, and installing required packages, then create a new Django project, and a lists app

pip install Django 
pip install djangorestframework
django-admin startproject todo_list
cd todo_list
django-admin startapp lists

Then go to [settings.py](http://settings.py) and add lists and django rest framework app to INSTALLED_APPS

INSTALLED_APPS = [
    ...
    ‘rest_framework’,
    ‘lists’,
]

Creating App Models

Let’s create db models for our To-Do App. We are going to define 2 models, a List Model, and a Task model, Each user can create as many lists as he/she wants, and then add multiple tasks to each list.

from django.contrib.auth.models import User
from django.db import models

class List(models.Model):
    title = models.CharField(max_length=75)
    user = models.ForeignKey(User,
                             on_delete=models.CASCADE,
                             related_name=‘lists’)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

class Task(models.Model):
    parent_list = models.ForeignKey(List,
                                    on_delete=models.CASCADE,
                                    related_name=‘tasks’)
    title = models.CharField(max_length=75)
    completed = models.BooleanField(default=False, 
                                    blank=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

We created a List model with the title field and relation to the user who created the list.

The Task model, has a relation to List object, title, and boolean for the complete status of the task.

Also for both models also 2 DateTime fields for cerated and updated times.

Go to the [admin.py](http://admin.py) file and register the models in the admin panel

from django.contrib import admin

from .models import List, Task

admin.site.register(List)
admin.site.register(Task)

Run the makemigrations and migrate commands.

python manage.py makemigrations
python manage.py migrate

Create API

Create Serializers

Inside the lists app create a new python package (new directory with an empty __init__.py file), and call it api. There create a file [serializers.py](http://serializers.py), views.py, [urls.py](http://urls.py) files inside. Go to [serialziers.py](http://serialziers.py) and create serializers for the models.

from rest_framework import serializers

from ..models import List, Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = (‘title’, ‘completed’, ‘parent_list’)


class ListSerializer(serializers.ModelSerializer):
    tasks = TaskSerializer(many=True, read_only=True)

    class Meta:
        model = List
        fields = (‘title’, ‘tasks’)

Create Viewsets

Now we will create viewsets, that will automatically provide us with Create, Read, Update, and Delete endpoints (CRUD), so we can avoid repetition and writing them for each model. In [views.py](http://views.py) file create viewsets.

from rest_framework import viewsets
from rest_framework.authentication import SessionAuthentication
from rest_framework.permissions import IsAuthenticated

from .serializers import TaskSerializer, ListSerializer
from ..models import Task, List

class ListViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = ListSerializer
    authentication_classes = [SessionAuthentication]
    permission_classes = [IsAuthenticated]

    def get_queryset(self):
        user = self.request.user
        return List.objects.filter(user=user)

        def create(self, request, *args, **kwargs):
        serializer = ListSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save(user=request.user)
            return Response(serializer.validated_data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    authentication_classes = [SessionAuthentication]
    permission_classes = [IsAuthenticated]

    def get_queryset(self):
        user = self.request.user
        return Task.objects.filter(parent_list__user=user)

Register Routes

Now we will create a router to automatically register the url routes for our models. Open urls.py...

from django.urls import path, include
from rest_framework import routers

from . import views

router = routers.DefaultRouter()
router.register(“lists”, views.ListViewSet)
router.register(“tasks”, views.TaskViewSet)

app_name = “lists”
urlpatterns = [
    path(“”, include(router.urls)),
]

And finally, include them in the main [urls.py](http://urls.py) of the project.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path(‘admin/’, admin.site.urls),
    path(“api/“, include(“lists.api.urls”, namespace=“api”)),
]

Website Backend

Now go to lists/views.py and create routes for home, and the list detali viewurls

from django.contrib.auth.decorators import login_required
from django.shortcuts import render, get_object_or_404

from .models import List

@login_required
def home(request):
    return render(request, ‘index.html’, {
        ‘lists’: request.user.lists.all()
    })


@login_required
def list_detail(request, list_id):
    user_list = get_object_or_404(List, id=list_id)
    return render(request, ‘detail.html’, {
        ‘list’: user_list
    })

Now create a [urls.py](http://urls.py) file inside the lists app, and register the home route.

from django.urls import path

from . import views

app_name = ‘lists’
urlpatterns = [
    path(″, views.home, name=‘home’),
    path(‘list/<list_id>/’, views.list_detail, 
         name=‘detail’),
]

Now go to main [urls.py](http://urls.py) file inside the todo_list project directory, and include the lists app urls.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path(‘admin/’, admin.site.urls),
    path(“api/“, include(“dashboard.api.urls”, namespace=“api”)),
    path(″, include(‘lists.urls’, namespace=‘lists’)),
]

Front-end

We are done with the backend, now let’s create our front-end. In the lists app create a directory called templates, and inside create 3 files base.html, index.html, and detail.html.

base.html

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”/>
    <title>{% block title %} {% endblock %}</title>

    <link href=“https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=“stylesheet”>

    <script src=“https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js” defer></script>
    <script src=“https://unpkg.com/axios/dist/axios.min.js”></script>
</head>
<body class=“bg-gray-100”>


    <div class=“bg-green-500 py-8 text-center”>
        <h1 class=“text-gray-100 font-black text-4xl tracking-5”>To-Do List App</h1>
        <p class=“text-green-800 font-medium font-mono text-sm”>Written with Django, Django Rest Framework, TailwindCSS, Alpine.js</p>
    </div>
{% block content %}
{% endblock %}

</body>
</html>

This is the base.html file for our app, in the head, we created a django template block for title, and included TailwindCss for styling our app, Alpine.js and Axios for making async HTTP requests.

In the body tag we created a content block

index.html

{% extends “base.html” %}

{% block title %}
To-Do List App
{% endblock %}

{% block content %}

<div class=“mx-4 md:mx-32 my-16 bg-white shadow p-8 px-8 rounded-sm”>
    <h2 class=“text-green-500 font-black text-2xl uppercase text-center”>{{ request.user.username }}’s Lists</h2>
    <form id=“list-form”>
        {% csrf_token %}
      </form>
    <div class=“flex justify-end mt-4”>
        <div class=“rounded-md border shadow p-2 flex-1 inline-flex”>
            <input class=“mr-2 w-5/6” type=“text” placeholder=“new list”>
            <button class=“w-1/6 border px-2 py-1 font-mono text-sm bg-green-400 hover:bg-green-500 active:bg-green-700 text-gray-100”>Add List</button>
        </div>
    </div>

    <ul class=“mt-4”>
        {% for list in lists %}
        <li class=“bg-gray-100 border border-gray-300 rounded-md shadow-sm p-2 px-4 my-2 flex justify-between”>
            <a href=“{% url ‘lists:detail’ list.id  %}” class=“border border-gray-100 text-green-800 font-mono px-2 py-1 hover:text-green-500”>{{ list.title }}</a>
            <button class=“border px-2 py-1 font-mono text-sm bg-red-400 hover:bg-red-500 text-gray-100”>Delete List</button>
        </li>
        {% endfor %}
    </ul>

</div>

{% endblock %}

In the index.html we fill the content block, by creating, input with a button for adding new lists,

and display the user lists, with anchor tag linking to the details page. there is also delete button.

We will implement the create and delete funcionality with alpine.js and axios.

detail.html

{% extends “base.html” %}

{% block title %}
{{ list.title }} - ToDos
{% endblock %}

{% block content %}

<div class=“mx-4 md:mx-32 my-16 bg-white shadow p-8 px-8 rounded-sm”>
    <h2 class=“text-green-500 font-black text-2xl uppercase text-center”>{{ list.title }}’s ToDos</h2>
    <form id=“list-form”>
        {% csrf_token %}
    </form>
    <div class=“flex justify-end mt-4”>
        <div class=“rounded-md border shadow p-2 flex-1 inline-flex”>
            <input class=“mr-2 w-5/6” type=“text” placeholder=“new task”>
            <button class=“w-1/6 border px-2 py-1 font-mono text-sm bg-green-400 hover:bg-green-500 active:bg-green-700 text-gray-100”>Add Task</button>
        </div>
    </div>

    <ul class=“mt-4”>
        {% for task in list.tasks.all %}
        <li class=“bg-gray-100 border border-gray-300 rounded-md shadow-sm p-2 px-4 my-2 flex justify-between font-mono”>
            <div class=“flex justify-start”>
                <button class=“mr-2”>
                    <svg class=“h-5 text-gray-500 hover:text-red-500” fill=“none” stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” viewBox=“0 0 24 24” stroke=“currentColor”><path d=“M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z”></path></svg>
                </button>
                <p class=“text-gray-800”>{{ task.title }}</p>
            </div>
            {% if task.completed %}
                <button class=“text-green-500 hover:text-gray-500 cursor-pointer”>Completed</button>
            {% else %}
                <button class=“text-gray-500 hover:text-green-500 cursor-pointer”>Not Completed</button>
            {% endif %}

        </li>
        {% endfor %}
    </ul>
</div>

{% endblock %}

in detail.html we create a similar view, with input for adding tasks, button to remove tasks, and button to switch between task status.

Now create a superuser, and run a server

python manage.py createsuperuser
python manage.py runserver

Go to the http://127.0.0.1:8000/admin/and create couple lists, and tasks with different statuses, then go to the http://127.0.0.1:8000/ and you should see view like that.

By clicking The Title of the list we will be moved to the list detail page

Now let’s put it all together using Alpine.js and Axios

Introducing Alpine.js

let’s go to index.html and let’s switch the {% for list in lists %} to be an alpine.js template. To do so edit the code like below.

<div x-data=“getLists()” class=“mx-4 md:mx-32 my-16 bg-white shadow p-8 px-8 rounded-sm”>
    <h2 class=“text-green-500 font-black text-2xl uppercase text-center”>{{ request.user.username }}‘s Lists</h2>
    <form id=“list-form”>
        {% csrf_token %}
    </form>
    <div class=“flex justify-end mt-4”>
        <div class=“rounded-md border shadow p-2 flex-1 inline-flex”>
            <input class=“mr-2 w-5/6” type=“text” placeholder=“new list”>
            <button class=“w-1/6 border px-2 py-1 font-mono text-sm bg-green-400 hover:bg-green-500 active:bg-green-700 text-gray-100”>Add List</button>
        </div>
    </div>

    <ul class=“mt-4”>
        <template x-for=“list in lists”>
            <li class=“bg-gray-100 border border-gray-300 rounded-md shadow-sm p-2 px-4 my-2 flex justify-between”>
                <a
                        x-text=“list.title”
                        x-bind:href=“‘/list/‘+list.id”
                        class=“border border-gray-100 text-green-800 font-mono px-2 py-1 hover:text-green-500”></a>
                <button class=“border px-2 py-1 font-mono text-sm bg-red-400 hover:bg-red-500 text-gray-100”>Delete List</button>
            </li>
        </template>
    </ul>

</div>

<script>
const csrftoken = document.querySelector(‘#list-form > input’).value;

const getLists = () => {
    return {
        lists: [
            {% for l in lists %}
            { ‘title’: ‘{{ l.title }}’, ‘id’: ‘{{ l.id }}’ },
            {% endfor %}
        ]
    }
};
</script>

{% endblock %}

So what we did here? First, we added an x-data attribute to the div holding our list, from the getTask method, which we defined at the bottom in the script tag. As you can see we moved the Django template for loop there to create a json object.

Finally, we removed the Django for loop from ul element, and we wrapped the li element in the template tag. which has x-for attribute that loops over the json array of list items.

We used x-bind:href and x-text to fill the tag with values from json.

Adding Lists

First, add a variable to json returned by getTasks(), and function to make a post request

const getLists = () => {
    return {
                newList: ″,
        lists: [
            {% for l in lists %}
            { ‘title’: ‘{{ l.title }}’, ‘id’: ‘{{ l.id }}’ },
            {% endfor %}
        ]
    }
};

const csrftoken = document.querySelector(‘#list-form > input’).value;

const addList = async title => {
    try {
    const res = await axios.post(‘/api/lists/’,
        { title },
        { headers: { ‘X-CSRFToken’: csrftoken }}
        );
    location.reload();
      } catch (e) {
        console.error(e);
      }
};

Then find the input element and edit it

<div class=“rounded-md border shadow p-2 flex-1 inline-flex”>
    <input x-model=“newList” class=“mr-2 w-5/6” type=“text” placeholder=“new list”>
    <button @click=“addList(newList)” type=“button” class=“w-1/6 border px-2 py-1 font-mono text-sm bg-green-400 hover:bg-green-500 active:bg-green-700 text-gray-100”>Add List</button>
</div>

We gave the input x-model attribute with the value set to newList

On the button we add @click listener, which will trigger addList function and pass the value of newList, if the request is successful it will reload the page to show the new item. Give it a try and try adding a few lists.

Removing Lists.

Removing lists will be even easier. First, add new axios function in our script tag.

const removeList = async listId => {
    try {
    const res = await axios.delete(‘/api/lists/’ + listId + ‘/’,
        { headers: { ‘X-CSRFToken’: csrftoken }}
        );
    location.reload();
      } catch (e) {
        console.error(e);
      }
};

Then edit the delete button by adding @click attribute and

<template x-for=“list in lists”>
    <li class=“bg-gray-100 border border-gray-300 rounded-md shadow-sm p-2 px-4 my-2 flex justify-between”>
        <a
            x-text=“list.title”
            x-bind:href=“‘/list/’+list.id”
            class=“border border-gray-100 text-green-800 font-mono px-2 py-1 hover:text-green-500”></a>
        <button @click=“removeList(list.id)”
                class=“border px-2 py-1 font-mono text-sm bg-red-400 hover:bg-red-500 text-gray-100”>
                     Delete List</button>
    </li>
</template>

Adding and removing tasks

Now we have to do the same for the tasks. open the detail.html and edit it like so.

{% extends “base.html” %}

{% block title %}
{{ list.title }} - ToDos
{% endblock %}

{% block content %}

<div x-data=“getTasks()” class=“mx-4 md:mx-32 my-16 bg-white shadow p-8 px-8 rounded-sm”>
    <h2 class=“text-green-500 font-black text-2xl uppercase text-center”>{{ list.title }}’s ToDos</h2>
    <form id=“list-form”>
        {% csrf_token %}
    </form>
    <div class=“flex justify-end mt-4”>
        <div class=“rounded-md border shadow p-2 flex-1 inline-flex”>
            <input x-model=“newTask” class=“mr-2 w-5/6” type=“text” placeholder=“new task”>
            <button @click=“addTask(newTask, {{ list.id }} )” class=“w-1/6 border px-2 py-1 font-mono text-sm bg-green-400 hover:bg-green-500 active:bg-green-700 text-gray-100”>Add Task</button>
        </div>
    </div>

    <ul class=“mt-4”>
        <template x-for=“task in tasks”>
            <li class=“bg-gray-100 border border-gray-300 rounded-md shadow-sm p-2 px-4 my-2 flex justify-between font-mono”>
                <div class=“flex justify-start”>
                    <button @click=“removeTask(task.id)” class=“mr-2”>
                        <svg class=“h-5 text-gray-500 hover:text-red-500” fill=“none” stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” viewBox=“0 0 24 24” stroke=“currentColor”><path d=“M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z”></path></svg>
                    </button>
                    <p class=“text-gray-800” x-text=“task.title”></p>
                </div>
                <button x-show=“task.status == ‘True’” class=“text-green-500 hover:text-gray-500 cursor-pointer”>Completed</button>
                <button x-show=“task.status == ‘False’” class=“text-gray-500 hover:text-green-500 cursor-pointer”>Not Completed</button>
            </li>
        </template>
    </ul>
</div>

<script>

const csrftoken = document.querySelector(‘#list-form > input’).value;

const getTasks = () => {
    return {
        newTask: ″,
        tasks: [
            {% for t in list.tasks.all %}
            { ‘title’: ‘{{ t.title }}’, ‘id’: ‘{{ t.id }}’, ‘status’: ‘{{ t.completed }}’ },
            {% endfor %}
        ]
    }
};

const addTask = async (title, listId) => {
    try {
    const res = await axios.post(‘/api/tasks/’,
        { title, parent_list: listId },
        { headers: { ‘X-CSRFToken’: csrftoken }}
        );
    location.reload();
      } catch (e) {
        console.error(e);
      }
};

const removeTask = async taskId => {
    try {
    const res = await axios.delete(‘/api/tasks/’ + taskId + ‘/’,
        { headers: { ‘X-CSRFToken’: csrftoken }}
        );
    location.reload();
      } catch (e) {
        console.error(e);
      }
};

</script>

{% endblock %}

Here we implemented the same way adding and removing of list tasks.

Now let’s add task status updating. Create function updateTask

const updateTask = async (taskId, taskStatus) => {
    try {
    const res = await axios.patch(‘/api/tasks/’ + taskId + ‘/’,
        { id: taskId, completed: taskStatus},
        { headers: { ‘X-CSRFToken’: csrftoken }}
        );
    location.reload();
      } catch (e) {
        console.error(e);
      }
};

Then Add the function call on the status buttons

<template x-for=“task in tasks”>
    <li class=“bg-gray-100 border border-gray-300 rounded-md shadow-sm p-2 px-4 my-2 flex justify-between font-mono”>
        <div class=“flex justify-start”>
            <button @click=“removeTask(task.id)” class=“mr-2”>
                <svg class=“h-5 text-gray-500 hover:text-red-500” fill=“none” stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” viewBox=“0 0 24 24” stroke=“currentColor”><path d=“M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z”></path></svg>
            </button>
            <p class=“text-gray-800” x-text=“task.title”></p>
        </div>
        <button @click=“updateTask(task.id, false)”
                x-show=“task.status == ‘True’” class=“text-green-500 hover:text-gray-500 cursor-pointer”>Completed</button>
        <button @click=“updateTask(task.id, true)”
                x-show=“task.status == ‘False’” class=“text-gray-500 hover:text-green-500 cursor-pointer”>Not Completed</button>
    </li>
</template>

And this is the basic To-Do List implemented with Django, DRF, Alpine.js, and Axios.

Next Steps

Create users registration and pages
Update the Dom instead of page reloads after successful Axios requests.

I hope you learned something new, give me a follow on Twitter, to see when I post new stuff.

How To Freelance on Freelancer.com with no experience

Maciej — Sun, 12 Jul 2020 19:14:16 +0000

Introduction

Freelancing is a great way to make a living as a developer, you have more freedom, and its easier to work remotely. However with little to none professional experience it might be hard to get your first client. Freelancing marketplaces like Upwork and Freelancer lower the barrier of entry for new developers with no experience, making it easier for them to get the first working experience as a freelancer, then you can leverage it to get more freelancing projects or full-time position.

My experience

I started freelancing part-time on Freelancer.com in late 2017, and it allowed me to earn a nice side income while I was learning programming. If you live in eastern europe, asia, africa or south america, you can easily earn a full-time income. I earned about $35K USD over 2 years, I was starting out with 0 professional programming experience, and fresh into learning python (about 4 months after I started), and only working about 10-30 hours a week, so I had plenty time for more learning.

As I only freelanced successfully on Freelancer.com, my advice will be more related to this marketplace, but most of them work same way, so it should be applicable to most of popular freelance market places.

Areas

As a developer, there are many areas where you can look for freelancing projects. Here are some topics you can explore.

software development
web development
DevOps
Testing
web design
marketing
copywriting
graphic design

What you can do with Python

here are few examples of types of projects I did with Python, and best packages that can be used for this type of projects.

Websites ( Django, Flask, Pyramid)
REST APIs (Django REST Framework, Flask-Restful, Pyramid, FastAPI)
Web Scraping (requests, bs4, selenium, pandas)
Testing (unittest, pytest, selenium)
Data Visualization (pandas, matplotlib, bokeh)
Desktop Applications (tkinter, wxPython, PyQT5, Toga)

Marketplaces Available

This is the list of most popular freelancing marketplaces, I recommend to just focus on 2-3.

Freelancer.com
Upwork.com
Fiverr.com
Guru.com
hubstaff talent
Peopleperhour.com
Toptal.com

Building a Profile that stands out

First step to getting your first paid project, is building a great profile, there are thousands of freelancers on each of those marketplaces, to increase your chances of getting the projects, you have to make sure your profile stands out. If you have an empty profile and post a great proposal to a client, you are most probably going to be overlooked.

Profile Photo

First Element of building a great profile, is your face which is the face the clients will see when you bid on their projects. You need to have a good quality professional looking photo. It doesn't have to be made by a pro photographer, just make sure the quality is good, and the photo is a headshot.

Don't use selfies, don't add weird filters distorting the image, don't use a photo of a person that isn't you.

If you are freelancing as a company you can use your logo.

Portfolio

This will largely depend on what is your area, if you are doing web dev/design you want to put your best looking work there, and describe what it is, how you completed it, and what was the client's benefit from the work. Include good quality screenshots in your case study.
Some projects are not ideal for putting in visual portfolio (web scraping, devops), in those cases I recommend putting screenshots of data tables (in case of web scraping ), or code samples. With detailed written descriptions.

If you haven't any projects to put in your portfolio, make few small side projects, and document them nicely.
When I was starting out I was doing web scraping, and didn't have any projects to show, so I found couple of different types of websites, I scraped data from them, cleaned it, and made screenshots and descriptions to put in my portfolio.

Description

This is where you write about yourself, and show the potential clients that you are the perfect person for the job.
Include few words about yourself and your experience. If you are beginner you can state so, there are many projects that are beginner friendly and clients that don't mind giving beginners a chance (for a low price of course) .

Write about what do you offer, and your availability.

Finish with some call to action, like "Contact me now to chat about your project".

Skills List

This is pretty self explanatory, you want to put here all the skills you feel comfortable enough to market yourself with, if you are learning something, you can put it there. Getting a freelance project connected to a skill you are just learning is excellent way to learn by doing. This is how I learnt Django, after finishing the official Django tutorial, and writing a simple blog with it, I scored a pretty simple Django project, that put my skills to a test right away. I managed to complete the project not with out its challenges, but after all was done the client was happy with the result, I had money in the pocket, and much more confidence about my Django skills.

If you don't fill at all confident in some skills, and are not sure you would be able to complete projects with it, just don't put it in your skill list.

Another thing you can do is putting similar skills, sometimes projects will be tagged, with few skills that are basically the same, for example in web dev projects you can see sometimes projects tagged with skill: PHP, Django, Flask, this probably means that the client doesn't care what language/framework you will use to complete the project, they just put some tags that they know are connected to the project because they want to increase the numbers of freelancers the project reaches.

So if you are working mainly with Django, don't be afraid to put Flask or Pyramid there too, even if you never used it.

When setting your country never set a fake one, some freelancers from poorer countries, will set their country to USA, UK or other in hopes of getting more projects or better paid projects.

When clients contacts you and you answer in broken English, or they ask you some further questions about where you from and catches you in a lie, it's going to be a very bad look.

Never lie on your profile.

Pricing

Pricing in freelancing is a very broad topic, and could have its own articles or even books dedicated to it. There are few pricing models you can use as a freelancer depending on your experience and negotiating skills. Each pricing model has its pros and cons.

Hourly

This is a common model, where we are getting paid by the hour worked.

Fixed

Fixed price model is a bit better where you give the client the fixed price for the task, based on your estimation, so you can upon yourself if the project will take you longer then anticipated, but also your time will be more valuable if you finish it faster. This was my preferred method when working on freelancer.com, I think I never used hourly pricing model there.

Value Based

This is a much harder model to get right, and you need some degree of negotiating skill and reputation as freelance to succeed with it, you are pricing the project based on the value provided to the client, and not the amount of hours worked by you.

To do it you have to estimate how much $ value will your project bring your client. First we have to look at the size of our client.

Let's say we are making a sales website for a client. We will price the same site differently for a small solopreneur running his own business, and differently a company of 50 people.

Getting Social Proof

Ok so you have set up your profile, made a professional profile pic and description, filled your portfolio and skills. Now you are ready to start looking for your first project, but before we do it there is a small thing we can do to increase our chances of getting that first project, by getting some social proof.
What I mean by that, is freelancer's reputation on those websites is determined by their rating and reviews. When I am hiring a freelancer through one of those websites first things I look at is the rating, and number of reviews, if I like the numbers only then I will go further into the freelancer's profile to determine if they are a good fit.

So to increase your chances ask your family, friend to post a small project for you on the site and leave a positive review, you can even write the review yourself.

If you don't feel this is sincere, help them first using your skill (your family member has a business? offer to improve their site, or make something else using your skills), and then ask them for the review.
This is exactly what I done to get my first 2 reviews, is asking my mom and friend that I helped for reviews.

This should increase your chances of at least getting a reply from a potential client.

Bidding for your first Project

Ok so now we are getting to the hard part. To succeed as a freelancer on those marketplaces you need to 2 things: PATIENCE AND PERSISTANCE.
The process of getting your first project may be long, it took me probably around 2 months before I got my first real project, and it was a 50$ job.

Make a pact with yourself, that you will go to your marketplace everyday, and bid on projects that match your skill.

When writing the proposal, don't talk to much about yourself, just 1-2 sentences why you are best for the job. Then write what benefit you will bring to the client.

When writing the proposal make sure to refer to things client has written in the project description, that will show him you actually read the project description (80% of the other bids on the project will be automated by other freelancers). Always try to make your proposal personalized for each project you are bidding on. This takes longer than just copy pasting pre written bid, but is so much more effective. It's important to show the client you have the understanding of what he wants.

Also keeping your freelancer open will increase a change that someone will write to you, as you show up online, so i recommend keeping the tab with freelancer site open at all times, at least at the start when you are struggling for projects.

First Goal is to get an answer

Your first goal is to get an answer from a client, not a project award, just an answer. This shows you are doing something right. If you are bidding for a very long time and you still don't get answers, try to switch things around in your profile, try better description, change a CTA, or make a better profile pic, or work on your proposal pitch.

When you get first answer you know you are on the right path, and you are very close to getting your first project.

Winning the project

Hurray! You have won your first project. So client decided to go with you, and awarded you the project. Here are some things to look out for before accepting the project and start working

Make sure you are on the same page with requirements and scope of work - I cannot stress how important this is. If you and the clients have different expectations this can lead to issues.
If you are doing fixed price project on freelancer.com make sure a payment is created before accepting the project (freelancer.com uses escrow)
If you have discussed the details on a call, make sure you also get the copy of requirements and scope of work in writing from client, to avoid potential issues
Trust your intuition, if client feels sketchy, rude, talks down to you, or is just simply strange in a bad way, politely turn down the project. You don't want to deal with a bad client, when he holds a potential 1 star rating over you when you are starting out. Each time I went against my intuition regarding a client, I regretted it.

Your first project

So now you are on the first page with client, payment is created and you are ready to start working.

It's very important that you give your best on this project, you don't' want to get anything less then 5 or 4 starts on this project. Apart of completing the project well and on time there are other things you can do to make sure client will be vary happy with you, and give you a 5 star rating, and possibly more projects down the line.

Keep the client updated on the progress, send him screenshots and samples as you go
Ask for feedback or opinions on parts of the project
Just be a nice and kind person

Problems with completing the project

Sometimes we aren't able to complete the project, life throws something our way, or the project was simply much more complex then initially thought. To handle it well with your client, just tell him why you can't finish your project with 100% honesty. If you are quitting the project early offer to help finding replacement, and brining the new freelancer up to speed with the project. Most clients will be understanding about this, and will agree to cancel the project, some will even pay you for the time you put in so far, and some even will live 5 stars regardless if you completed the job or not. If you handle this well, and the client is a decent person (90% of your clients should) they won't give you a 1 star rating just for that. If you ghosted them, expect to get a 1 star rating.

Problems with client

Sometimes the problems aren't coming from us, but from the client. For example client wants additional work done outside of the scope of work initially agreed to.

If it it a small thing you may be inclined to do it for no extra charge ("Sure no problem"), but this is a treacherous path, because next time the client will ask you for a bigger thing to add, which you are not comfortable with adding for free, and when you ask for more money he will tell you "But you did that other thing for free", so instead of doing the small favors you should say "Sure no problem, let me give you updated price with this change", either the client will agree with out a peep or say "oh I didn't know it costs extra", and that will be the end of that.

Another common problem is after you completed the job, and sent over the deliverables, a client that was answering right away, now is silent for days or for weeks.
This sometimes happens clients ghost you or simply forget, if you are using freelancer.com this is not too much of a problem because of escrow. 1st step is to contact the client, and if he still doesn't answer, another thing you can do is ask marketplace support to send him a message reminding him that he has to pay, if that fails you can open a dispute, and if client won't answer in 2 weeks the dispute will be automatically won by you.

Dealing with 1 Star

Ok so something went terribly wrong, you broke something, or you had a bad client, and they left you or threating to leave a 1 star rating. 1st offer to fix things for free, to avoid the rating, or try talking with the client why 1 star rating will be very bad for you, if they understand then great, hoverer if they can't be moved just accept it and move on. I received 1 star rating 2 times, and never got a client asking about it, nor I noticed less projects because of it.

Try to keep your ratings high, but if some clients just can't be reasoned with leave it and don't lose sleep over it.

Pros & Cons

Finally let's look at some Pros and Cons on freelancing on online marketplaces like freelancer.com.

While they are great platforms to start freelancing, there is plenty cons, which lead me to ultimately stop using it for my income.

Pros:

Location Independent Income
Has Escrow System to ensure you are getting paid
Gives you learning opportunites
You can find job with out experience and start building your client network

Cons:

Closed platform, they don't allow to take payments and communications outside the site
High fees, add your normal taxes to it, and you are left with 50-70% original amount you were paid .
Support doesn't help with resolving conflicts for freelancers, and always take client's side
A lot of clients wanting to do things cheapest way possible, not knowing how much effort the project they want takes.

What next

Now you have a step by step way to start earning a side income on freelancer.com you just need to put them in action.

Follow me on twitter where I post about Freelancing, web development and Python.

SEO For Django: 5 Methods To Improve SEO

Maciej — Sat, 04 Jul 2020 07:12:28 +0000

This Week I decide to look into improving the SEO of my personal website. I don't know much about it, but after some research I found few things developers can do on their Django websites to improve your SEO.

What is SEO?

What is Search engine optimisation? It's a huge topic, but all you need to know as a web developer is that it's about making changes (optimising) to your website, to make it easier for search engines like Google to crawl, and index your content, which makes it easier for people to discover your content.

Why Should You Learn It?

Developers should learn SEO so they can plan for it when developing for the web. If you don’t optimise your page, it will not show up in searches, so other people won’t know your site exists. Also it’s a great complementary skill for freelancing web developers, so they can offer their clients fuller service package.

Let’s look at few ways to improve SEO of our Django site.

Slugs

Django provides a SlugField for its models. Slugs are short labels containing only letters, numbers, underscores or hyphens. We should create the URLs based on Slug fields. To create a canonical URL for the Post model, we use a Django convention to add a method for creating the URLs get_absolute_url()

from django.db import models
from django.utils import timezone


class Post(models.Model):
    title = models.CharField(max_length=250)
    slug = models.SlugField(max_length=250, unique_for_date=‘publish’)
    publish = models.DateTimeField(default=timezone.now)    

    def get_absolute_url(self):
        return reverse(‘blog:post_detail’,
                            args=[self.publish.year,
                                    self.publish.month,
                                    self.publish.day, self.slug])

Here we create a Post model, and the canonical URL will be created based on the published date and the slug for example /2020/04/07/post-title/

Meta Tags

Meta tags provide the search engines with information about your site, they should be placed within <head> tag in the HTML document.

title
When your page appears in the search results this, will be the first line/link.

Each page should have an unique title tag, and it should be short and descriptive.

Don't use generic titles, or the same title on multiple pages.

<title>This is page Title</title>

description
This is the most important tag, it provides a description about the page of your website. Google will often use them as a preview snippet in the results of search.
The descriptions should be unique for each page, summarise what the page is about, and be 1-2 sentences short. Same as with title, don't make it generic or repeating over page.

<meta name="description" property="og:description" content="This article looks at 6 methods developers can use to improve SEO of their Django Website">

keywords
This is a meta tag for keywords, it’s pretty self explanatory. Here we enter the keywords summarising our page.

<meta name="keywords" content="seo, python, django, web development">

author
In this tag we specify the name of the author if it’s an article or something similar.

<meta name="author" content="Maciej Janowski">

Open Graph Meta Tags

Open Graph was created by Facebook to promote integration between Facebook and 3rd party website, by allowing pasted content to become “graph” objects. It gives control over how information travels from your page to 3rd party website. Other websites that recognize Open Graph meta tags are Twitter, LinkedIn, Google+. You can identify them by their property attribute begging with “og:”

<meta property="og:url" content="https://janowski.dev/blog/2020/04/05/Intresting-article" />
<meta property="og:title" content="Intresting Article" />
<meta property="og:image" content="https://janowski.dev/static/cover.png" />
<meta property="og:image:alt" content="A green cover image with Django logo" />

Twitter Tags

Another Type of Meta Tags are Twitter Tags.

They decide how will our link show up in twitter as a twitter card when we share it. We can test it here

<meta name="twitter:image" content="https//example.com/image.png" />
<meta property="twitter:image:alt" content="Description of the image" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@MaciejJanowski" />

Sitemap

A sitemap is an XML file that tells search engines the pages of your website, their relevance, and how frequently they are updated. Using Sitemaps will make your site more visible in search engine ranking because sitemaps help crawlers to index your website's content.

Django comes with a sitemap framework, which allows us to generate sitemaps dynamically.

To install the Sitemap framework open [settings.py](http://settings.py) and add django.contrib.sites and django.contrib.sitemaps to the INSTALLED_APPS setting, and define a new ID for the site.

SITE_ID = 1

INSTALLED_APPS = [
   ...
    'django.contrib.sites',
    'django.contrib.sitemaps',
]

Now create the tables for the site application

python manage.py migrate

Inside the application of your site let's say "blog" create a new file called sitemaps.py

Assuming we have a model called Post inside our "blog" application

from django.contrib.sitemaps import Sitemap

from .models import Post

class PostSitemap(Sitemap):
        changefreq = "weekly"
        priority = 0.9

        def items(self):
                return Post.objects.all()

        def lastmod(self, obj):
                return obj.updated

Finally go to the main urls.py of the project and add the sitemap, as follows

from django.urls import path, include
from django.contrib.sitemaps.views import sitemap

from blog.sitemaps import PostSitemap

sitemaps = {
        "posts": PostSitemap,
}

urlpatterns = [
        path('blog/', include('blog.urls', namespace='blog')),
        path('sitemap.xml', sitemap, {'sitemaps': sitemaps},
                        name='django.contrib.sitemaps.views.sitemap')
]

Now you can access the sitemap after opening http://127.0.0.1:8000/sitemap.xml

You should see output similar to this.

This only scratches the surface of SEO, there is much much more to it.

Check out the tools and resources below to learn more about SEO for Developers.

Useful Tools

Lighthouse - Tool from google for calculating score for SEO, Accessibility and few other key metrics.
Google Pagespeed Insights - Another Google Tool, gives our site’s speed score or desktop and mobile.
Twitter Card Validator - Twitter tool for validating and previewing the Twitter Card.

Other Resources

Making Django App Publicly Accessible With Ngrok

Maciej — Sun, 28 Jun 2020 18:14:22 +0000

Sometimes when developing our Django application, we need to make it publicly accessible or use https, for example when testing OAuth authentication sometimes https is enforced, or when testing Shopify webhooks (where the request is executed on Shopify server, so we need to make it publicly available), or simply when we want to share it with a friend without deploying it live.

To achieve it We can use ngrok to redirect what you are running on localhost to publicly available ngrok URL. Let’s get started.

Installing ngrok

on mac, we can install it simply with brew.

brew cask install ngrok

For windows we can download it from here.

Running ngrok

o start ngrok we simply type “ngrok http [port]“, in our case we use port 8000, because it’s the default Django development server port.

ngrok http 8000

you will see the ngrok screen, and your ngrok URL, in my case it’s http://5cedabab7730.ngrok.io, you also have https connection available.

Now go to settings.py and add 5cedabab7730.ngrok.io to ALLOWED_HOSTS. Run your Django development server.

python manage.py runserver

Now your Django App is available to the world under https://5cedabab7730.ngrok.io you can test external APIs, authentications, or share what you working on with your friends.