Baruch-Adi

Compare yourself to a baby

2019-04-21T17:30:00+00:00

Learning takes time. Babies know that, so should you.

This article will focus on software engineering, but it can apply to anything in your life.

Baby steps

Everything takes time. Just like a baby who’s learning how to talk or walk for the first time, you will need time to learn & master what it is you are currently working on.

You need to understand that everything has a learning curve. Some are steeper than others, and you need to overcome that. You shouldn’t jump into the most complicated part of the skill you are attempting to learn, but instead, you should learn the simpler parts that together compose that complex skill.

A baby first learns to crawl, then walk, then run. It’s all about pacing, you need to go through the basics before you jump to the final goal.

You need to remember that No one is just born with that knowledge. Knowledge is earned, not given.

Dedication

When a baby first learns to walk, there are stages. In the beginning, the baby can’t crawl, or even support itself. Given that, it’s not expected from the baby to be able to run yet! You should have the same perspective about your skills as a programmer. If you just picked up programming, and you are just getting started, it is obvious that you won’t be able to do what the “pros” are doing yet, it takes time! Babies can take ~6 months to be able to crawl, and it’s different for each baby. Everybody is different. It doesn’t mean that you should take it easy and give yourself all the time in the world. Babies put effort every day to learn those things. Attempting to crawl, attempting to talk. This shows that you need put in effort and dedication if you want to achieve your target. If you keep delaying and procrastinating you’ll get nowhere. So get up, and do the thing you kept telling yourself you would!

Admiration & Motivation, Not Jealousy

Sometimes when we see someone successful, we tend to immediately jump to jealousy.

Wow, look at that guy. He got that amazing job, doing these amazing things, and I can barely write “hello world”

Well, let’s take a different perspective on that situation. This time, from a child’s point of view. When children see someone doing an amazing thing, take for example a soccer player, they would say something different. You wouldn’t hear them saying

wow look at that soccer player making tons of money and playing like a pro. I can’t even dribble.

No, they would take that person and make them their idol! They would instead of being jealous of that amazing soccer player, would make that player their inspiration! They will start playing more soccer on their free times and try to imitate their most amazing plays and moves. whether or not that child would take soccer to the next level and become a pro is not important, the important part is that the child will improve! No, the improvement wouldn’t be immediate, but by dedicating time and trying to be more like their idol they will eventually be good!

That is the same perspective I would recommend to use when you see someone who is a “pro”. Learn from them. If they are one of your peers or your coworkers, befriend them! Instead of making them an unhealthy rival, make them your friend and learn from them. If it’s a person that you just read about online and can’t befriend, learn from what they do!

EOF

Hopefully, this article helped you understand how to assess your growth and realize that it takes time to perfect a skill. Remember that different people learn at different paces and that knowledge is earned, not given. We are all capable of something great, we just need to put in the time and effort to enhance ourselves.

How to make a browser game with p5.js

2019-04-16T18:00:00+00:00

Learn how to make your own browser game with p5.js!

The Tools

p5.js is a simple graphics library. It’s easy to get started and the documentation is concise and to the point! I was introduced to p5.js through a YouTube channel by Daniel Shiffman, I highly recommend you check out his YouTube channel!

The Goal

The final product is going to be a simple square walking around a grid (see here, this version is actually multiplayer. We’ll get to server/client in a different blog post 😛), but that’s nowhere near the limit of what you can do!

Getting started

Alright, we are going to hop right in! First thing first, download the p5.js complete library from the download page and extract it. We are going to work in p5/empty-example/sketch.js. Alright, now all you have to do is open your favorite editor (I’ll be using VS Code) and follow along!

Drawing a Square

Once you open your sketch.js, you’ll notice two functions already set up for you. In setup we will initialize our environment, and in draw we will describe what should be drawn per frame.

Before we can draw our square, we will need to create something for us to draw it on! For this, we will use createCanvas, which will create a virtual canvas🖼 for us to draw on 🎨🖌

function setup() {
  createCanvas(100, 50); // 100 -> width, 50 -> height
}

Now if you’ll open up the adjacent index.html file in your choice of a browser, you’ll see… well, nothing yet 😅. We have created the canvas, but we didn’t draw anything on it yet!

To draw our square, we will use the rect function. We will give it the position for where to draw it (x,y) as well as how large it should be (width, height). We will do all of this in the draw function since we want to draw the square for each frame and not just once.

function draw() {
  // x, y, width, height
  rect(10, 10, 10, 10);
}

Now if you open up your browser, you should see a square!

Defining Our World

Time to add some structure to our game-world! Since we are drawing squares, let’s add a grid. To define the grid, I will define a new variable called UNIT which will be in charge of the scale of the world and the consistency. after defining our world measurement unit, we need to modify our canvas and square to use that unit. For this game, I’ll say that our world is going to be a 10x10 grid. For that, I will also define a WIDTH and HEIGHT, which will define our world size in terms of our world’s unit.

Lastly, we will modify our canvas to use those variables, and our square to draw itself as one unit wide and tall. We will also relocate our square to be positioned at (1,1) in world units.

const UNIT = 32; // each unit in the world is 32 pixels.
const WIDTH = 10; // width, in world units.
const HEIGHT = 10; // height, in world units.

function setup() {
  // width, height
  createCanvas(WIDTH * UNIT, HEIGHT * UNIT);
}

function draw() {
  // x, y, width, height
  rect(1 * UNIT, 1 * UNIT, UNIT, UNIT);
}

Our square is now one unit wide and tall, and our world has more consistency to it as everything would use that one unit of measurement!

Drawing the Grid

To draw our world’s grid, we simply need to draw a line horizontally, as well as vertically, per unit. To do so, we will use the line function. The line function requires a start position (x1,y1) and an end position (x2,y2).

For a horizontal line, we keep the y value the same (y1==y2), but the x values will be different (x1 != x2). In our case, the x position will start from the beginning of the canvas (x1=0), and end at the end of our canvas (x2=WIDTH*UNIT). We’ll set y1 and y2 to 1*UNIT for now.

We will do the opposite, keeping the x’s the same and y’s different (x1==x2, y1!=y2) for a vertical line. We’ll set x1 and x2 to 1*UNIT for now as well.

Congrats! now we have two lines ready to be drawn, one vertical and one horizontal.

// ... constants & setup function
function draw() {
  // ... rest of drawing code

  //(x1,y2,x2,y2)
  // Horizontal line
  line(0, UNIT * 1, WIDTH * UNIT, UNIT * 1);

  // Vertical line
  line(UNIT * 1, 0, UNIT * 1, HEIGHT * UNIT);
}

Now that you got one line of each drawn, it’s time to draw the rest of the grid! We will use a for loop to do that. we will have two for loops (though because our grid is a square, this could be achieved with a single loop since WIDTH == HEIGHT). We will need to do some minimal alteration to our original line drawing code: simply change the value of 1 that is being multiplied by UNIT, with the value that the loop is in charge of. We will loop over the number of units on our y axis (HEIGHT) to draw the horizontal lines, and loop over the number of units we have on our x axis (WIDTH) to draw the vertical lines.

// ... constants & setup function
function draw() {
  // ... rest of drawing code

  // Horizontal lines
  for (y = 0; y < HEIGHT; y++) {
    //(x1,y2,x2,y2)
    line(0, UNIT * y, WIDTH * UNIT, UNIT * y);
  }
  
  // Vertical lines
  for (x = 0; x < WIDTH; x++) {
    //(x1,y2,x2,y2)
    line(UNIT * x, 0, UNIT * x, HEIGHT * UNIT);
  }
}

You should now have a grid drawn, as well as your square!… But, where is the square..? Let’s change the square’s color so it’s easier to distinguish it from the rest of the grid. We will need to use the function fill and give it RGB values to fill our rectangle with.

// ... constants & setup function
function draw() {
  // r, g, b
  fill(0, 100, 255); //fill w/ blue

  // ... rest of drawing code
}

Phew, there is our square! Time to make the square move 😁

Moving Your Square

Time to make that square move! Let’s start off by using variables for the position of the square (x,y) instead of just numbers. To do that, let’s create an object called pos to represent our position in the external scope. After we create that variable, we will then replace the x and y coordinates of the square to use the x and y components of the position object.

// ...constants

const pos = {x:1,y:1}

// ...setup function

function draw(){
  // ... fill function

  rect(pos.x * UNIT, pos.y * UNIT, UNIT, UNIT)

  // ... grid draw loop
}

Now we need to update the x and y components of our pos according to the keys pressed. To do so, we will use the keyIsDown function and the provided Arrow keyCodes. Since (0,0) is our top left corner, we would want to increment x when the right arrow is pressed, and decrement when the left arrow is pressed. As for y, we would want to increment when the down arrow is pressed, and decrement when the up arrow is pressed.

// ...constants & setup function
function draw() {
  // ... rest of draw function

  if (keyIsDown(LEFT_ARROW)) {
    pos.x--;
  }

  if (keyIsDown(RIGHT_ARROW)) {
    pos.x++;
  }

  if (keyIsDown(UP_ARROW)) {
    pos.y--;
  }

  if (keyIsDown(DOWN_ARROW)) {
    pos.y++;
  }
}

Time to see what we came up with! Let’s try to move around now… and… uhhh well, that’s not what we wanted now, is it?

So the reason this is happening is that the canvas is never getting cleared between frames! If we keep on drawing on that canvas every frame, and never cleaning it, the drawing from the previous frame remain!

Not to worry, there is an easy solution, the function clear. We will run it as the first thing in our drawing loop, so it will clear our canvas before each frame and get it ready for a re-draw!

// ...constants & setup function
function draw() {
  clear();
  // ... rest of draw function
}

Now that’s more like it! Our square is moving according to whatever key we pressed!

EOF

There are many directions you can take it from here! This is just the tip of the iceberg. Personally, I took this little challenge and turned it to a multiplayer game that I am actively working on and will document my progress on 😁

Host Jekyll on GitHub Pages With a Custom Domain

2019-02-11T00:00:00+00:00

In this instruction-set, I’ll explain how you can host your Jekyll blog on GitHub Pages for free with your own domain!

Don’t have a Jekyll blog yet? It’s easy to make one yourself! Check out this article and get started in just a few minutes: Creating a Dev-Blog Using Jekyll

Setting up GitHub Pages

Navigate to GitHub and create a new repository. If it’s your personal blog, make sure to name it <username>.github.io (in my case, baruchadi.github.io).

Any other naming scheme would end up hosted at <username>.github.io/projectName see GitHub Pages for an in-depth explanation on how to set up a project page instead of a personal site.

Now all you got to do is push your local Jekyll project to GitHub!
With your CLI of choice, (assuming you have git installed) Navigate to your project’s directory & initialize a new Git local repo and configure it, make sure to replace the git URL with your own repo’s URL

$ git init
$ git remote add origin https://github.com/<UserName>/<ProjectName>.git
$ git add *
$ git commit -m "first commit"
$ git push -u origin master

I found that sometimes it takes GitHub a really long time to realize this is a Jekyll project, to escalate it, I’ve picked a theme under Settings -> GitHub Pages -> Theme Chooser and then undid it.

Also, If it does deploy but you get a blank screen, please make sure you have set the URL flag under your _config.yml file!

Jekyll would do the rest for you! It would now build and deploy your site to <username>.github.io.
In my case, baruchadi.github.io

Buying a Domain & Setting up DNS Records

So now your site is published under <username>.github.io. Sure, that works, but you probably want to have your own domain name instead of a subdomain on github.io!

Personally, I manage my domains on NameCheap. But any other domain registration site would do as well.
After buying your domain, you will need to modify a few settings to make it work with your GitHub Pages free hosting:

Navigate to your DNS settings

on NameCheap, go to Dashboard -> Click Manage next to your domain name -> Advanced DNS on the top
We will set up a CNAME record (basically configuring our custom domain as an alias to our GitHub Pages domain)

Click Add New Record -> select CNAME Record -> write www under Host -> write your GitHub Pages domain name under Value -> select TTL (I set mine under 30 minutes)

TTL is how long it will take DNS servers to update with your new data.
You might also want a URL Redirect Record if you don’t already have one. In my case, it redirects people from baruchadi.com to www.baruchadi.com so that no matter which one you go to, you’ll get to the same site.

Click Add New Record -> select URL Redirect Record -> set Host as @ -> set Value to http://www.yourdomain.com and keep it as unmasked.

That’s it for DNS settings!

Now, go back to your GitHub Repo -> Settings, and scroll down to GitHub Pages section.
Under Custom Domain, make sure you write down your domain address (www.yourdomain.com). This will create a CNAME file on your master branch with your domain name inside of it. Keep that, that makes it so that if people navigate to <username>.github.io they would instead end up on your new custom domain.

Keep in mind, it might take up to 30 minutes for everything to update (determined by your TTL setting). Right after that is done, you should be able to access your site using your own domain!

EOF

Congratulations! Your site is now hosted on GitHub Pages for free, and you even have your own custom domain!

This is the last article in the “dev-blog” series. Stay tuned to find out what’s next!

Creating a Dev-Blog Using Jekyll

2019-02-10T15:00:00+00:00

Learn to create your own (dev)-blog using Jekyll!

Setting up Jekyll locally

Staring off with Jekyll is extremely easy! First of all, we’ll start by setting up our simple environment:

1. Setting up a Ruby environment

You may ask

“Why do I even need Ruby installed?”

Well, Jekyll is a Ruby Gem (think of a gem as a packaged code/software to be reused by others), and therefore requires you have Ruby installed on your machine. For Jekyll, we need Ruby version 2.2.5 or above, so keep that in mind when you install it if you have to pick a version.
Let’s get started:

Windows

To get set up on windows, you will need to download Ruby+Devkit from RubyInstaller site
(I downloaded 2.5.3 at the time of this tutorial, but anything 2.3 and above should be good!)

MacOS

Ruby actually came preinstalled on my Mac. If you are having issues with it though, visit the Jekyll Official instructions for more details on how to install it using HomeBrew or other methods.

2. Installing Jekyll

Once you have your Ruby environment set up, it’s time to install Jekyll.

Run the following command in your CLI of choice:

$ gem install bundler jekyll

(make sure to launch a new instance of your CLI so that your path variables would update)

Note, I had to also run bundle install on my Windows machine due to various missing gems.

Verify Jekyll has been installed by running jekyll -v

3. Creating Your Blog Locally

this is pretty straight forward, just run this simple command!

$ jekyll new MY_BLOG_NAME

Replace MY_BLOG_NAME with your blog name. Jekyll will now create a new project in your current working directory inside of a new folder named after your blog!

4. Running a Jekyll Server Locally

We are pretty much done setting up our Jekyll environment! Check our your blog by running the server! Run the following command to start up the server:

$ jekyll serve

If that didn’t work, check if there are any gems you need to install by running bundle install and then try to launch it explicitly using bundle as follows: bundle exec jekyll serve

Now open your web browser of choice and navigate to localhost:4000 OR 127.0.0.1:4000 and you should be able to see your site!

Understanding the Jekyll Environment

Jekyll Folders & Files

Your folder hierarchy should look similar to this:

MY_BLOG_NAME
  |
  |- _drafts/     -> Contains posts that should not be published yet
  |- _posts/      -> Contains all of your published posts   
  |- _config.yml  -> Holds site configuration and variables
  |- 404.html     -> Your 404 page for pages that do not exist
  |- about.md     -> Your about page, written in markdown
  |- Gemfile      -> Your dependency management file 
  |- index.md     -> Your homepage

You might not have a _drafts/ folder, so feel free to create one!

The _config.yml File

_config.yml is the file that will hold a lot of valuable information about your site. Jekyll themes will use those variables to configure a lot of the site for you!

I recommend starting off by modifying that file and filling in your blog information such as

title
email
description
url
twitter_username
github_username
google_analytics

Now go back to your site and refresh. You should see various parts of the site updated to use your newly added variables!

.md / .html Files on Root

Markdown files and HTML files on root (index.md, about.md and 404.html) are your regular, non-post, pages.

Feel free to customize your About and 404 pages. Leave index.md as is for now since it is generated by your Jekyll theme and gets populated automatically with your most recent posts!

You can add more .md and .html files to your root, and they will be accessible for you to navigate to. For example, if you add a new test.md (or test.html) file on root, you will then be able to access it by navigating to localhost:4000/test

EOF

That’s pretty much it for setting up Jekyll locally! Next up is setting up our GitHub Pages free hosting and connecting it to our custom domain.

My next article will explain how to do so, step-by-step:

Host Jekyll on GitHub Pages With a Custom Domain

Starting a Dev Blog

2019-01-30T15:00:00+00:00

I’ve finally decided that this year I’d create this much overdue dev blog 🥳🎉.

Why did you pick Jekyll?

Personally, I tend to over-engineer things. I get stuck designing the product, or my environment, for so long that I never get to actually create and publish the product. To prevent myself from overthinking and procrastinating because something didn’t line up properly,I chose Jekyll. Jekyll provides me with a very minimal pre-constructed environment, and allows me to focus on creating the content.

Jekyll…

Is extremely simple to use
generates a static site to be hosted anywhere
- can be hosted on GitHub
has a deployment process that is ridiculously simple
- just merge to master and GitHub will take care of the rest

Other Considerations

As a long time React developer, the first thing that came to mind was just using create-react-app. Then I learned about Gatsby, which is a static site generator that uses React. Both of these are great options and personally I would lean more towards Gatsby for this kind of project (and I plan on migrating to it eventually, but that would take a while…).

So why not use CRA/Gatsby now?

I’ve tried out both recently, but always found that I got stuck at planning the product over actually making it:

Should I set up and use TS? 😯
How should I structure my GitHub Repo? 😧
What will my deployment process look like? 😣
What other technologies can I incorporate into this project? 😫

As you can see, I would have never gotten to actually publish anything! I would get discouraged because I started working on a large ambitious project (wow… I tend to do that a lot now that I think about it 🤔). As soon as I start getting overwhelmed by the volume of things I have to do to simply get the project started I would rethink if the project is even worth it.

EOF

This article talked about my thought process before choosing Jekyll. In the next article we will get to setting up a blog with jekyll so that you can start one on your own for your projects! 😄

Welcome to Baruchadi.com!

2019-01-23T15:00:00+00:00

Why, hello there! Welcome to my dev blog!

This page marks the beginning of a new journey. You can read a bit about me here

What to Expect

I am planning to document my whole journey from this point onward as a software engineer. There will be step by step tutorials, more generic discussions, opinions on different technologies, and my experience in general.

Thank you for stopping by, I’m looking forward to seeing how 2019 will go!