DEV Community: Omar Sinan

Creating a Todo List App with React (using Hooks and Contexts)

Omar Sinan — Sat, 04 Jul 2020 16:30:24 +0000

One of the things that has worked out for me while learning a new language or framework is to create a small app as soon as I have learned a few crucial concepts. What better way to learn than to apply concepts directly to a practical project? In my case, I learned about React Hooks and Contexts a few days ago. It took me a couple of days to get a grasp of the idea, but I managed to create my first React app on day 5 of learning React. In this blog post I will go into the details of the app and provide my favorite resources when it comes to learning React.

The app is a simple to-do list app, but I tried my best to expose myself to concepts that seem daunting to some (including myself) in the beginning. These were primarily Hooks and Contexts. By reading this blog post, I hope that you'll gain a deeper understanding of Hooks and Contexts and you'll have made your own custom hook (yay!). Check it out:

Alright! Let's get started with React Hooks.

Let's talk about React Hooks

You've probably heard this term many times while learning React, and there's a reason for that. React hooks play a crucial part in almost every React app you'll create. That's why it is important to understand what they are. Let's take a look at the official React docs and see what React hooks are (link):

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

Let's make sense of that. Before hooks, if you ever wanted to use states in your components, you needed to use classes. States are objects that hold information, when states are updated it forces the component to re-render. With hooks, you can now incorporate states within your functional components using useState().

So... what states will we need in the case of our to-do list app? The first question to think about is what are some things that you are storing/holding? What are the things, that when updated, you'd like the component to re-render? What first comes to mind is an array of tasks. A user should be able to write a task, click the add button and have the task appear in the table below. So, we'll need to use states to keep track of these tasks. A task object will have the following structure:



{
  id: v4(),
  task,
  complete: false
}

Where id is a unique identifier using v4() from the uuid library. We'll use this identifier when we want to refer to a specific task. For example, when a user wants to complete a task, it would be easier if we had a unique identifier for us to know which task the user is referring to.

A Primer on React Contexts

Before we start talking about React Contexts, it's important to understand the different approaches you can take when it comes to state management for this app.

One approach is to have the necessary states being handled by the component itself, for example, managing the state of tasks in the TaskList component. However, over time, this approach will result in states being all over the place, and in larger applications it will be more difficult to debug.

Another approach is to handle all states at the root of your app. That is, storing all possible states that your entire app needs to manage in the App component. You might think that this would solve the issue, however, let's say you have a Task component that takes care of displaying a single task. You also have a TaskList component that contains a bunch of Task components. When you complete a task, you must pass the new state backwards all the way to the root. That would mean that the state must be passed from Task to the TaskList to the App. Now think about what would happen if instead of a single stop in between, you had 5+ components. This nesting will result in a very inefficient way of passing state changes between components that don't even care about the change of the state. That means, when you complete a task, the TaskList doesn't care and doesn't need that information, the App needs it. There are probably other ways to manage states, but if you're still confused, this might clear it up:

This is where contexts come in. You can setup a context provider and wrap it around your app or the part of the app that uses the to-do list. This context provider will let us have the best of both worlds. We will still store our states in a single location, but when passing data around, it doesn't need to pass through components that don't need this data. In this case, the Task component will be the context consumer as it will make use of this context provider to pass data directly to the root of the app. Visually, this is what's happening:

Now that you see the advantage of using React contexts, let's create our own context provider and a custom hook that allows us to communicate with that context. That way, the other components can pass data directly to the context without dealing with any intermediary components.

Writing our own Context Provider

I will first show you the code of our context provider (stored in TaskProvider.js), and then we can walk through what the code actually does:



// 1
import React, {createContext, useState, useContext} from 'react'
import { v4 } from "uuid"

// 2
const TaskContext = createContext()
export const useTasks = () => useContext(TaskContext)

export default function TaskProvider({ children }) {
  // 3
  const [tasks, setTasks] = useState([])

  // 4
  const addTask = task =>
      setTasks([
          ...tasks,
          {
              id: v4(),
              task,
              complete: false
          }
      ])

  // 5
  const setStatusTask = (id, status) => {
      setTasks(tasks.map(t => t.id === id ? {...t, complete: status} : t))
  }

  // 6
  return (
      <TaskContext.Provider value={{ tasks, addTask, setStatusTask }}>
          { children }
      </TaskContext.Provider>
  )
}

In the first line we import React and two hooks (useState and useContext) that we'll be using, as well as createContext.
Here we use createContext to create, well... a context. Context consumers can access the states. We also create our own hook—useTasks that calls useContext on the context we just created. This is just to make it easier for other components to get access to the tasks array and other necessary helper functions.
We use the useState hook and pass it the default value, a list of tasks which will be an empty array in our case. useState returns an array of two objects, the value of the state (i.e. the array of tasks) and a function that can be used to change that value.
Here we create an addTask function that other components will be able to use in order to add a task. We use setTasks to change tasks to what it originally was plus the new task with a unique id using v4(). Note that we could have skipped this and just gave components access to setTasks. The problem with that is it gives other components access to functionality you might not want to be possible, like deleting a task.
We create a setStatusTask function that takes in the id of the task and its new status, and maps all tasks to: 1) itself if the id doesn't match or 2) to a new task where complete is set to status if the id matches.
We wrap the children in our Context Provider so that they have access to it and then we return.

Now that we have our Context Provider, the rest should be easy. We need to create a couple of components. Namely, we need to create a Task component that represents a single row in the table of tasks. We need a TaskList component which represents the table holding the list of tasks. Finally, we need a NewTaskForm component that takes care of providing an input for users to add a new task.

Coding up our React Components

Let's start with the Task component (in the Task.js file):



// 1
import React from 'react'
import { useTasks } from './TaskProvider'

export default function Task({ id, task, complete }) {
  // 2
  const { setStatusTask } = useTasks()

  // 3
  const checkTask = e => setStatusTask(id, e.target.checked)

  return (
    <tr>
      <td>
        // 4
        <input type="checkbox"  onChange={checkTask} />
      </td>
      <td>
        // 5
        <span className={ complete ? 'task-done' : '' }>{ task }</span>
      </td>
    </tr>
  )
}

As before, we're just importing React and our custom hook, useTasks from the TaskProvider in order to get access to the setStatusTask function when a user completes a task.
Here we use object destructuring to extract setStatusTask from useTasks().
We create a function checkTask that will be called every time a user clicks on the checkbox of a task.
Here we create a checkbox with onChange set to checkTask in order to achieve the functionality in the previous point.
Here we display the task. The task can have the task-done class in which we have the corresponding CSS to add a strike-through effect indicating that the task is done. We determine whether a task should have this class or not depending on the complete variable of the task object.

Now let's create our TaskList component (in the TaskList.js file):



// 1
import React from 'react'
import Task from './Task'
import { useTasks } from './TaskProvider'

export default function TaskList() {
  // 2
  const { tasks } = useTasks()
  return (
    <table>
      <tbody>
        {
          // 3
          tasks.map((task, i) => 
            <Task key={i} {...task} />
          )
        }
      </tbody>
    </table>
  )
}

We're importing React, the Task component and our custom hook, useTasks in order to get the list of tasks the user has.
We use object destructuring to extract tasks from useTasks().
For each task in the array of tasks, we transform it into a Task component with a unique key (to avoid console errors) and pass in the task object.

And finally, let's create the NewTaskForm component (in the NewTaskForm.js file):



// 1
import React, { useState } from 'react'
import { useTasks } from './TaskProvider'

export default function NewTaskForm() {
  // 2
  const [task, setTask] = useState('')
  const { addTask } = useTasks()

  // 3
  const submit = e => {
    e.preventDefault()
    addTask(task)
    setTask('')
  }

  return (
    // 4
    <form onSubmit={submit}>
      // 5
      <input type="text" value={task} placeholder="Get some eggs..." onChange={e => setTask(e.target.value)} required />
      <button>Add</button>
    </form>
  )
}

We import React, the useState hook to keep track of what the user is writing in the text field and our custom hook, useTasks to get access to addTask.
We use the useState hook with a default value of "" to monitor the current task the user is inputting. We use array destructing to get task (the current string the user is writing) and setTask, the function we'll use when we want to modify task.
Here we create a submit function that will be called when the user clicks the "Add" button. It will use addTask to add the task to our context. It will also reset task which as a result clears the input.
We create a form with onSubmit set to submit so that the function gets called when the user submits the form.
Finally we create an input with a value of task and onChange set to an arrow function that uses setTask to change the value of task to the current value of the text field.

That is all for the components we need. Now we have to connect everything together to get a functional app.

Connecting the dots

Let's now use all of our components to connect everything together. In the App.js file we have the following:



// 1
import React from 'react'
import './App.css'
import './Todo.scss'
import NewTaskForm from './NewTaskForm'
import TaskList from './TaskList'

function App() {
  // 2
  return (
    <div className="container">
      <h1 className="title">Todo List</h1>
      <NewTaskForm />
      <TaskList />
    </div>
  )
}

export default App

We import React, the CSS files and the two components. Namely, NewTaskForm and TaskList.
Here we render a div containing the title, the form and the task list.

The only other change we need to make is in the index.js file where we use the TaskProvider component we created to wrap the entire app in the context:



// 1
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import TaskProvider from './TaskProvider'

// 2
ReactDOM.render(
  <TaskProvider>
    <App />
  </TaskProvider>,
  document.getElementById('root')
)

We import React, ReactDOM, the CSS, the App and TaskProvider components.
We render the App component within the TaskProvider to give the entire app access to the context. Note that we could've wrapped a portion of the app instead, but for the sake of simplicity we'll wrap the whole app.

That's it, the app is now ready for testing, but first, let's add some styles!

Finishing Touches and Styling

Since this blog post focuses on the React aspect of this app, I will not be explaining the scss below, however feel free to reach out to me if something doesn't make sense. The only important thing to keep in mind is the .task-done class which sets text-decoration to line-through to get the strike-through effect. Here is the code for styles (in the Todo.scss file)



@import url('<https://fonts.googleapis.com/css2?family=Yellowtail&amp;display=swap&gt;');

body {

  width: 100%;

  height: 100%;

  background-color: #A6979C;

.container {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 600px;

    max-width: calc(100% - 20px);

    margin: 0 auto;

<span class="nc">.title</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s1">'YellowTail'</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">32pt</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="mh">#42383B</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.task-done</span> <span class="p">{</span>
  <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">line-through</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">form</span> <span class="p">{</span>
  <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
  <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>

  <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">"text"</span><span class="o">]</span> <span class="p">{</span>
    <span class="nl">height</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="mh">#ccc</span><span class="p">;</span>
    <span class="nl">border-radius</span><span class="p">:</span> <span class="m">5px</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span>
    <span class="nl">outline-color</span><span class="p">:</span> <span class="mh">#42383B</span><span class="p">;</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="nt">button</span> <span class="p">{</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="mh">#42383B</span><span class="p">;</span>
    <span class="nl">color</span><span class="p">:</span> <span class="mh">#fff</span><span class="p">;</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="m">20px</span><span class="p">;</span>
    <span class="nl">border-radius</span><span class="p">:</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">5px</span> <span class="m">0</span><span class="p">;</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="nt">table</span> <span class="p">{</span>
  <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
  <span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>

  <span class="nt">td</span><span class="nd">:first-child</span> <span class="p">{</span>
    <span class="nl">table-layout</span><span class="p">:</span> <span class="nb">fixed</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span> <span class="m">20px</span><span class="p">;</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="nt">tr</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">even</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">background-color</span><span class="p">:</span> <span class="mh">#8E7B81</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>



}

}

Conclusion

After this long in-depth blog post about how to create a simple to-do list app, I hope you learned a thing or two about React Hooks and Contexts and how you can utilize them within your own applications. If it was hard to understand, don't worry. It took me a couple of days to understand what was going on, but it feels good to be able to put all of these concepts together into a single project.

As I said before, some of the resources I used to learn about these include:

Learning React By Alex Banks and Eve Porcello.
The official React documentation. Most importantly in this post:
- Hooks at a Glance
- React Contexts

If you have any questions, reach out to me, I'll be more than happy to help. Also, make sure you follow me on Twitter @oohsinan where I post about full-stack development (mostly React).

Getting a Hey Invite Code using a Twitter Bot

Omar Sinan — Thu, 18 Jun 2020 15:37:11 +0000

🤔 What's all this about?

Around 2 years ago, I wrote a blog post on building a Twitter bot in 17 lines of code (https://dev.to/omarhashimoto/how-to-build-a-simple-twitter-bot-in-17-lines-ofcode-2aan). Ever since, I have been experimenting with different uses for these bots. Two examples of successful beta access hunts include Fortnite Mobile and Call of Duty: Mobile.

The most recent successful hunt was scoring a Hey invite code, well not quite, keep reading and be the judge.

💭 So how did I do it?

I usually keep a template at my disposal for these hunts. If you haven't read my previous blog post already, I highly recommend you do so. It gives a nice introduction to creating your first app on Twitter and your getting your first bot up and running.

Before starting to code, I first spent some time examining what keywords/phrases people used when discussing Hey. I kept track of those keywords and realized the most popular ones were the following:

['hey invite', 'hey code', '#hey', 'hey.com']

I then discovered that Hey invite codes were 7 character alphanumeric strings, so I created a regex pattern that can be used to match possible codes in tweets:

/\b[A-z0-9]{7}\b/g

Obviously this isn't perfect; if there are words that are 7 characters, it will match those unwanted words. I was fine with some manual labor.

After this research phase, I decided to whip out my Twitter-bot-invite-code-hunter (yes, this is what I call it). It utilizes the Twit library to use Twitter's API with ease. The initial setup includes importing the library and setting up the keys for your app:

var Twit = require('twit');
var T = new Twit({
    consumer_key:         '...',
    consumer_secret:      '...',
    access_token:         '...',
    access_token_secret:  '...',
})

After that, we can use streams to listen to new tweets while tracking specific keywords, namely, the ones I mentioned above:

var stream = T.stream('statuses/filter', { track: ['hey invite', 'hey code', '#hey', 'hey.com'] });

After this is done, we listen to this stream on every new tweet as follows:

stream.on('tweet', function (tweet) {
})

Now we have a tweet object. To learn more about what attributes these objects have, I recommend you check out Twitter's official documentation on Tweet objects at https://developer.twitter.com/en/docs/tweets/data-dictionary/overview/tweet-object.

It turns out tweet has an attribute called text, which as the name suggests, contains the text of the tweet. Now, we can match it against our regex pattern as follows:

match_res = tweet.text.match(/\b[A-z0-9]{7}\b/g)

match_res now contains the words that match the criteria we need. We can then do the following:

console.log(tweet.text)
if (match_res != null) {
    console.log("IMPORTNAT: " + match_res)
    console.log("")
}
console.log("")

This will check if any words matched, and if they did then it'll print them out. Aaaand that's pretty much it. The bot is ready to run.

🤑 Was it successful?

I was really hoping it would be as easy as getting those Fortnite and CoD codes (those took less than 5 minutes). Sadly, I waited for over 2 hours for this to work because the codes started pouring out when new Hey invites were sent out.

After about 2 hours of waiting I saw someone who tweeted a code, I was really excited so I quickly opened Hey and put in the code and it worked!!

I was really excited so I slowly picked my email handle, opened my password manager and generated my password. By the time I clicked submit, I was presented with "This code is invalid". Honestly it was pretty disappointing I really thought that once I put in the code it was reserved for me, but I guess that wasn't the case. Anyways, I kept waiting and about 20 minutes later, the bot showed another tweet which said something along the lines of "I have one Hey code, let me know if you want one". So I quickly searched up the user on Twitter and DMed them telling them I'd appreciate it if they could send me the code if they still had it. Luckily, they sent me the code and I was able to register at my own (rather slow) pace.

I don't know about you, but I still consider this a successful bot hunt even though more manual labor was involved, but hey (pun intended), in the end I got access and I am completely loving the experience. No, seriously, you should really check out Hey, it's great.

💻 Full Code

For those of you who are interested in trying out their luck, here is the full code I used:

var Twit = require('twit');
var T = new Twit({
    consumer_key:         '...',
    consumer_secret:      '...',
    access_token:         '...',
    access_token_secret:  '...',
})
var stream = T.stream('statuses/filter', { track: ['hey invite', 'hey code', '#hey', 'hey.com'] });
console.log('twitter bot started');
stream.on('tweet', function (tweet) {
    match_res = tweet.text.match(/\b[A-z0-9]{7}\b/g)
    console.log(tweet.text)
    if (match_res != null) {
        console.log("IMPORTNAT: " + match_res)
        console.log("")
    }
    console.log("")
})

I really hope you found this useful. Follow me on Twitter, I sometimes tweet about cool things @oohsinan.

Increasing my PageSpeed score from 92% to 100% using CSS only

Omar Sinan — Sat, 11 Jan 2020 15:11:13 +0000

This was originally posted on my personal blog at https://omarsinan.com/blog/increasing-my-pagespeed-score-from-92-to-100-using-css-only

In this blog post I will show you how I was able to improve my personal website’s PageSpeed score from 92% to 100% and decrease the loading time by 0.3 seconds on average using CSS only!

Let’s talk about CSS sprites

The trick here is using CSS sprites, I’ve spent the past couple of days looking through different portfolios of people I follow on Twitter and there was a pattern. A lot of people didn’t make use of CSS sprites.

So what are CSS sprites? Like any other sprite sheet, CSS sprites are a collection of icons/images in a single image file. Let’s say you have a social media icons bar on your website. Instead of having every icon as a single image, you could create an image with all the icons separated by 1 pixel as shown below:

How are CSS sprites beneficial?

Well, instead of making 6 requests for your 6 social media icons, you’ll make 1 request for the sprite sheet and then by using CSS, you could chop the image up appropriately so that you can create 6 separate images out of one.

I was also able to decrease my page loading speed by 0.3 seconds on average and improve my Google PageSpeed score by 8% (from 92% to 100%)

Compatible with all major browsers

The CSS property used here is the background-position property which is supported by all major browsers as shown below:

How can you use them?

They’re very simple to use, once you create an image with all icons separated by 1 pixel (you could use any photo editing software or applications like Figma and sketch), you create a div whose width is the width of 1 icon, let’s say it’s 26px and whose height is the height of 1 icon let’s say it’s 30px, and then set the background of the div to be the URL of the image at x y. Where x is the background-position-x property and y is the background-position-y property. Below is an example of how I styled my divs on my personal website (https://omarsinan.com/)

<div class="githubSocial"></div>
<div class="linkedinSocial"></div>
<div class="devSocial"></div>
<div class="twitterSocial"></div>
<div class="rssSocial"></div>
<div class="resumeSocial"></div>

div {
    display: inline-block;
    height: 30px;
}

.github-social {
    width: 26.25px;
    background: url($url) 0 0;
}

.linkedin-social {
    width: 26.25px;
    background: url($url) -27.25px 0;
}

.dev-social {
    width: 26.25px;
    background: url($url) -54.5px 0;
}

.twitter-social {
    width: 26.25px;
    background: url($url) -81.75px 0;
}

.rss-social {
    width: 26.25px;
    background: url($url) -109px 0;
}

.resume-social {
    width: 22.5px;
    background: url($url) -136.25px 0;
}

As you can see it is very simple. I am using the background property in CSS while using the shorthand form of combining it with the background-position property in a single line. It could be split into 2 lines and would have the same effect.

It also still looks the same so there are no disadvantages to adopting this method:

What’s next?

Check out https://web.dev/fast/ where there are more tips on how you could make your website load faster. Also, try to serve your images in .webp format and if the quality of the image isn’t an issue, reduce the quality of the image to maybe 80%.

Using tools like Cloudinary makes this soooo much easier by using the f_auto parameter which selects the optimal format and the q_auto parameter which selects the optimal quality.

By following many of the tips highlighted in https://web.dev, i was able to reduce my website’s loading time from the initial 2.1 seconds to 1.3 seconds. This is a significant improvement and it could be even more significant on your website!

If you decide to use CSS sprites, please share your results and thoughts with me I’d love to see the changes it has made to your website.

You can also connect with me on Twitter @oohsinan

Create a Blog in Less Than 20 Lines of Code Using 11ty

Omar Sinan — Fri, 10 Jan 2020 09:36:45 +0000

This was originally posted on my personal blog at https://omarsinan.com/blog/the-eleventy-11ty-hype-explained

In this blog post, I'll go over what's so special about 11ty and why you should check it out. I also hope that this could serve as a motive for you to create a personal website with a blog page using 11ty 😄

🤯 Possibly the simplest installation process

If you open the 11ty website (11ty.dev), the first thing you see is the quick start section. With 3 commands (could be done in 2 as well), you can set up your first website.

npm install -g @11ty/eleventy
echo '# Hello, world!' > index.md
eleventy

You might have to run the sudo npm in order to have the correct permissions to install 11ty.

Finally, to see your website running, run eleventy --serve and magically, you have a running static website made from a single .md file! 🤯

📝 You want a blog? Have a blog.

It's supeeeer easy to set up a blog for your personal website. The first step is probably to create a layout file, layouts are basically templates that are used in other files.

Create a directory called _includes and a file called layout.njk inside _includes and copy-paste the following:

---
title: A blog about cats
---
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ title }}</title>
    </head>
    <body>
        {{ content | safe }}
    </body>
</html>

Now lets create a directory called blog in the root directory and inside it, create a directory called post-1. Inside the post-1 directory, create a file called index.md. This will serve as our first blog post:

---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
---
# {{ title }}
Hello, world!

You can use the liquid templating language within your .md files!!! (whaaaat?)

Open your browser and go to http://localhost:8080/blog/post-1/ and guess what?

Let's add an image to our blog post. Create a folder inside the post-1 directory called images and inside it place an image of a cat (yes, only cats are allowed).

---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
---
# {{ title }}
Hello, world!

![A picture of a cat](./images/cat.jpg)

Refresh the page annnnd, oh no! It didn't work. 11ty by default will scan for .md files only. So in order to tell it to copy over the images as well, we need to specify which file formats it should scan for.

So in the terminal, run eleventy --formats=md,jpg and then eleventy --serve --formats=md,jpg

Aaaaand viola! Check it out:

Alright that's cool and all, but how do we display a link to all the individual blog posts on our main page? It's very simple. In your index.md file in the post-1 directory, add another attribute in the frontmatter: tags: post. So it should look like this:

---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
tags: post
---
# {{ title }}
Hello, world!

![A picture of a cat](./images/cat.jpg)

The tags attribute will help us create a collection that we can iterate over. Now in your index.md in the root directory, it should have the following:

# Hello, world!

{% for post in collections.post %}
- {{ post.data.title }}
{% endfor %}

So now if you head over to http://localhost:8080/, you can see that our first post shows up. How do we link it though? Easy peasy, just add post.url as a link. So your file should look like this:

# Hello, world!

{% for post in collections.post %}
- [{{ post.data.title }}]({{ post.url }})
{% endfor %}

Perfect, it works! Let's confirm it by creating another post. Again, same drill. Create a directory called post-2 in the blog directory and create a file inside it called index.md:

---
layout: layout.njk
title: Woohoo! My second post
date: 2020-01-09
tags: post
---
# {{ title }}
Hey there!

It's as simple as that!

By default, 11ty will sort in ascending order of dates. Let's sort it so that it shows the newest posts up first. Edit your index.md in the root directory by assigning collections.post | reverse to posts and change collections.post to posts in the for loop. You can leave the rest as is.

# Hello, world!

{%- assign posts = collections.post | reverse -%}
{% for post in posts %}
- [{{ post.data.title }}]({{ post.url }})
{% endfor %}

This will make sure that we reverse the default sorting of 11ty which results in descending order of dates.

🤔 What's next?

There are soooo many more powerful feautures provided by 11ty. This post was only to give you an idea of how easy it is to get a blog up and running. 11ty already provides a blog website base project which you can check out at https://www.11ty.dev/docs/starter/ in case you don't want to build everything from scratch (although if it is your first time using 11ty, I suggest you learn by creating it yourself).

I also suggest you check out the documentation. In my opinion, 11ty has one of the most impressive docs I've seen. The docs provide a lot of content for you to get a proper website up and running.

You could also check out Jason Lengstorf's Let’s Learn Eleventy! (with Zach Leatherman) at https://www.youtube.com/watch?v=j8mJrhhdHWc (it's an amazing video I highly recommend you check it out).

Creating a Flappy Bird Clone with p5.js and Matter.js

Omar Sinan — Tue, 31 Dec 2019 16:07:59 +0000

💪 The Powerful Duo

p5.js and Matter.js are a powerful duo. Together, they allow you to create amazing physics-based games with minimal effort. Before reading this blog post, I recommend you check out both https://p5js.org/ and https://brm.io/matter-js/ just to get an idea of what both libraries are capable of doing.

with p5.js, creating games becomes easier without the hassle of dealing with HTML5 canvases and the way they work. The library allows you to focus mainly on coding what you want specifically and not waste time trying to figure out how to code a specific feature.

The task of Matter.js in this project is simple yet crucial. Matter.js will allow us to integrate a physics engine into our game to detect collisions and to apply forces to the bird to keep it floating in the air.

👨‍💻👩‍💻 Let's get right into it

In this project, I decided to take an OOP approach whereby each object in the scene corresponds to a class that has its own file. All together we have 4 classes (Bird, Box, Column, Ground). The bird is the player that tries to dodge all the obstacles. The box is a general class that represents a physical box that can be used as the ground or the obstacles. The column represents a single column with 2 boxes with a gap in the middle. The ground extends the box class and just represents the ground which acts as a trigger to determine if the player has lost or not.

The bird class is pretty simple, it is essentially an image with a circle created using Matter.js to determine its boundaries.

constructor(x, y, r) {
    const options = {
      restitution: 0.5,
    }
    this.body = Matter.Bodies.circle(x, y, r, options);
    Matter.Body.setMass(this.body, this.body.mass * 2);
    Matter.World.add(world, this.body);
    this.r = r;
  }

In the constructor of the bird class we can see that we instantiate the body, its mass and add it to the world (i.e. the scene). We then have a show function which displays the bird onto the scene using p5.js (you can see it in the full code).

Initializing the box class is similar to the bird class, we instead use a rectangle as the collider and ensure that it is static so that it isn't affected by gravity.

constructor(x, y, w, h, gap=false) {
    var options = {
      restitution: 0.5,
    }
    this.body = Matter.Bodies.rectangle(x, y, w, h, options);
    this.body.inertia = Infinity
    this.body.isStatic = true

    Matter.World.add(world, this.body);
    this.w = w;
    this.h = h;
    this.gap = gap

    if (this.gap)
        this.body.isSensor = true
  }

The gap in between the 2 boxes is also a box in order to keep track of how many columns a user has successfully passed (could be done in many other ways). However, the gap has the isSensor attribute set to true in order to avoid any physical collisions (this is similar to Unity's isTrigger). The class also has a show function similar to the bird class and a move function which moves the box by a certain force:

move() {
      let pushVec = Matter.Vector.create(-2, 0)
      Matter.Body.translate(this.body, pushVec)
}

In the column class, we basically create 3 box objects, one for the top part, 1 for the gap and 1 for the bottom part like so:

constructor(box1Height, gapHeight, box2Height) {
      this.box1 = new Box(width + 100, box1Height / 2, 100, box1Height)
      this.box2 = new Box(width + 100, height - (box2Height / 2), 100, box2Height)
      this.gap = new Box(width + 100, box1Height + (gapHeight / 2), 100, gapHeight, true)
  }

The column class also has a show and move function which basically call the show and move functions on all 3 boxes.

The ground class is very simple and just extends the box class. It could have been done without creating its own class, I just did it for the sake of keeping everything organized:

constructor(x, y, w, h) {
    super(x, y, w, h);
    this.body.isStatic = true;
  }

As mentioned above, this also uses the isStatic attribute to ensure that this entity isn't affected by gravity. The ground class also has a show function like the others by using the power of p5.js to display the object onto the screen.

That's it for the classes. All of these classes are then combined together in the sketch.js file in order to complete the game using p5.js.

In every p5.js-powered game/app, there are 2 main functions: setup and draw. setup is called once when the game is being loaded/starts and draw is called many times in a second depending on the frame rate. In the setup, we call createCanvas and give it the size of the canvas and we create the Matter.js physics engine. We also create the ground and the bird. And lastly we call the generateAllColumns function which generates a column every 3 seconds:

function setup() {
    const canvas = createCanvas(displayWidth, displayHeight - 110)
    engine = Engine.create()
    world = engine.world
    ground = new Ground(width / 2, height - 10, width, 20)
    bird = new Bird(150, 300, 20)
    generateAllColumns()
}

p5.js makes it very simple to detect input from the user, so we can use the built-in mousePressed function in order to detect if the user has clicked their mouse and add a force to the bird to make it fly upwards:

function mousePressed() {
    if (canFly) {
        let pushVec = Matter.Vector.create(0, -0.1)
        let posVec = Matter.Vector.create(bird.body.position.x, bird.body.position.y)
        Body.applyForce(bird.body, posVec, pushVec)
    }
}

The last function there is to the game is the draw function which has all the logic. In here, we update the Matter.js physics engine, we show the bird and the ground, and we check for collisions. Matter.js makes collision detection easier than doing it from scratch. Basically, we check if the bird has collided with the top or bottom part then we end the game by disabling the user's ability to click to fly. If the bird did not collide with anything, then they passed the gap and we can add one to their points (another approach is to check if the bird has collided with the game and hasn't collided with the other parts then add one to their points).

columns.forEach(function (column, i) {
        if (column !== undefined) {
            let box1Collide = Matter.SAT.collides(bird.body, column.box1.body)
            let box2Collide = Matter.SAT.collides(bird.body, column.box2.body)
            let gapCollide = Matter.SAT.collides(bird.body, column.gap.body)

            if (box1Collide.collided || box2Collide.collided)
                canFly = false

            if ((column.box1.body.position.x + column.box1.w / 2) < 0 &&
                (column.box2.body.position.x + column.box2.w / 2) < 0 &&
                (column.gap.body.position.x + column.gap.w / 2) < 0) {
                console.log('removed column ' + i)
                Matter.World.remove(world, column.box1)
                Matter.World.remove(world, column.gap)
                Matter.World.remove(world, column.box2)
                columns[i] = undefined
                points++;
                console.log(columns)
            } else {
                if (canFly) {
                    column.move()
                }
                column.show()
            }
        }
    })

We can see here that Matter.js handles the collisions and if box1Collide.collided or box2Collide.collided is true then we set canFly to false. The rest of the code just checks if the column has moved off-screen and remove it. Or if the column is still on-screen then we call the move function and show it to the user.

✨ Try it out!

You can try the game out at:
https://gifted-babbage-7b9dab.netlify.com/

💭 Final Thoughts

The entire code can be found in this GitHub repo:
https://github.com/omarsinan/FlappyBirdClone

If you would like to add some additional features and improve it, please do and share it with me :) I'd recommend you increase the speed, play around with the values and make the columns appear faster instead of having the user wait in the beginning for a long time.

One last thing. If you like what you read and you'd be interested in similar content, I'd suggest you follow my developer Twitter account @oohsinan 😁

The Importance of Discipline in Development

Omar Sinan — Wed, 12 Jun 2019 12:52:41 +0000

For the past couple of months, I have been working on side projects (mostly on iOS using XCode and Swift) just for fun. I have noticed that I have a tendency to begin projects, but at some point I would give up and completely abandon the project. There are many reasons that force me to abandon the project, but the most common ones are:

Getting annoyed when coding the UI
Having problems deciding on the structure of the application
Straight up hating the way I wrote and structured my code

🗣 Lets talk about discipline

So what does it mean to be disciplined when it comes to programming?
I believe that it is setting up standards and having a proper workflow that is followed throughout the development of a project.

I realized that almost all of my failed projects have the same exact trend. They are the projects that I started right away.
I did not spend any time:

brainstorming more ideas
deciding on the functionality
designing the UI
deciding on the structure of the project

Eventually, I would face a hurdle that seems impossible to solve, even though I am sure it is. However, because I spend more time debugging and facing unexpected problems, I eventually lose motivation and discard the project completely.

✍️ Changes I decided to make

👨‍🎨 Design my UI using Sketch

Around 3 months ago, I came up with an idea for an iOS application that would help me and my friends study more productively (partially inspired by my unfortunate grades 😬). On May 26, I was finally free from all the schoolwork and I decided to begin planning the app.

Planning the app was the first step towards a more disciplined approach to development. I spent around a week on Sketch designing every possible screen I could think of that would exist on the app.

How my Sketch Page looked like after a week (had to hide some artboards 🙈)

I know, I know... I probably should have used separate pages to organize the design, but this was the first time I used Sketch and... yeah things got a tad bit messy 😅

The reason I encourage designing the UI before starting the development is because when I am programming, I would rather just focus on functionality instead of design. All I had to do was translate the designs into code, which did not take as much time as designing the UI from scratch in previous projects. In the projects which had no reference for me to use, I had to spend some time sketching up a design in my head which wasted even more time.

📝 Use a project management tool

Having worked on dozens of other projects throughout the last couple of years, one of the things that I vividly remember is the struggle of managing my tasks. I could never remember what I did and what I want to get done.

For this project I decided to use ClickUp which is a project management tool just like Trello and other famous services. I started filling up the "Open" column with simple initial setup tasks that I wanted to get done. Slowly, over time this is how my space looks like:

How my ClickUp space currently looks like

What I liked about making this change for this project is that there are many features that I could take advantage of that are not available when using text editors to keep track of tasks or using the traditional pen and paper method. I was able to sort my tasks based on priority, add a description, set due dates, add subtasks and much more.

Another thing that I really liked was the integrations. Especially the GitHub integration. When enabled, each commit is assigned to a task in ClickUp (by using the Task ID) and therefore, it makes it much easier to search and filter through the tasks and find the corresponding commit.

🎉 Get over my fear of using Git

Believe it or not, for all my previous projects, I have never used a version-control system. I used to code away in my local computer, create over a dozen directories (just in case something goes wrong 🤦‍♂️). With this project, I decided it was finally time to get over my fear of using Git and finally learn how to use it (mostly due to the GitHub integration on ClickUp).

I can not stress enough how life-changing Git was for me. I could easily go through all my commits and see the changes in each file. Everything felt so organized and just right.

Since this was an iOS application, I was using XCode which makes it a lot easier to commit to my repositories using the GUI interface provided, which also convinced me that adapting Git is a good idea.

💬 Final thoughts and reflections

After about 2-3 weeks from initially starting this project, I noticed a lot of changes in my workflow and productivity. I am still working on my project and I am LOVING it! Everything is so organized and easy to find. I have made 91 tasks on ClickUp so far, finished all my designs on Sketch and committed every code-related task on GitHub. I have noticed that I enjoy working on this app A LOT more than any other previous project I worked on. I believe that being disciplined and having tools to use throughout my development have made me a lot more productive, the setup was really beneficial to me and I cannot wait to continue using it for future projects 😃

Do not shy away from sharing your thoughts and the tools you use to increase your productivity! 🙌

Cross-Platform vs Native App Development

Omar Sinan — Sat, 25 May 2019 22:15:02 +0000

I am currently in the process of designing an app. How would you decide whether cross-platform frameworks (e.g. React Native) work better than native app development (e.g. XCode) or vice versa?

How to build a simple Twitter bot in 17 lines of code

Omar Sinan — Thu, 11 Jan 2018 15:45:16 +0000

A few months ago I created this twitter bot that retweets anything from a specified list of users. And guess what? It was only 17 lines of code. The reason I’m sharing this is because I think it’s crazy how online services charge at least $15 for a simple tool to create bots when you can just build your own. So are you ready?

Here’s what we’re going to use to build the bot:

Node.js — install at https://nodejs.org/en/
twit — Twitter API Client for node (believe me, it’s twit). https://github.com/ttezel/twit

Aaaand that’s basically it.

Creating an application

Before we get into writing code, we have to setup our Twitter application. You can do that at https://apps.twitter.com/. Press the “Create New App” button and this is what you’ll see:

Fill in the information. If you don’t have a website to put in the “Website” field, you can just write https://www.example.com.
Once you create the application, there are 4 important things to note down over at the “Keys and Access Tokens” tab:

Consumer Key
Consumer Secret
Access Token Key
Access Token Secret

If you don’t see your “Access Token Key” and “Access Token Secret” just click the “Create my access token” button and you’ll be set.

Initializing the project

Open up CMD or Terminal and cd to a new directory for your twitter bot and execute the command:

npm init

and fill in the information. Next, we need to install the proper dependencies, in this case it’s only one:

npm install twit --save

Now create a file in that directory called index.js .

NOTE: If you changed the entry point when you ran npm init then make sure that the file name matches what you put in package.json. If you didn’t change anything, then don’t worry just call it index.js.

The fun part

Open up a blank text editor of your choice and create a Twit instance that can be used to make requests to Twitter's APIs. The config should be an object of the form:

var Twit = require('twit')
var T = new Twit({
    consumer_key:         ' ... ',
    consumer_secret:      ' ... ',
    access_token:         ' ... ',
    access_token_secret:  ' ... ',
})

Replace the ' ... ' with your consumer and access keys.
Now create an array which holds the string IDs of the users you want to retweet (you can change the IDs I put in the code snippet below):

var users = ["10228272", "155659213", "783214"];

Now we’re going to create a stream which is in the form T.stream(path, [params]):

var stream = T.stream('statuses/filter', {follow: users});

Notice that in the second parameter, for the key follow we set the value as the variable users.
Now we’re going to listen to that stream when the event tweet is fired:

stream.on('tweet', function (tweet) {
    if (users.indexOf(tweet.user.id_str) > -1) {
        console.log(tweet.user.name + ": " + tweet.text);
        T.post('statuses/retweet/:id', { id: tweet.id_str }, function (err, data, response) {
            console.log(data)
        })
    }
})

This function is emitted each time a status (tweet) comes into the stream. Line 2 is necessary to ensure that the ID of the user who just tweeted is present in the array users.
Line 4 is basically using twit to retweet that tweet with an id of tweet.id_str . If you want to check out what other properties the tweet object has, you can head over to: https://developer.twitter.com/en/docs/tweets/data-dictionary/overview/tweet-object

Lets run the bot!

That’s basically it, You just created your first twitter bot in 17 lines of code! To run it, just execute this command in CMD or Terminal:

node index.js

Future updates

I’ll be writing another post later on which explains how to deploy your bot to Heroku so that you don’t have to run it on your local system 24/7.

Final code

var Twit = require('twit')
var T = new Twit({
    consumer_key:         ' ... ',
    consumer_secret:      ' ... ',
    access_token:         ' ... ',
    access_token_secret:  ' ... ',
})
var users = ["10228272", "155659213", "783214"];
var stream = T.stream('statuses/filter', {follow: users});
stream.on('tweet', function (tweet) {
    if (users.indexOf(tweet.user.id_str) > -1) {
        console.log(tweet.user.name + ": " + tweet.text);
        T.post('statuses/retweet/:id', { id: tweet.id_str }, function (err, data, response) {
            console.log(data)
        })
    }
})

Hi, I'm Omar!

Omar Sinan — Thu, 29 Dec 2016 17:34:16 +0000

I've been programming ever since I was 12, started off by making games on ROBLOX and have recently moved on to work on more ambitious projects. You can check out some of my most recent experimental projects at https://omarsinan.com

Nice to meet you! :-)