{ "version": "https://jsonfeed.org/version/1", "title": "vixalien.io", "home_page_url": "http://vixalien.ga/", "feed_url": "https://vixalien.ga/feed/feed.json", "description": "Feed for my personal website!", "icon": "http://vixalien.ga/favicon/maskable.png", "author": { "name": "Angelo Verlain", "url": "https://vixalien.ga" }, "items": [ { "id": "git", "content_html": "Learn Git! - vixalien
Sun Aug 01 2021

Learn Git!

Learn to use Git, a popular Distributed Control System to effectively collaborate and manage your software projects.



So now you understand a certain programming language and coffee is your new best friend. But everywhere there is code, you see Git. They say a true developer must know Git and here you are, knowing nothing about Git, but longing to getting started.

\n

I have to admit, Git is as complex as it is popular. However, you don't need to know all the 160+ commands of Git to do daily operations. Here is a short but comprehensive tutorial that will teach you the most used features of this world-famous version control system.

\n

What is a Version Control System?

\n

A Version Control System (VCS) is a system that track and manages changes to files. A project with a VCS is usually called a repository or repo for short.

\n

A VCS allows you to have multiple versions of a project. To visualize the need for a VCS, imagine you are working on a new feature in a project, and a bug that needs to be fixed immediately is reported. With a VCS, you can easily create a new version of your repository, fix the bug, then return to the previous version when you are done fixing the bug. You can also see the different changes you've made in your repository over time and can easily rollback when a change is undesired or introduced a bug. If you also modify your files or lose them, you can restore your repository to the last saved snapshot.

\n

What is Git?

\n

Git is a version control system that manages a collection of files in a certain directory. Git is a Distributed Version Control System. This means Git does not rely on a central server to store all the versions of a project's files. Instead, every person "clones" a copy of a repository and get all the history and branches (more on that later) of the project. Although the original source code of a repository may be stored on a third-party hosting service like Github, any person can have their own copy of the project.

\n

Git was created by Linus Torvalds in 2005 for development of the Linux kernel, with other kernel developers contributing to its initial development.

\n

Installation

\n
\n

Note: You'll need to be able to work with the command line fluently before learning Git. Even though there are Git GUIs, Git itself is a command line application. If you don't understand the arts of the command line yet, you can check Tania's command line tutorial.

\n
\n

You can download Git for macOS, Windows, Linux or build it from source from the Official Git website.

\n

When you are finished installing, you can check if git is installed by running the following code in your Terminal (or Command Prompt for windows).

\n
git --version\n
\n

If you see a result like the following, you are good to go.

\n
git version 2.30.2.windows.1\n
\n

Configuring Git

\n

After you install Git, you will have to set some configurations. These include your name and email and are used to mark changes that you introduce in a repository. That way, people can see changes you made and contact you easi;y.

\n
git config --global user.name "Firstname Lastname"\ngit config --global user.email username@email.com\n
\n

The above commands tell Git your names and email. Remember to change Firstname Lastname and username@email.com to your own names and email respectively.

\n

You can type the following command to check the saved config:

\n
git config --list\n
\n

And you may get results similar to this:

\n
color.ui=auto\ncore.editor='C:\\Program Files\\Sublime Text 3\\subl.exe' -w\ncore.symlinks=true\ncore.eol=lf\nuser.email=username@email.com\nuser.name=Firstname Lastname\n
\n

Git workflow

\n

Any git repository consists of 3 "trees" maintained by Git:

\n
    \n
  • Working Directory: This is your folder with the actual files, the one you can see in File Explorer.
  • \n
  • Index: This is a staging area where Git put files that you are going to commit soon. (i.e. changes that are going to be marked as a new version.) This is because there are certain files that you may want to mark as finished and won't change, while there are others you are still working on and don't want to be released in this version.
  • \n
  • HEAD: This is a reference that points to the last commit you've made.
  • \n
\n

So you add files from the Working directory to the Index. As you work further, you can add more files to the Index or even remove (restore) files from the Index. When you are ready, you commit your changes. This will next generate a commit and a new HEAD that points to your last commit.

\n

Working with repositories

\n

In this tutorial, we will need a new blank directory to learn Git and follow along. You can create a new folder anywhere to start experimenting with Git. I created mine at D:\\project.

\n

Initializing a Git repository

\n

By Initializing a Git repository, you convert an unversioned project to Git or as in our case, create a new empty repository. (Yep, you can now call your project a repository!) You will need to run the rest of the commands in the root of the project. You can type cd to see where you are now and check if it is indeed where you are planning to create a new repository.

\n
git init\n
\n

After initializing your git repository, you should see a message like: "Initialized empty Git repository in C:/project/.git/" to confirm that a new repo has been created successfully. Note that Git create a hidden folder called .git to store version and history data.

\n

Tracking files

\n

You will now need to create two files at the root of your project folder: index.html and style.css. You can use your favorite text editor (I ❀ Sublime Text) to save them to the root of your repository.

\n

Checking the status of a repository

\n

You can check the status of your local repository by using the git status command. You will use this command a lot while working with Git repositories.

\n
git status\n
\n

Output:

\n
On branch main\n\nNo commits yet\n\nUntracked files:\n  (use "git add <file>..." to include in what will be committed)\n        index.html\n        style.css\n\nnothing added to commit but untracked files present (use "git add" to track)\n
\n
\n

Note: On some older versions of Git, the main branch may be called master by default, this is normal. To change the name of the master branch to main, run: git checkout master then git branch -M main

\n
\n

Staging files

\n

The output above tells us that Git knows there are new files in the Working Directory but they are not tracked (They are not part of our Git repo; Git is not tracking changes to them, yet). We have to stage the files using the git add command.

\n
git add .\n
\n

Adding/Staging the files put them to Git's Index.

\n
\n

The . (or *) tells git to add EVERYTHING to the repo.

\n

You can also add a single file to the index at a time by using the git add <filename> syntax. git add index.html would add index.html only.

\n

You could also add a range of files using the * (wildcard character). git add hello/* would add all files in the hello folder.

\n
\n

Committing changes

\n

Let's check the status again with git status.

\n
On branch main\n\nNo commits yet\n\nChanges to be committed:\n  (use "git rm --cached <file>..." to unstage)\n        new file:   index.html\n        new file:   style.css\n
\n

We are now ready to commit the files (i.e. mark the changes we made a version).

\n
git commit -m "Initial Commit"\n
\n

Output:

\n
[main (root-commit) 154dcd7] Initial Commit\n 2 files changed, 2 insertions(+)\n create mode 100644 index.html\n create mode 100644 style.css\n
\n

While committing, the option -m can be used to provide a commit message, in this case "Initial Commit". You are encouraged to always provide a descriptive commit message that show a gist of the changes you've made.

\n
\n

If you don't provide a commit message, Git will use the default editor, set in the installation process on Windows or otherwise Vim, which could be weird for users who don't know to use Vim because it shows a strange screen where you can no longer enter any commands. To quit Vim, press ESC and type :q! followed by ENTER. You can learn how to configure Git to use your favorite text editor.

\n
\n

Branches

\n

Branches are used to develop features isolated from each other. The main branch (or master, depending on the version of Git) is the "default" branch when you create a repository. Use other branches for development and merge them back to the main branch upon completion.

\n

Creating a new branch

\n

In this project, we will be creating a new branch to add javascript.\nYou use the git chekout -b <branch-name> syntax to add a new branch.

\n
git checkout -b javascript\n
\n
Switched to a new branch 'javascript'\n
\n

Listing all branches

\n

You can use the git branch command to list all branches in the current repository.

\n
git branch\n
\n
* javascript\n  main\n
\n

The current branch is highlighted in green and an asterisk is shown before it's name.

\n

We can starting working on code in our new branch. Create a file called script.js. We can the use git status to view the state of our repo.

\n
git status\n
\n
On branch javascript\nUntracked files:\n  (use "git add <file>..." to include in what will be committed)\n        script.js\n\nnothing added to commit but untracked files present (use "git add" to track)\n
\n

Notice that the output shows that we're on branch javascript and that script.js is untracked. We will need to add it to the \nIndex.

\n
git add .\n
\n

Then commit.

\n
git commit -m "Add script"\n
\n
[javascript 355fad9] Add script\n 1 file changed, 1 insertion(+)\n create mode 100644 script.js\n
\n

Reviewing and Merging

\n

When you are done implementing a feature in a branch, the only thing left is to merge it to the main branch. Merging is Git's way of taking a forked history (an independent line of that divergd from the current branch) and incorporating it the current branch. Merging allows you to "combine" different versions of code that diverged from a shared branch. We are going to merge code from the javascript branch back into the main branch.

\n

We'll need to go back to the main branch first.

\n
git checkout main\n
\n

git diff

\n

It is good practise to first review changes before merging or committing. You can use the git diff command (short for difference) to show changes between different revisions or paths. (You can use it to compare branches, commits and whatnots).

\n

If you provide only one argument, Git shows the changes in your working tree relative to the named reference. You can use HEAD to compare it to the latest commit, or a branch name to compare it to the tip of a different branch, which is what we'll do here.

\n
git diff javascript\n
\n
diff --git a/script.js b/script.js\nnew file mode 100644\nindex 0000000..d7ac302\n--- /dev/null\n+++ b/script.js\n@@ -0,0 +1 @@\n
\n

git merge

\n

After now reviewing the changes we are about to merge, it's time we merge the actual changes back into the main branch.

\n
git merge javascript\n
\n
Updating 154dcd7..355fad9\nFast-forward\n script.js | 1 +\n 1 file changed, 1 insertion(+)\n create mode 100644 script.js\n
\n

After the branch is merged successfully, we can now delete the javascript branch because it is no longer needed.

\n
git branch -d javascript\n
\n
\n

Git tries to auto-merge changes. Unfortunately, this is not always possible and results in conflicts. You are responsible to merge those conflicts manually by editing the files shown by git. After changing, you need to mark them as merged with git add <filename> before merging changes.

\n
\n

Logging

\n

You can type git log see the repository's history and confirm that the branch has been merged.

\n
commit 355fad97c2d442bb4a307385bfd6bac2198e825d (HEAD -> main)\nAuthor: Firstname Lastname <username@email.com>\nDate:   Sun Aug 1 15:35:31 2021 +0200\n\n    Add script\n\ncommit 154dcd7ce38589eb903346f6996e810401fa4910\nAuthor: Firstname Lastname <username@email.com>\nDate:   Sun Aug 1 15:07:37 2021 +0200\n\n    Initial Commit\n
\n

Because git feeds git log results to a pager, you may need to press q when the log is too long.

\n

You can add a lot of parameters to make the log look like what you want. Here are a few examples:

\n
    \n
  • To see only the commits of a certain author:\ngit log --author=alice
  • \n
  • To see a very compressed log where each commit is one line:\ngit log --pretty=oneline
  • \n
  • Or maybe you want to see an ASCII art tree of all the branches, decorated with the names of tags and branches:\ngit log --graph --oneline --decorate --all
  • \n
  • See only which files have changed:\ngit log --name-status
  • \n
\n

These are just a few of the possible parameters you can use. For more, see git log --help

\n

Tags

\n

When you are done and ready to mark a version of your code, you can add a git tag.

\n
git tag v1.0.0\n
\n

The End

\n

You are now mostly ready to contribute to projects while using Git to track your projects. Although you must note that this is only a basic tutorial of Git and you still have more to learn namely working with remotes. Git is a very complex software and has more than 160 commands but it's amazing how you don't have to know even a half to contribute to open source projects and track your project's progress. You'll know more git commands naturally as you become more experienced with Git and when the need for them comes.

\n

Resources

\n\n
", "url": "https://vixalien.ga/post/git", "title": "Learn Git!", "summary": "Learn to use Git, a popular Distributed Control System to effectively collaborate and manage your software projects.", "date_modified": "2021-08-01T11:42:49.271Z", "author": { "name": "Angelo Verlain", "url": "https://vixalien.ga" } }, { "id": "let-it-snow", "content_html": "Let it snow! - vixalien
Sun Jan 31 2021

Let it snow!

Building an optimized snowing weather with the Web Animations API and Promises.



\n

Easter egg: Run this page with #snow at the end

\n
\n

πŸŒ¨β›„ Do you like snow? Does it snow in your region? Are we in December yet?

\n

We are going to create virtual snow using the chilly Web Animations API.

\n

A snowflake!

\n

First and foremost, let's create a snowflake! Our snowflake will be loaded as an .svg file provided by the beautiful Ionicons.

\n

Loading the snowflake

\n

You can store it as a local file then load it as SVG, or use it from Ionicon's library, but we will be storing it as a string.

\n
let svg_str = `<!-- snowflake svg text here -->`;\n
\n

Parsing the string into a DOM element

\n

Then we'll use DOMParser to parse the string into an actual DOM element.

\n
let snow = new DOMParser().parseFromString(svg_str, "text/xml").children[0];\n
\n
\n

Note: Because parseFromString returns a #document, we used .children[0] to get the <svg> element instead. (<svg> is equivalent to <html>.)

\n
\n

Setting the snowflake to float

\n

Our snowflake is fixed (it doesn't scroll like other elements) and initially, it is placed just above the screen.

\n
snow.style.position = "fixed";\nsnow.style.top = "-24px";\n
\n

Creating a new snowflake

\n

Because our page will have many snowflakes, we'll clone the snowflake we just created.

\n
let newSnow = () => {\n    let clonedSnow = snow.cloneNode(true);\n    // we pass true to clone the node deeply (that is, with all it's children).\n};\n
\n
\n

Note: from now on, our code will be in the newSnow function.

\n
\n

Next, we'll generate a random left position for that snowflake

\n
let left = Math.floor(document.body.offsetWidth * Math.random());\n// we use Math.floor to ensure left is an integer\nclonedSnow.style.left = left + "px";\n
\n

Then we'll just add it to the DOM

\n
document.body.append(clonedSnow);\n
\n

Animating the snowflake

\n

Here we'll just use Web Animations API to animate an element. To use the API, we run element.animate(keyframes, options). You can read more in the MDN Page.

\n

To make real snow effect, we will also generate a random speed (think the animation's duration)

\n
let time = Math.max(10 * Math.random(), 5) * 1000;\n// Math.max choose the largest argument it was given. By using it here, we restrict time to be larger than 5.\n
\n

We will animate the snow to change it's top CSS property gradually. At the end, the element will be placed just below the viewport, where you can't see it.

\n
let anim = clonedSnow.animate(\n    {\n        top: window.innerHeight + 24 + "px",\n    },\n    { duration: time, fill: "forwards" }\n);\n
\n

One last thing, we'll do Garbage Collection. When the animation ends, delete that snowflake as it is no longer useful.

\n
// garbage collection\nanim.onfinish = el => el.target.effect.target.remove()\n
\n

Now go ahead, in your console, run newSnow(). You'll see a snowflake falling slowly.

\n

Snowing!!!

\n

So far, we can only create snowflakes on demand by running newSnow() everytime we need it. What about we create a loop that create as many snowflakes as possible?

\n

The problem with native JS loops

\n

If you use for loops or while or whatever, it won't work. Why? It will create many snowflakes at a time. Your browser will be filled with snowflakes and unless you are on a supercomputer, your browser will crash, badly. This creates a need for a custom loop!

\n

Looping asynchronously

\n

Async Iterate

\n

Here's an implementation of an async loop.

\n
let asyncIterate = async (start, iterations, fn) => {\n    // initialize the iterator\n    let i = start;\n    let call = res => fn(res)\n        // waits for the function to resolves before calling the next iteration\n        .then(async result => {\n            if (i >= iterations) return result;\n            i++\n            return await call(i)\n        });\n    return await call(i);\n}\n
\n

It accepts 3 parameters. start is what the iterator is initialized as. iterations is pretty self-explanatory. it is the number of times the function will run. then fn is the function to execute.

\n

It is important to remember that this is an async loop. That means, it will run the function, then waits that it resolves. then execute the next iteration.

\n

wait

\n

Next is the wait function. This is a wrapper around setTimeout. It waits some time (in milliseconds), then execute a function. (It is available on the npm registry as async-wait-then).

\n
wait = time => new Promise(res => setTimeout(res, time))\n
\n

Here is a simple example using wait.

\n
wait(1000)\n    .then(() => console.log('This will be logged after one second!'));\n
\n

Using wait and asyncIterate to snow

\n

By combining wait and asyncIterate, we get a powerful function set that uses the Promises API.

\n

So, to create realistic snow (and prevent browser crashes) we'll have to wait before we create a snow element

\n
asyncIterate(0, 10, async () => {\n    await wait(1000)\n    newSnow()\n})\n
\n

This will make it rain 10 snowflakes, but with an interval of 1 seconds between each snowflake

\n

To make it look more realistic (and add some suspense), we will wait for a random amount of time instead of the static 1 second.

\n
asyncIterate(0, 10, async () => {\n    await wait(Math.max(3 * Math.random(), 1) * 300)\n    newSnow()\n})\n
\n

But then, this will only create 10 snowflakes. Let's make it rain forever.

\n
asyncIterate(0, Infinity, async () => {\n    await wait(Math.max(3 * Math.random(), 1) * 300)\n    newSnow()\n})\n
\n

The full code, complete with some optimizations is posted as Github Gist

\n
", "url": "https://vixalien.ga/post/let-it-snow", "title": "Let it snow!", "summary": "Building an optimized snowing weather with the Web Animations API and Promises.", "date_modified": "2021-01-31T15:49:22.776Z", "author": { "name": "Angelo Verlain", "url": "https://vixalien.ga" } }, { "id": "explosiv", "content_html": "How Explosiv Works - vixalien
Thu Jan 28 2021

How Explosiv Works

The most lightweight, yet fully featured static-site generator you'll see.



Explosiv npm β†— Github β†— is a static site generator for JSX content.

\n
\n

This article is about how Explosiv works, if you want to want to learn how to use Explosiv go to Explosiv's Github Page instead.

\n
\n

Why Explosiv was made.

\n

While I was creating this blog, I thought.

\n

About all the front-end options I had. Because, I was not going to write static HTML for a fully featured site! While I had already met stylus for all my CSS needs, I was still looking for an option to write my markup seamlessly.

\n

React

\n

TBH, I love React. It's syntax, it's community, it's everything really. Yet, React also put so much overhead on your site, like Build times, Babel, Webpack, hydrating or rendering etc. After some digging, I found out the foundation behind React was JSX, dubbed as XHTML within Javascript.

\n
// JSX syntax is coool!\nlet Site = (data) => {\n    return <div>Hello {data.name}!</div>\n}\n
\n

Well because JSX is tightly coupled with React, I kinda thought it would not work on it's own, but yet kartiknair made Dhow, which proved me otherwise.

\n

Dhow

\n

Dhow, is a static site generator, that uses JSX to render static HTML at build time, ready to be served as is. It is quick, very fast and still uses JSX, so migrating my app from React was a breeeeze. Until I encountered the severe limitations of Dhow.

\n

Dhow was very young. That means It just implemented JSX, nothing else. Many features were lacking. While creating this site, I cloned Dhow. I found myself adding many features as I wanted. I saw it was incredible. I decided to push it to My Github as Explosiv

\n

Explosiv

\n

Explosiv, being a clone of Dhow, inherits all it's current features. Here is a simple example.

\n

First, add explosiv to your site's dependencies.

\n
npm i explosiv\n
\n

And install explosiv globally, so that you can use the CLI wherever you are...

\n
npm i explosiv -g\n
\n

Or, to keep up with modern standards, although I personally like the first syntax more, use npx to always use the latest version of explosiv

\n
npx explosiv\n
\n

To make an Explosiv site, just create a folder and generate a pages/ directory. Add a simple index.js file to get started.

\n
// pages/index.js\nimport Explosiv from 'explosiv'\n\nexport default () => (\n    <main>\n        <h1>Hello there!</h1>\n        <p>\n            This is a super simple example of generating static files using Explosiv.\n            You can learn more at{' '}\n            <a href="https://github.com/vixalien/explosiv">here</a>\n        </p>\n    </main>\n)\n
\n

To build, and serve, the site use:

\n
explosiv build\nexplosiv serve\n
\n

Et voìla! A static site was generated in your /out directory. Magic right!

\n

How it works

\n

You can learn how JSX works by this article from the React team.

\n

You can read a very nice article by kartiknair, the creator of Dhow about converting JSX into HTML without React.

\n

TL;DR: We use a pragma function that generate real DOM elements using a minimal DOM implementation, min-document.

\n
// A general overview of how it works.\n// !! Not real code\nconst document = require('min-document');\n\nconst createElement = (tag, props, ...children) => {\n    const element = document.createElement(tag)\n\n    children.forEach((child) => {\n        element.appendChild(child)\n    })\n\n    return element\n}\n
\n

We transpile Javascript using ESBuild, a verrry fast, yet fully featured transpiler. We transpile the code in the pages directory from JSX into pure, native Javascript, while replacing all instances of JSX with our pragma function.

\n

The transpiled file will look like this

\n
// transpiled/index.js\nlet { createElement } = require('explosiv')\n\nexport default () => (\n    createElement('main', null, \n        createElement('h1', null, 'Hello there!'),\n        createElement('p', null, \n            'This is a super simple example of generating static files using Explosiv.',\n            'You can learn more', ' ',\n            createElement('a', {\n                href: "https://github.com/vixalien/explosiv"\n            }, 'here'\n        ),\n    )\n)\n
\n

At the end we render our DOM into static HTML by using document.toString() and piping the output into the relevant output directory.

\n

Impovements over Dhow

\n

Explosiv, is a personal project. It is not a competitor, or even an alternative to Dhow, yet all current improvements are listed for anyone interested. Many of these can also be implemented in Dhow if worth it.

\n
    \n
  • Provide an explosiv serve command that serve a static directory on a specified port (defaults to 3000).
  • \n
  • Head elements are added on top of document.head instead of the bottom (allowing overriding existing tags)
  • \n
  • Rewritten for build code to be independent and ease debugging
  • \n
  • Does not use polka but the more minimal connect.
  • \n
  • Use middleware deemed as useful like morgan which log all requests and compression which compress resources on HTTP.
  • \n
  • Fixed bugs on edge cases like rendering <> (aka Fragment tags) as root elements and rendering empty children.
  • \n
  • Added support for className HTML attribute.
  • \n
  • Fixed bug where self-closing (like <img src="/path/to.img">) elements doesn't render correctly.
  • \n
  • Use tabs instead of 4 spaces lol!
  • \n
  • And other many but subtle changes.
  • \n
\n
", "url": "https://vixalien.ga/post/explosiv", "title": "How Explosiv Works", "summary": "The most lightweight, yet fully featured static-site generator you'll see.", "date_modified": "2021-01-28T17:23:43.290Z", "author": { "name": "Angelo Verlain", "url": "https://vixalien.ga" } } ] }