17 Feb 2017
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.
- 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
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.
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/css, rather than
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.
15 Jan 2017
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:
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.
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.
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.
apm install highlight-selected
Highlight the current selected word occurrences. Extremely useful for quickly checking variables, functions etc.
apm install file-icons
Display file type specific icons everywhere (treeview, tabs, finder etc).
Makes it a lot easier to quickly identifying opened files.
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.
apm install linter-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.
apm install linter-jshint
Still need it for some older projects that were setup with it.
Hint: Check “Disable when no jshintrc file in path” on Settings.
apm install linter-jsonlint
Lint JSON files using jsonlint.
apm install linter-php
Lint PHP files using the php binary.
apm install linter-pylint
Lint Python files using pylint.
apm install linter-ruby
Lint Ruby files using ruby binary.
apm install linter-xmllint
Lint XML files using xmllint.
apm install minimap
Minimap provides a mini-preview of the full source code on every tab, and comes with a variety of useful plugins.
apm install minimap-cursorline
Display the location of the cursor position.
Hint: you can customize the color via your stylesheet.
apm install minimap-find-and-replace
Display the search matches.
apm install minimap-git-diff
Display git diffs, possibly one of the most useful plugins along with the next one.
apm install minimap-highlight-selected
Display the current selected word occurrences.
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.
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.
apm install atom-beautify
It can beautify a great variety of files, however I mainly use it to prettify JSON files.
apm install sort-lines
Sort selected lines, or get unique lines. Nice to have.
Other syntax support
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.
13 Jan 2017
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:
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:
- 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/giannisp.github.io.
04 Jan 2017
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 Atom feed.