Ioannis Poulakas

Node 14 - Optional chaining and nullish coalescing

Sun, 18 Oct 2020 00:00:00 GMT

Node 14

Node 14 is already released and will become the next LTS version during the last week of October 2020.

Node 14 is coming with two long awaited JS features, optional chaining and nullish coalescing. Let's check them out!

Optional chaining

Long gone will be the days of checking for the existence of a deeply nested property using the && operator or lodash.get.

The optional chaining operator is ?. and it permits accessing any nested property in a safe way with a single expression.

Example:

// Using the && operator
if (foo && foo.bar && foo.bar.baz) {
  // do something with foo.bar.baz
}

// Using the ?. operator
if (foo?.bar?.baz) {
  // do something with foo.bar.baz
}

Nullish coalescing

The nullish coalescing logical operator is ?? and it returns the right-hand side operand only if the left-hand side operand is null or undefined.

This sounds similar to the logical OR (||) operator, however the || operator returns the right-hand side operand when the left-hand side is any falsy value.

Thus for many cases that a default value has to be assigned only when a value is null or undefined, the nullish coalescing operator comes in handy.

Example:

const foo = 0;
console.log(foo || 10); // 10
console.log(foo ?? 10); // 0

const bar = false;
console.log(bar || true); // true
console.log(bar ?? true); // false

const baz = '';
console.log(baz || 'default'); // 'default'
console.log(baz ?? 'default'); // ''

Native ESLint support

ESLint has native support for optional chaining and nullish coalescing since 7.5.0 version. However to enable the new syntax it requires the following configuration:

{
  "parserOptions": {
    "ecmaVersion": 2020
  }
}

Using the new JSX transform with latest React

Fri, 16 Oct 2020 00:00:00 GMT

New JSX transform

React has recently introduced the new JSX transform version.

What's so cool about it?
You can now use JSX on your components without importing React!

import React from 'react'; // no longer required!

Of course if you are using hooks, or other React features, you would still need to import those.

Also depending on the project, the compiled output bundle size might be reduced.

Supported React versions

Initially the new JSX transform has been announced for the forthcoming React 17 version. However, in a surprisingly move, React team has backported the new JSX transform to React 16.14.0, 15.7.0, and 0.14.10 versions!

Enable the new JSX tranform with babel/preset-react

The new JSX transform can be enabled on babel/preset-react (v7) by simply setting the runtime property to automatic:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Enable the new JSX transform on Gatsby

Gatsby since version 2.24.5 does support the new JSX transform.
It can be enabled via the custom Babel configuration file by setting the reactRuntime property to automatic:

{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "reactRuntime": "automatic",
      }
    ]
  ]
}

Keeping ESLint happy

Good old ESLint will still complain if you try to use JSX on your components without importing React, so you would just have to turn off the following rule:

"react/react-in-jsx-scope": "off"

How to speed up shell load while using NVM

Sat, 22 Feb 2020 00:00:00 GMT

If you are developing any application that depends on NodeJS, using NVM (Node Version Manager) is highly recommended.

Issue

The only downside of NVM is that it significantly slows down shell prompt initialization while using the default settings.

Here is how it is configured by default for bash:

# Load NVM
export NVM_DIR=~/.nvm
[[ -s "$NVM_DIR/nvm.sh" ]] && source "$NVM_DIR/nvm.sh"

And here is how bad it performs:

$ time source ~/.bash_profile

real 0m0.478s
user 0m0.291s
sys  0m0.198s

First solution, lazy load NVM

There are simple bash scripts that can lazy load NVM during the first invoke of the nvm command. Of course catching nvm is not enough, script should also be checking for npm, node, npx, and any other global package that is installed. Also that very first load will be equally slow to the timings shown above.

Here is how a minimal bash script would look like for capturing the node command and lazy loading NVM:

lazy_load_nvm() {
  unset -f node
  export NVM_DIR=~/.nvm
  [[ -s "$NVM_DIR/nvm.sh" ]] && source "$NVM_DIR/nvm.sh"
}

node() {
  lazy_load_nvm
  node $@
}

The node function above can be replicated for capturing the other executables of choice, just remember that they should be included on the unset command as well.

Second solution, load NVM in a much faster way

NVM while loading up is checking which node version to auto-use based on .nvmrc or a similar configuration file. And this exact check is the one that takes most of the time to complete.
Good news is that there is a flag for skipping this check.
However without an autoloaded node version, there should still exist a fallback to a preferred version for fast access.

Putting those two together on the bash init is as simple as:

# Add default node to path
export PATH=~/.nvm/versions/node/v12.16.1/bin:$PATH

# Load NVM
export NVM_DIR=~/.nvm
[[ -s "$NVM_DIR/nvm.sh" ]] && source "$NVM_DIR/nvm.sh" --no-use

Let's measure the startup time:

$ time source ~/.bash_profile

real 0m0.051s
user 0m0.031s
sys	 0m0.018s

Boom, almost half a second faster!

If a project is using a different node version than the one declared on the bash init, then it's just a matter of remember running nvm use before issuing any other node related commands.
Updating the default version via NVM, would also require updating manually the version on bash init.

Conclusion

I personally prefer the second solution, as I am usually working with the latest LTS node version on active projects. Thus I rarely have to invoke nvm use manually. Time saved overall from spawning shell instances definitely worths it.

How to manage your Python dependencies with Poetry

Thu, 26 Dec 2019 00:00:00 GMT

In the recent past I was excited blogging about Pipenv.
Today I decided to try out Poetry since it reached version 1.0 this month and there is a lot of hype around it.

Poetry is a tool for managing Python dependencies as well as virtual environments.

Getting started

Poetry can be installed by running:

curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python

Installation will add Poetry on the home directory and make it automatically available on bash:

export PATH="$HOME/.poetry/bin:$PATH"

Installing Python dependencies

Poetry is using the standardized file format pyproject.toml.
The pyproject.toml file can be created by simply running poetry init and following the on-screen instructions.

With the pyproject.toml file in place, let's try to install the popular library requests:

poetry add requests

Poetry will automagically:

Create a new virtualenv if it doesn't already exist
Install requests on the virtualenv
Update pyproject.toml with the requests entry
Create or update poetry.lock that holds the dependency tree.

Note: make sure both pyproject.toml and poetry.lock are under version control.

Dev dependencies can be installed by using the --dev flag, for example:

poetry add nose --dev

Uninstalling Python dependencies

Poetry can uninstall a dependency by running:

poetry remove requests

Running commands on the virtualenv

Any command can be run on the created virtualenv by using poetry run, for example:

poetry run python --version

Alternatively a shell can be spawned by running poetry shell to avoid prefixing every command.

Managing Python virtual environments for a project

Let's suppose that a project has to be run specifically on Python version 3.7.5. Poetry can make use of pyenv environments or even python executables that are available on the path.

Using pyenv to get Python 3.7.5:

pyenv install 3.7.5
pyenv local 3.7.5

Update Python version at pyproject.toml:

[tool.poetry.dependencies]
python = "^3.7.5"

Re-install dependencies for Python 3.7.5:

poetry install

List all existing virtual environments for a project:

poetry env list

Switch a virtual environment:

poetry env use <env-name>

Remove a virtual environment:

poetry env remove <env-name>

Other useful Poetry functionalities

Poetry can build and publish packages using the respective commands, something that is missing from Pipenv.
Poetry lock file can be exported to other formats like requirements.txt by using the export command.
Poetry can display package info by using the search command.

Docker

Deploying dependencies on Docker containers should not require installing them under a virtualenv.
Poetry is providing a handy command for disabling the default behaviour:

RUN poetry config virtualenvs.create false \
  && poetry install --no-dev --no-interaction --no-ansi

Conclusion

Poetry is an awesome tool, it builds upon previous Pipenv features while at the same time is simplifying the virtual environments handling. Since version 1.0 is out it can be considered pretty stable and ready for production.

Migrating from Jekyll to Gatsby

Fri, 30 Aug 2019 00:00:00 GMT

I have been following Gatsby for quite some time now, and I finally decided to give it a try on my personal website/blog! This post describes the journey of migrating from Jekyll to Gatsby.

Why Gatsby

Gatsby is an awesome open source framework for building blazing fast static websites and apps. What I find most intriguing about Gatsby is that it is powered by technologies that I use on my everyday dev life: JS, React and GraphQL.

Gatsby is also backed by a vibrant community, providing open source plugins that aid on accomplishing common tasks in an easy manner.

Migration planning

My plan for the Jekyll to Gatsby migration was pretty straight-forward, keep the content markdown structure, as well as preserve the CSS layout.

Gatsby shines on both aspects:

It fully supports automated markdown to HTML content format.
It supports importing existing CSS files, and customizing components via CSS-in-JS.

Thus the main migration challenge was setting up Gatsby, and migrating the layout from the Jekyll template format to JSX.

Gatsby offers various project starter templates, and I have selected the most minimal one, which fits my principal of learning a new framework by building a new project from scratch.

My WordPress/Jekyll background has also driven me to separate content into two main categories, pages and blog posts, with different templates.

Steps and resources for setting up Gatsby

Gatsby developers provide excellent documentation for getting started, so I am not going to list detailed steps for installing and using the gatsby-cli.

Create a new Gatsby project using the gatsby-starter-default template.
Setup siteMetadata and gatsby-plugin-manifest data on gatsby-config.
Customize the React components to achieve the desired site layout.
Setup gatsby-source-filesystem for markdown content.
Setup page/post markdown meta. I am using the following variables: template (page or post), path, title, date (for posts only).
Study documentation, gatsby-starter-blog and gatsby-starter-lumen starters on how to implement page/post templates, as well as posts pagination. Apply related concepts on gatsby-node file and create templates.
Add custom 404 page.
Setup HTML title, meta per content template, using react-helmet.
Add favicon.ico on the static Gatsby folder.

Essential Gatsby plugins

gatsby-plugin-feed: Add an RSS feed.
gatsby-plugin-sitemap: Add an XML sitemap.
gatsby-plugin-google-analytics: Add Google Analytics support. Tracking code only runs in production mode, which is great as local development won't ruin stats.
gatsby-remark-external-links: Customize markdown links, allow opening the target url in a new window/tab.

Optionally customize Prettier, ESLint, Babel configurations

Default configurations are pretty sane, but they can be customized to fit your personal preference.

Prettier: Customize .prettierrc and .prettierignore files.
ESLint: Use gatsby-plugin-eslint and a custom .eslintrc to configure your ESLint setup. I prefer eslint-config-airbnb and a tight eslint/prettier configuration, failing compilation on errors.
Babel: Add a custom .babelrc file that extends from babel-preset-gatsby. For example you can add optional-chaining support or any other Babel plugin.

Deploying to GitHub Pages using a custom domain

Add the CNAME file both on repo root and on the static Gatsby folder so that it can get deployed to the special gh-pages branch.
Install gh-pages from npm.
Add a deploy command on package.json as follows:
gatsby build && gh-pages -d public
Setup GitHub Pages on repository settings to be deploying from the gh-pages branch. Keep the master branch clean, for source code purposes only.
npm run deploy

Gatsby pitfalls

I didn't come across any major pitfall, other than the slight annoyance of sometimes having to clear the .cache folder and restart the development server.

Conclusion

I really enjoyed the process of migrating to Gatsby. Step-by-step building the website from scratch, selecting the appropriate plugins, customizing code. Everything falling within the NodeJS and React ecosystem.
Overall I would highly recommend Gatsby, and of course I am looking forward to using it again on new projects.
Feel free to browse the updated source code and get inspired.

How to install Bash 5.0 on macOS

Sun, 10 Mar 2019 00:00:00 GMT

Introduction

Bash 5.0 has been released during the first week of January 2019.
It builds upon Bash 4.4.x, fixes bugs, and introduces new features and improvements.
You can find extended info at the official release notes.
Although macOS is bundling Bash, it is using the older 3.x version most probably due to the Bash licensing changes. Since the Bash 4.x release, license has been changed from GPLv2 to GPLv3.

How to install Bash 5.0 (or latest bash) on macOS

As usual, brew comes to the rescue, so installation is quite simple:
brew install bash

There are two more steps to activate Bash 5.0.

Add newly installed bash on /etc/shells:
sudo vi /etc/shells
and add a new entry/line with the path:
/usr/local/bin/bash

Make Bash 5.0 default on macOS:
chsh -s /usr/local/bin/bash

Check bash --version to verify that the new version is successfully activated.

Bonus: install bash-completion

Various CLI apps support improved autocomplete via bash-completion scripts.

Install bash-completion on macOS:
brew install bash-completion@2

Initialize bash-completion@2 on ~/.bash_profile with backwards compatibility:

export BASH_COMPLETION_COMPAT_DIR="/usr/local/etc/bash_completion.d"
[[ -r "/usr/local/etc/profile.d/bash_completion.sh" ]] && . "/usr/local/etc/profile.d/bash_completion.sh"

How to manage your Python dependencies with Pipenv

Sun, 28 Jan 2018 00:00:00 GMT

Python developers rejoice!
Pipenv is a dependency manager for Python projects.
It works similarly to other popular dependency managers, like npm for NodeJS, or bundler for Ruby.
Pipenv combines and streamlines the use of pip and virtualenv.

Getting started

Pipenv can be installed via pip:
pip install --user pipenv

If on macOS, I'd recommend installing Pipenv via brew:
brew install pipenv

Initialize a pipenv environment for any Python project

Initialize a Pipenv environment with Python 2.x:
pipenv --two

Initialize a Pipenv environment with Python 3.x:
pipenv --three

Notice that a new file will be created named Pipfile.
This file is similar to a Gemfile or package.json on Ruby and NodeJS respectively. Pipfile lists all top level dependencies grouped into packages and dev-packages.

Installing Python dependencies

Let's suppose that the popular library requests is a requirement.

Install the latest requests version:
pipenv install requests

or install a specific requests version:
pipenv install requests==2.18.4

or install a package for dev purposes:
pipenv install nosetests --dev

In all cases the Pipfile will get updated, with either a * version, or the specific requested version.
In addition to the Pipfile, a new file named Pipfile.lock will be created.
This file is similar to Gemfile.lock or package-lock.json on Ruby and NodeJS respectively.
Pipfile.lock lists all top level dependencies as well as any sub-dependencies.

It's very important to commit and keep both Pipfile and Pipfile.lock files under version control, as these will be used to re-create the virtualenv by fellow contributors or via a deployment script etc.

Displaying Python dependencies

Apart from inspecting Pipfile and Pipfile.lock files, there is a handy Pipenv feature:
pipenv graph

Running Python commands

The only downside of Pipenv, is that all Python commands need to be prefixed by pipenv run, for example:
pipenv run python --version

or
pipenv run python app.py

Virtualenv shell shortcut

Pipenv has a nice little feature that spawns a bash shell within the virtualenv:
pipenv shell

Running python on the spawned bash shell, will start a Python shell within the virtualenv.
If for example requests package was installed, import requests will just work.

Uninstalling Python dependencies

Uninstall a specific package:
pipenv uninstall requests

or uninstall all packages:
pipenv uninstall --all

Remove a Pipenv virtualenv

Clean up a virtualenv:
pipenv --rm

Re-create a Pipenv virtualenv from Pipfile/Pipfile.lock

Create a Pipenv virtualenv and install all dependencies is as simple as:
pipenv install

Is pyenv still relevant?

Pipenv is just a dependency manager, pyenv is still relevant for managing different Python versions.
Moreover Pipenv supports installing Python versions with pyenv when needed.

Conclusion

Pipenv is a great tool, something that was really missing from the Python ecosystem. I am already using it in production, and I highly recommend it.

My Visual Studio Code setup

Sun, 22 Oct 2017 00:00:00 GMT

A few months ago I have been blogging about My Atom setup.
I have always kept an eye on the progress of Visual Studio Code though, having it installed, checking new features and extensions.

Last month, after quite some dissapointments with Atom (like broken expand/collapse, split screen issues due to minimap), I decided to give VS Code a better chance, and code with it on my current projects.

During the first couple of days I had to get used to doing some things differently (like search results on the sidebar), customize user preferences here and there, as well as find suitable extensions.

Well, I got to admit that the result was totally worth the effort, as I have been feeling a lot more productive while coding on VS Code. And it's not just the blazing fast performance of the editor, there are little features everywhere that contribute to the overall great experience. I will try to list as many of them as I can think of.

Here is my VS Code setup:

Theme

Color Theme: One Dark Pro
File Icon Theme: Material Icon Theme

Keyboard Shortcuts

I am using the official Atom Keymap extension.
VS Code team has done a great job providing extensions for both Atom and Sublime so that developers can get productive without having to learn yet another new set of shortcuts.

Packages

The Essential

EditorConfig for VS Code

Editorconfig helps developers to maintain consistent coding styles between different editors and platforms.

Open in GitHub

Provides commands to quickly open the current file on GitHub (History / Blame / File views).
You may also want to check Git Lens for in-editor views.

Docker

Everything you need if you are working with Docker on your repos.

JavaScript

ESLint

Integrates ESLint into VS Code.

jshint

Integrates JSHint into VS Code.

Debugger for Chrome

Debug your JS code in the Google Chrome browser, using breakpoints, watches and more.

Document This

An extension that helps you autogenerate and write JS code documentation.

Python

An awesome Python extension providing linting (using Pylint, pep8 or other linters), intellisense, debugging support and more.

Ruby

A Ruby extension that provides linting, debugging support and more.

CSS

StyleLint

Lint CSS files using stylelint.

Other

Sort lines

A simple extension for sorting lines with multiple options.

Settings (User Preferences)

Initially I was thinking about listing my own settings, however since they are highly opinionated, I will advise you to go through preferences/settings and customize them according to your needs. They are intuitively separated into sections, there is documentation and a quick search.

Things I love on VS Code

It's fast, amazingly fast! Scrolling through code, typing, intellisense, quick looking for files, expanding/collapsing code, file explorer actions. There isn't a single task that makes it feel slow (even though it's an Electron app, ie not native).
Search is also fast, you just need to configure it to exclude git ignored files.
It remembers everything while restarting the editor. Opened files, collapsed sections, even search excluded paths.
As you have noticed, I didn't have to install a large number of extensions to get basic support for preferred languages.
I don't need a mini-map, there's the default Enhanced Scrollbar that's marking code changes, search result occurrences, cursor position, errors. The Enhanced Scrollbar has an absolute height, so that means on long files you don't have to scroll down to figure out if there are marked search results.
Markdown support is included. Markdown Preview (side-by-side or different tab). While on side-by-side preview mode, editor/preview panes are autoscrolling to reveal the selected content on either one of them!
Enabling/disabling extensions per workspace.
JavaScript jump to definition, smart intellisense based on actual code, path autocomplete on requires.
Built-in JSON file lint support.

VS Code has something for everyone

If you enjoy using an integrated terminal or source control within your editor, VS Code does that. I prefer to keep the best apps for each task, so for example I am working with iTerm2 and GitHub Desktop.

Apart from the JS, Python, Ruby related extensions that I have listed, there is also support for Java, PHP and other programming languages.

And similarly to Atom, you can find almost every extension you may need on the Marketplace.

Ruby on Rails, React, Redux, Webpack 2 boilerplate app

Fri, 17 Feb 2017 00:00:00 GMT

GitHub repo: giannisp/rails-react-boilerplate

This is a pure Ruby on Rails / React / Redux / Webpack 2 boilerplate app that I have built and open-sourced. Highlights include using the newly released Webpack 2, as well as making the frontend part independent of the Asset Pipeline.

Features

Ruby on Rails 5.x
React 15.4.x
Webpack 2.x
Babel 6.x
ESLint support
SASS and StyleLint support
Hashed filenames for production assets
Separate app and vendor JS bundles
Postgres compatibility
Using Rails default gems and NPM packages only

Exit Asset Pipeline, Enter Webpack

Why Webpack?

Webpack is a module bundler. It can bundle all JS files for usage in the browser, but can also transform / bundle / package any resource or frontend asset.

JavaScript community moves forward at a rapid pace, new frameworks and modules are being released every day. The NPM ecosystem is huge, and Webpack makes it available in the simplest way possible.

Webpack can support every modern JS app, using ES6 or CommonJS modules, or both, create a single or multiple bundles, and in general can be customized to accomplish any application requirement.

The frontend assets on this app are placed on a more accessible directory, at /front/js and front/css, rather than app/assets/javascripts and app/assets/stylesheets.

At any point, migration to a different backend (for example NodeJS) can be seamless since Webpack is running as a stand-alone bundler. There's absolutely no dependence to the Asset Pipeline or any other framework-specific module.

My Atom setup

Sun, 15 Jan 2017 00:00:00 GMT

I have switched to using Atom as my main code editor about 2 years ago and never looked back. Atom is open source, cross-platform - built on top of Electron, and can be highly customized.

Here is my Atom setup:

Theme

UI Theme: One Dark
Syntax Theme: One Dark

This is the default theme on fresh Atom installations.
In the past I have been using Atom Dark, and it was quite hard to get used to something new, however One Dark is a lot more pleasing to the eye.

Packages

The Essential

editorconfig
apm install editorconfig

Editorconfig helps developers to maintain consistent coding styles between different editors and platforms. You can also generate a new .editorconfig file using the Command Palette.
Hint: Disable Atom's default "whitespace" package to avoid possible conflicts.

docblockr
apm install docblockr

A powerful package that helps you writing code documentation.
It can generate complete doc blocks, and makes it extremely fast to tab your way through filling-in the variable types and descriptions.
Hint: make sure you check the Settings as it provides some neat customization options.

highlight-selected
apm install highlight-selected

Highlight the current selected word occurrences. Extremely useful for quickly checking variables, functions etc.

file-icons
apm install file-icons

Display file type specific icons everywhere (treeview, tabs, finder etc).
Makes it a lot easier to quickly identifying opened files.

Linter and related plugins

linter
apm install linter

Linter is the base package that provides linting functionality for various file types via plugins. Should be the developer's first choice.

linter-eslint
apm install linter-eslint

Lint JavaScript using eslint
My favorite JS linter at the moment for NodeJS and React projects.
Hint: Check "Disable when no ESLint config file is found" on Settings.

linter-jshint
apm install linter-jshint

Lint Javascript using JSHint
Still need it for some older projects that were setup with it.
Hint: Check "Disable when no jshintrc file in path" on Settings.

linter-jsonlint
apm install linter-jsonlint

Lint JSON files using jsonlint.

linter-php
apm install linter-php

Lint PHP files using the php binary.

linter-pylint
apm install linter-pylint

Lint Python files using pylint.

linter-ruby
apm install linter-ruby

Lint Ruby files using ruby binary.

linter-xmllint
apm install linter-xmllint

Lint XML files using xmllint.

Minimap and related plugins

minimap
apm install minimap

Minimap provides a mini-preview of the full source code on every tab, and comes with a variety of useful plugins.

minimap-cursorline
apm install minimap-cursorline

Display the location of the cursor position.
Hint: you can customize the color via your stylesheet.

minimap-find-and-replace
apm install minimap-find-and-replace

Display the search matches.

minimap-git-diff
apm install minimap-git-diff

Display git diffs, possibly one of the most useful plugins along with the next one.

minimap-highlight-selected
apm install minimap-highlight-selected

Display the current selected word occurrences.

For JavaScript development

js-hyperclick
apm install hyperclick js-hyperclick

It lets you jump to where variables are defined, or even required files.
Hint: there are plugins for other languages based on the hyperclick base package.

autocomplete-paths apm install autocomplete-paths

Provides autocomplete functionality for relative paths and files. Not just for JS of course, but extremely useful on your imports/requires.

Tools

atom-beautify apm install atom-beautify

It can beautify a great variety of files, however I mainly use it to prettify JSON files.

sort-lines
apm install sort-lines

Sort selected lines, or get unique lines. Nice to have.

Other syntax support

atom-jade
apm install atom-jade

Adds Jade template language support.

Competition (VS Code)

You might be wondering why Atom and not VS Code. Especially when VS Code seems a lot faster (have you checked memory consumption though?).

Well at least for my needs, the above packages make me more productive. Some of them are not available on VS Code at all yet, or their respective ones are just not that powerful.

VS Code has some really cool features, like JS debugging with breakpoints that I am using sometimes. The integrated git and terminal support may also appeal a lot users, however I prefer to be using specific apps (like iTerm 2 and GitHub Desktop or SourceTree) that just do a lot more.

Powered by

Fri, 13 Jan 2017 00:00:00 GMT

This post is dedicated to the technologies and code that are powering up the site.

The site is hosted on GitHub Pages.
GitHub Pages is designed to host a static site directly from a GitHub repository.

Jekyll, a Ruby gem, is the library that does all the magic, generating the static content pages and blogs posts.
The two-columns responsive theme that is currently running is a customized version of the excellent Hyde theme.

Here's how you can easily get started:

Start a new repository on GitHub (check how it should be named and branch details)
Create a new RVM or rbenv environment using Ruby >=2.x.
Init a new local git repository
Start a new Gemfile including at least github-pages (example).
gem install bundler
bundle install

Now you can select a preferred theme, like Hyde, and place it inside the repo. GitHub Pages is currently using Jekyll 3.x, so you may need to customize the _config.yml for compatibility (example).

Running and viewing the site locally:

Do jekyll serve
Visit http://localhost:4000 on your browser

After customizing the look and feel, and adding some content, you should be ready to publish it!
Simply push to the appropriate branch on the remote GitHub repository.

You can also use a custom domain with GitHub Pages, which is really cool and easy to accomplish.

The full source code of this site is available at giannisp/ioannispoulakas.com.

Hello World!

Wed, 04 Jan 2017 00:00:00 GMT

Hello World! I am Ioannis.

This post marks the beginning of my new personal site and blog!

I will be posting about coding-related stuff and tools that are part of my daily routine and I enjoy working with. Also you can expect hints and tips that are coming from my remote-working life.

You can follow the blog by subscribing on the RSS feed.