tomthedev-blog - Tumblr blog

[tomthedev-blog]

Why moving from Squarespace? Pros & Cons of using a CMS

Content Management Systems (CMS) are great, they get you up and running in (next-to) no time. They're the perfect solution when you need your site to look good and to be live in minimal time and with minimal effort.

You might only know a handful of those but, there are many, many CMS out there. 

Right now, TomTheDev.com is hosted on Squarespace which (with their popular Bedford template if you're curious) was perfect when I started.

Squarespace allows you to build very snappy, beautiful and responsive sites. The downside to this might be fewer customization options and limited custom coding possibilities (unless you're willing to dive into their Developer Platform). Since the platform is built on ReactJs, sites are very quick but you will have a hard time trying to find a solid styling workflow with "hash_generated" class names and ids and the result will often feel (and look) quite "hacky".

Through the use of their API, you can use the data from your site, though to feed your application ("Bringing Squarespace Data to your React Native App"). But let's not get ourselves distracted here :)

Here's a table that compares Squarespace, WordPress, and GatsbyJs in terms of features.

Before thinking of Gatsby, I tested WordPress for some time and still have a blog there. 

WordPress is of course a fantastic platform that powers almost a 1/3 of all websites out there so it's a legitimate CMS and it's rather developer-friendly if you're ok with going through the learning curve (I happen to love PHP so I'm ok with that).

The one thing I considered when thinking about this move was everything I would be able to regain control of. 

Gatsby lets you use all the plugins you want so you can tailor it to your workflow!

For example, I can use the nice SCSS syntax I love in my styled-components!

As I'm now a Junior Web Developer, I want to get as many opportunities as I can to learn new techniques, workflow, tips and methods! What good is a CMS for that?...

If you also are a programmer or an aspiring one, I urge you to step away from your everyday CMS and create a site from scratch, event just a landing page. You will learn tons of things by practicing!

Next episode will be added later this week about how I'm going to import assets (mainly posts but not limited to) from Squarespace to my new platform.

Spoilers: yes I'm looking at you Cloudinary :)

As usual, let me know if you have any questions or suggestions!

Link

Moving from Squarespace to GatsbyJs

References

Top 32 Sites Built With ReactJS

[tomthedev-blog]

Moving from Squarespace to GatsbyJs

I'm going to move my blog to a new platform! Since I've been coding in React for some time and I've been a great enthusiast for static-sites and server-side rendering for some time, this is it!

The point here is to document each step so that anyone can follow the process and see how that's done.

Here are the details:

I'd like to use GatsbyJS for the front-end. Gatsby is a static-site generator based on ReactJS.  It combines the fast performance of static websites, modern browser capabilities like and service workers, and the powerful abstractions, excellent tools, and client capabilities of the web app world. For more info on this powerful Javascript web framework, check out this video:

I'll be using WordPress as a Headless CMS (through their REST API) to fetch posts and feed my React application. There are many possibilities when it comes to managing the data with Gatsby but I found that for my use case, posting to WordPress is the easiest. Once I'm a bit more comfortable with Markdown, I'll probably write my posts directly in .md and query them using GraphQL.

The blog will be hosted on Netifly. Netlify is a great hosting service that allows you literally plug your project right from Github and have it deploy on command from your terminal. Every time you push a commit you can choose to update your site. Pretty cool if you ask me.

The styling will be done using styled-components which provides a great plugin in Gatsby. If you're not familiar with Styled Components, it literally derives from the "component" philosophy of React. Instead of having your component in a Javascript file (App.js) and your stylesheet for your component in a separate file (typically app.css or app.scss), you can have both the render and the styling in a single Javascript file. Styled-Components will generate class names for your components so that your style can't possibly break anything. Writing your styles that way also mean you have access to the power of ES6 to structure your properties.

  The reason behind that move is to push myself to publish more regularly and to explore the possibilities offered by GatsbyJS.

I can't wait.

I'll be writing about the first step next week about migrating data to WordPress.

Let me know what you think in the comments section down below!

  References

Videos:

Articles

Zero to Deploy: A Practical Guide to Static Sites with Gatsby.js

Gatsby + Apollo + GraphCool + Netlify: The Web’s Promised Land

[tomthedev-blog]

How to start using VS Code like a pro!

Choosing an IDE when you first start learning to code doesn’t seem such a big deal. Most of them are free, easy to install and efficient. Let’s look at how to make the most ouf of your text editor.

In this post, I’m going to review some tips and techniques as well as some of the most important features of Microsoft Visual Code.

VS Code is one of the best IDEs out there. You can check my previous post on how the major text editors stand against one another.

  1) First you’ll need to install it by going on  the download page here.

2) Once VSC is installed, here are some basic addons you can look into:

Git. Although VSC does come with a built-in Git tool (more on that later), it will require Git to be installed for it to work. You can install Git here.

NodeJS. You’ll also want to make sure you have NodeJS installed on your computer at this point. Link is here.

Chrome Debugger. Using Chrome Dev tools is of course pretty handy but this extension brings all the tools into VS Code for clarity (Chrome is only rendering your code so all the editing and testing is kept under your IDE’s umbrella). Check out this nifty extension here.

3) At this point, you have a working setup and you can start your first projects.

Or you can start installing some additional extensions. Here are some of my favourites:

Auto Close Tag will automatically close your tags when you code. The HTML auto-closing is built-in in the most recent versions of VS Code so this extension is actually only needed for Javascript. The great thing is that it’s configurable. Check out the guide for that extension here: Auto Close Tag

Git History allows you to view history of the current branch, all branches. Compare commits, view details of the commits, compare changes against previous files. It provides you with a nice graph view of your changes on files. Check it out here.  

IntelliSense for CSS class names will offer suggestions of class names as you type them based on the CSS files of your workspace. The nice think is that it supports and recognise CSS classes placed in ‘link’ tags so for example, if you link Bootstrap to your page, it will see it and suggest Bootstrap class names as you type them. Check it out here. 

This extension contains code snippets for JavaScript in ES6 syntax. That’s a must have since JS is a must-know. You can install it from here.

SVG Viewer allows you to preview your SVG files. If you don’t work with SVGs, well you should, it’s scalable, it doesn’t ever pixelate, it’s the future. You can check that extension here.

There are many other useful extensions you should check out, for example if you’re into React (like me) there are many linters you can use to improve on your workflow.

Now let’s look into the UI.

VS Code User Interface:

Like many other code editors, VS Code features a a Navigation bar on the left, editor space on the right and a status bar at the bottom.

You can move the Side Bar to the right hand side (View > Move Side Bar Right) or toggle its visibility (⌘B).

Side by Side Editing

You can have up to three editors open side by side. If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:

Ctrl (Mac: Cmd) click on a file in the Explorer.

⌘\ to split the active editor into two.

Open to the Side from the Explorer context menu on a file.

Click the Split Editor button in the upper right of an editor.

Drag and drop a file to the either side of the editor region.

Ctrl+Enter (Mac: Cmd+Enter) in the Quick Open (⌘P) file list.

Minimap - outline view

A Minimap (outline view) gives you a high level overview of your source code which is very useful for quick navigation and code understanding. A file's minimap is shown in the right side of the editor. You can click or drap the shaded area to quickly jump to different sections of your file.

If you would like to disable minimap, you can set "editor.minimap.enabled": false in your user or workspace settings

Explorer

The Explorer is used to browse, open, and manage all of the files and folders in your project. VS Code is file and folder based - you can get started immediately by opening a file or folder in VS Code.

After opening a folder in VS Code, the contents of the folder are shown in the Explorer. You can do many things from here:

Create, delete, and rename files and folders.

Move files and folders with drag and drop.

Use the context menu to explore all options.

Tip: You can drag and drop files into the Explorer from outside VS Code to open them up.

Zen Mode

Zen Mode lets you focus on your code by hiding all UI except the editor (no Activity Bar, Status Bar, Side Bar and Panel) and going to full screen. Zen mode can be toggled using View menu, Command Palette or by the shortcut ⌘K Z. Double Esc exits Zen Mode. The transition to full screen can be disabled via zenMode.fullScreen. Zen Mode can be further tuned by the following settings: zenMode.hideStatusBar, zenMode.hideTabs, zenMode.fullScreen and zenMode.restore.

Finally, your VS Code workflow will be vastly improved by learning and using its keys-shortcuts.

Key Shortcuts:

If you'd like to modify the default keyboard shortcuts, see Key Bindings for details.

⌥⌘→ go to the right editor.

⌥⌘← go to the left editor.

⌃Tab open the next editor in the editor group MRU list.

⌃⇧Tab open the previous editor in the editor group MRU list.

⌘1 go to the leftmost editor group.

⌘2 go to the center editor group.

⌘3 go to the rightmost editor group.

⌘K ⌘← go to the previous editor group.

⌘K ⌘→ go to the next editor group.

⌘W close the active editor.

⌘K W close all editors in the editor group.

⌘K ⌘W close all editors.

Note that if you are used to Atom, Sublime or another editor's key binding, you can search the VS Marketplace for the relevant extension. It will replace the built-in shortcuts with the ones commonly linked to a given editor.

Workspace functionality

    You can add a folder to a dedicated Workspace to gather your directories into one place. You can name and save your Workspaces.

    You can link folders but also settings to specific workspaces.

    Specific syntax highlighting for a specific workspace. The JSON file for workspace settings is just a flat file you can share with team or modify.

You can learn about how to use workspaces here.

Explorer

VS Code now highlights edited files based on status. 

Source Control

You can hover over the highlight colour in the gutter, click on it to open an editor showing what the changes/additions were.

You can stage changes one by one via the mini editor. Changes staged that way are ready to be committed right away.

Layout

Vertical docking for panels:

View > Integrated Terminal will show it at the bottom but you can now click on the “Move to the Right” button to have your terminal on the side.

 Editor:

This is super cool! You can not only fold portions of code but also create “Regions” so encapsulate code portions between comments with a specific formatting (//#region section -> #end region) and VS Code will make that portion foldable.

This can be pretty neat when working in a team, you can assign a portion of code to a person by commenting it like #region John-toTest.

Note that this might not fully supported on all languages so you’re fee to contribute to that on GitHub.

For visual examples and more info on those features, check out Kenneth Auchenberg's video: 

This is the beginning of a new series on how to get the most out of your text editor.

Make sure you share this post if you found it interesting! :)

[tomthedev-blog]

Tom the Dev - The Podcast! Soon launching

Hey coder-friends!

FreeCodeCamp has recently started an audio podcast. It's very good and you should definitely check it out!:

http://freecodecamp.libsyn.com

I've always been keen on podcasts, I think they provide a convenient way to communicate and present content.

The format is generally short and easy to digest.

Most of the time, there's only 1 person speaking at the time so it's rather easy to follow and doesn't require deep focus.

It allows you to learn/listen to content while doing something else.

While listening the the FCC podcast episodes, I realized that those were previously published articles or posts read out loud by Quincy Larson, Beau Carnes or many other contributors.

It was great to re-discover those in a podcast format and listen to great stories and insights on the web development world.

And it got me thinking.

I've always wanted to launch a podcast or/and a Vlog. I used to be a teacher (just like Quincy and Beau actually) and that ability to coach and mentor students, explaining concept, de-jargonizing technicalities was always something incredibly rewarding for me, and something I really miss in my current job. I launched a YouTube page no too long ago but failed to accurately assess the time I would need to publish quality videos (preparation, editing, etc.).

So it got me thinking...

Why not trying the same approach with my own blog. I would be reading out loud my articles, perhaps adding thing in the process (let's be totally honest, I'm not able to accurately read something mechanically without making edits, additions, revisions, etc, I'm a programmer after all aha).

So I'm going to publish my read-out-loud-articles on iTunes as podcasts in the next coming days (I'm working this weekend so I'll probably record a bunch of them on Monday).

What do you guys think?

I think that would also be a great way to help me in my public speaking skills (I'm not an English native speaker 🇫🇷), my pronunciation and tone.

[tomthedev-blog]

Atom Vs. Sublime Vs. Brackets Vs. VS Code

Warning!

This post is absolutely biased and is reflecting 100% of my own opinion on text editors.

When it comes to gearing up for coding there's one choice you should make consciously and carefully and that's your text editor.

   An important choice

Your text editor will have a tremendous impact on:

Your workflow.

The languages you work on.

Your programming style (indenting, syntax, preprocessing, spaces, comments, etc.).

Your productivity.

So it should not be picked lightly and you should even re-consider your choice every once in a while. You're not married to your text editor (sorry Brackets 💔, you made me very happy for a while but I needed some new perspective on things and your syntax highlighting is crap) and you don't have to always work around a missing feature or a crappy CPU usage (you know I'm talking about you Atom).

 Factors

So in order to make that list up, I considered the following factors for each editor:

Performance. How fast is it?

Stability. Can it handle large repos without crashing?

Footprint. How heavy the program is on your hard-drive, on your RAM too?

Built-in features. What comes pre-installed/out-of-the-box?

Customization. How many plugins/themes/packages are available?

Active community. Is there an active community of users/programmers feeding the beast? How often does it get updated?

That's pretty much it.

Again, this post reflects my opinion, so I don't expect everyone to agree.

For each editor, I made:

A list of 'Pros'

A list of 'Cons'

My own personal verdict.  

Here we go!

  DA LIST!

Pros

It’s free!

Very active community or users and lots of resources/tutorials on Github/Medium, etc.

Lots of themes and plugins.

Hackable from top to bottom.

The file-tree-view is really nice and perhaps the best one across all editors.

The package-installer is really neat and easy-to-use.

Best looking one (subjective obviously).

Lots of support from Github crew since they own the thing.

Best Git integration (obviously)

Fuzzy Finder is nice and should be the norm.

Cons

Takes some time to get the right setup.

Has some issues handling large repos/folders and CPU usage can go pretty high. It’s a browser-based app (runs on Electron), and is a bit slow to load and sometimes to respond.

Project manager possibilities are a bit limited but plugins can fix that

Hackable from top to bottom.

Most of the core is written in CoffeeScript, but the Github team is transitioning to ES6.

Has issues handling very large files.

Strange syntax management sometimes, you get a different color for your variable name depending on what you typed before (const, let, var etc.)

My verdict

Although it comes packed with great features and an overall neat layout, Atom is still having lots of difficulties handling large files and keeping a low CPU usage. It’s overall rather slow and unstable (you will notice that if you’re working all day long on your text editor).

The speed/performance factor is really something that comes across most reviews of Atom out there sadly.

I guess the perfect editor would be Atom without any of its flaws but it’s not quite there yet.

  Pros

Very lightweight.

Fast.

Reliable.

Outperforms Atom and Brackets.

Cons

70$ is a lot of money for a text editor. Especially when the other players in the market are free.

As with Atom, you will need to install a handful of plugins before you can benefit from ST’s full potential.

Git integration is somehow a bit shallow compared to other editors.

My verdict on Sublime Text

Obviously, Sublime Text is a reference out there and the editor that has the most mileage under its belt. Is that the reason why it's so stable, maybe. Is that worth $70? Certainly not.  

Pros

Free too!

Built-in live browser preview. When you move the cursor inside an HTML element inside the editor, it will then also be highlighted in the browser. Neat!

Takes about half the size of Atom.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati

Code completion out of the box.

The split window mode is really easy to use and intuitive.

Quick editing - When you mark any HTML element and press Cmd/Ctrl + E, Brackets opens all CSS associated with this element inline in the current window. From here, you can make any edits you need. Once you close it, any changes will automatically be applied to the stylesheet connected with this element. Nice!

Cons

Needs plugins and packages to really be complete

Supports only web languages out of the box

Some basic features are missing such as indentation guides, automatic matching tags editing.

Can also be slow at times but no big deal (especially compared to Atom)

Not as actively updated as Atom

Smaller community than Atom / fewer extension/plugins.

My verdict on Brackets

Brackets is the editor I started with when I first learned web development so I might not be completely objective here ❤️   

It’s a really nice text editor, more reliable than Atom in my opinion but less hackable. I would use it over Atom just for the Quick Editing and Live Preview that are great. This is something missing in VS Code, a reliable 'live preview' with hot reload just like Brackets can do natively.

Pros

Stable

Fast

Reliable

Great Git integration right out of the box.

Breakpoints debugger built-in.

Cons

Microsoft? 🤔

It doesn't have the polished interface of Atom.

The Navigation system is a bit odd compared to the other 3.  

My verdict on VS Code

I must say that as the full-on Microsoft-hater that I am, I overlooked VS Code for a looooong time. I must say that I was wrong (I hate to admit it though) and what MS accomplished here is rather nice. How come it’s the same people who created the worst web browser(s) and the best text editor? I leave you with that question unanswered. VS Code is fast, reliable and gaining huge momentum this year, moving to the top front-end developement environment according to 2017 Stack Overflow survey.

VIM? 

Vim is a bit too “raw” for me. Vim is like a salad without dressing. You know it’s healthy, and you know you don’t really need more, but you just want more.

Final verdict

Except maybe Vim that’s a bit too extreme in its philosophy and that requires too much commitment in terms of workflow, you should definitely give each one a try.

It hurts my feeling to say it but VS Code feels really, really nice and stable as a daily editor. Atom has too many performance issues to be the top-choice and Brackets does not offer as many possibilities in customization sadly. Sublime Text is probably an overall good pick if you’re Ok in forking out $70 for it. I know I'm not.

Well, that's about it for now. Let me know what you think down below or drop me an email at thomasfaller@gmail.com :)

Edit

I found the following link on Quora and though I would inject a bit of "factuality" into my biased post :D

https://blog.xinhong.me/post/sublime-text-vs-vscode-vs-atom-performance-dec-2016/

You can find the entire discussion here.

[tomthedev-blog]

Starting Udacity Full-Stack Nanodegree today! Yey!

[tomthedev-blog]

How to manage your bookmarks! (Resources 2/3)

This the follow-up post to my Resources 1/3 post.

The aim is to provide you guys with valuable links to use in your coding-learning activities.

In the first post we covered the basics and essentials, sort of the "101" links you should always have open in a tab somewhere. If you don't know yet, here's how to "pin" a browser tab so that your link stays open no matter what.

By now, if you haven't done so, I'd encourage you to start organizing your bookmarks into categories.

Personally, here's how I do. 

Part 1

The first set of folders I have in my bookmarks is sorted by languages:

HTML

CSS

JavaScript / jQuery

React

Inside each "language folder" I have the following sub-folders:

Documentation/Docs

This is where I keep important links such as MDN pages on specific methods or prototyping for JS, or references to sections of the Facebook React Github docs for React.JS. I started with a single 'Docs' folder to keep all my important MDN links together but it quickly became too crowded and I could not tell apart one from the other so now I like to separate those by language. It makes more sense. You'll often be stuck on a script while building a function, thinking "damn how does that .map() method works already?" so you might event want to have like 'Functions' sub-sub-folder if you find yourself browsing that a lot. Remember that a bookmark should only be one if the relevant page takes more than 2/3 sec to be Googled. :)

The second subfolder I have in each language foder is

Articles

There are tons of great articles out there on the direction each environment is taking, how JS is evolving into ES7? How React is changing the way we 'think' and 'organize' our code? Which version of Angular will finally be stable and consistent (aha)? This is where you can keep track of the major changes hitting the front-end ecosystem.

Best practice in my opinion is to keep that one at the bottom of your languages folders so that they're not visually competing with the useful stuff you'll be searching when you work but be sure it's accessible as it's still nice to keep an overview on how things are evolving out there.

Tutorials

Tutorials are great, especially if you're a visual learner like me, I can read something 10 times without grabbing it really, but if I can try on my own or see someone doing it live, it helps a lot!

Since YouTube doesn't really have a great way to organize and manage your playlists (creating subfolders in YouTube would soooooo great 😍), I often have to dog past vegan recipes and Bowie concerts to get my hands on that specific "React + Firebase Tutorial"...

A little Space Oddity in the back doesn't do any harm still 🚀

Part 2

Moving on now, the second set I have is all my learning resources.

Learning resources

This one of course will depend on how you learn online, which sites you use if you use any. Among many others, I keep the following ones bookmarked:

Teamtreehouse

FreeCodeCamp ❤️

Udemy

CodeSchool

Udacity

CodeAcademy

Some such as FCC or TT will have a dedicated forum/blogging section so sometimes, some of those links can be moved into the afore-mentioned 'Tutorials' or 'Articles' folders based on your individual needs and/or preference.

I also like to keep my Gitter help chat rooms from FCC bookmarked there. I use Slack at work and keep my personal bookmarks separate from my work-ones (Thank you Google Chrome).

Finally.

Part 3

This is probably the largest section. I started creating a Resources folder with everything in it but found myself having to go through the all thing just for a specific font so I like to have the following now:

Fonts

This is such and important resource. A good font will often make the difference between a bad-looking page and a great one. Building a page with the default browser font is a crime. Seriously.

You don't have to be a designer or anything to pick a great font. In most cases, using Lato or Roboto from Google Fonts is already a great improvement over a default font. If you can spend some time on that aspect though, please do. Your projects will look more complete and potential employers will see that you're not only a code-generator. 🤓

Here are some links I keep in my 'Fonts' folder:

Google Fonts: Free and essential, easy to use too.

WhatFontIs.com:  Helps you identify a specific font using a URL or an image file.

DaFont: Free fonts.

LostType Co-Op: If you're looking for something a bit more hype and trendy. Those fonts are paid ones but 100% of the price goes into the designer's pocket. ✊🏻

Letterhead Fonts: Rare and unique old typefaces.

Futuracha Pro: ... that's my personal addition to the list. A font that evolves as you type it...

More great font-links here, here and here.

Colors

This is such and important resource. A good color will often make the difference between a bad-looking page and a great one. Building a page with a "darkslategrey" or a "hotpink" background-color is a crime. Seriously. 🤔

Here are my top links for picking gorgeous palettes for my projects:

ColorMe.io:  Helps you visualize how colors work in CSS. You can pick a color and tweak its different settings.

Flat UI Color Picker: The name is quite self-explanatory. This web app will help you pick a color depending on various shades.

Color-Hex: That one's always open in a pinned tab. So useful! Provides you with a wide range of color palettes. Pretty neat if you want to replicate popular websites.

Flat Colors: Like Color-Hex, Flat-Colors can help you pick a color palette when you're lacking inspiration on a project.

HTML Color Names: Even though they should not be used extensively; HTML built-in colors can help for a quick fix when prototyping a page.

LOL Colors: Because I'm a big fan of McKenzie Child, I can only recommend you check out his color palette tool!

 Images / Photos

This is such and important resource. A good ...

Ok, I think you get the point.

Here are my favorite sites for free pictures and photos:

Unsplash: Great site with tons of not only free to use visuals but some photos are simply stunning.

Pexels: Probably a step down in terms of quality compared to Unsplash but the quantity is there.

Vexels: Same as Pexels but for vector graphics.

Shutterstock: Although the best picks are obviously paid, Shutterstock has some free pics too.

Pixabay: Some sorting needed but good overall resource.

Canva: Canva deserves to be at the very top of your bookmark list. It's an online graphic editing tool that allows to create custom-size graphic elements (banners, buttons, frames, info graphics, etc.) and export those onto your computer. How neat is that. Huge time-saver if you have a precise idea in mind.

Material Design Icons: Great resources for icons.

Font Awesome: Another great resource for icons. Easy to use and endlessly scalable in terms of resolution. Those will always look great and will give q consistent look to your social icons and menus. They're releasing v5 which seems to be packed with tons of new stuff!

Material Design Guidelines:  Not to be mistaken with the font link above. This is packed with Google's own recommendations and tools to get familiar with the material UI elements and layouts Android introduced.

     Github Repos

Editor/Utilities

[tomthedev-blog]

My 3 favorite CSS frameworks

There are many CSS frameworks out there that will make your developer job much easier.

What is a CSS framework? How does it help? 

CSS frameworks are libraries of predefined classes to assign to your HTML tags. You just need to link your page to the CSS stylesheet (you can download it but it's better to use the CDN link, here's why) and you're good to go.

Using a framework for your CSS has many advantages. It reduces the time you spend on crafting your styles since you only need to know what class to add and most classes will handle different styling aspect (in Bootstrap for example, assigning the class 'btn-lg' to your <button> element will increase the size of the button container AND its font-size at the same time.

Another great aspect is that it will provide clarity and consistency to your styling, two things that are often missing when one begins to code.

CSS frameworks are also great for quickly drafting up a page or a web app, if you're visiting a client or making a presentation during a meeting.

Downside is that sites using those framework tend to be similar in terms of layout and looks.

It can also keep you rusty on the knowledge/practice side of things. If you're on top of your 'Flexbox' game, you need no grid system! 

My 3 top CSS frameworks are...

   Bootstrap

Let's get the big guy out of the way. Of course, you've probably heard about Bootstrap a lot and it's up to the point where some devs use it automatically on almost all their projects. It's easy to use, intuitive enough, with a lot of tractions and support from a huge community of users out there. Very stable (Bootstrap literally always work for what is expected from it) and reliable, 100% responsive and its got a great documentation. The latest version is still in alpha mode (v4) but it's stable enough to be used in production and streamlined a lot of its classes (thanks for the simplified syntax on grids!).

The cons are that Bootstrap sites are recognizable from a hundred mile (Yes "Jumbotron with btn-group" I'm looking at you!) and sometimes it looks like half of the landing pages out there are built on BS... (are they? 🤔).

Another pitfall is that BS does not give a shite about semantic tags. The latest iteration of HTML (5) is relying heavily on those semantic tags (see full list here) for structuring pages, for both clarity and SEO purposes. So you often end up with hundreds of meaningless divs with dozens of classes. A mess.

If you're into the whole graceful degradation vs. progressive enhancement debate, you probably know what I mean.

The CSS is quite heavy (even though the team worked a lot on that aspect). Straight out of the box, Twitter Bootstrap includes CSS weighing in at 126KB and 29KB of JavaScript. If you do want to use all of the sweet functionality baked into Twitter Bootstrap, you should have a good think about resource loading times.

So to counter that, you will have to customize your CSS and style you elements to your taste, step away from BS buttons and create your own stylesheets. It's possible to use BS ad still get away with unique layouts and fresh designs. Check this out: 

If you think you can't possibly quit on Bootstrap, check CSS grids and read that great article from NYT's Natalya on Medium.

   Bulma

Bulma is based on flexbox and SASS. It offers everything you need for the creation of a web site or web app. It has a grid system, single elements and more complex components. There is no Javascript included, so if you are working with modals for example you have to come up with your own implementation. This makes it easy to integrate it in your react app for example.

I personally use it on my React web apps as it's lightweight and easier to integrate.

   Foundation

If picking Bulma is a real choice, choosing between Foundation and Bootstrap is (as Nick Petit from Treehouse is saying in this great post) like choosing between red and white wine. It's really down to personal taste.

Both will provide you with: - A responsive, grids-based site. - A reliable  and stable tool with a great documentation. - A community of users that can help.

Since this is all personal, let's get a bit a partial for a bit. I personally prefer Bootstrap for its documentation that I find clearer and easier to browse although I must say the "collapse" class from the Foundation and the possibility to have images nested into unordered lists is pretty cool.

Overall

So the best framework would be something that's as lightweight and simple as Bulma, as stable and complete as Bootstrap, sprinkled with some Foundation features...

In general, Bootstrap is the perfect tool for quickly prototyping sites. If you're freelancing for a client, you can just flesh out a page with a nav, sidebar, footer and couple of images in just a few minutes.

Let me know what you think about CSS frameworks down below, which one you use and why. :) Cheers!

 PS: Here are some useful links if you want to know more on that topic

https://three29.com/best-css-frameworks-2017/ http://www.catswhocode.com/blog/lightweight-css-frameworks-2017 https://www.quora.com/What-are-the-best-examples-of-great-prototypes-made-by-Twitter-Bootstrap https://www.w3schools.com/bootstrap/bootstrap_examples.asp https://dansup.github.io/bulma-templates/ https://medium.com/@mattia_asti/creating-a-job-board-in-a-few-days-contentful-riot-js-bulma-io-293276516301

[tomthedev-blog]

Learning HTML 1/3 (“Hello World!” and all kind of stuff)

Learning HTML at the time of HTML5 feels a bit like discovering JRR Tolkien’s world through Peter Jackson’s trilogies ; you do enjoy it a lot but every time you meet someone with more mileage than you in the field, they’ll make you understand that all the good stuff has been removed from it.

Looking at how structured and coherent the latest edition of HTML is, it’s hard to imagine that not too long ago, entire sites were formatted though <table> tags with rows and columns.

Now that I think about it, I ca remember some old sites that surely used to be coded that way.

The most important thing to understand about HTML is that it’s not really a programming language. I mean, imagine yourself stepping into a Hackathon and stating:

“Hey guys! I’m a programmer (don’t even think of saying “hacker”)!!

Silence in the room, every dude here is having their eyes pointed right at you. Some are even starting to call your bluff.

“…. yeah … I know HTML…”

…. 

… everyone burst into laughter … that 4-year old with a popsicle over there is laughing … there’s even a Japanese guy who only understood ‘HTML’ in your sentence and he’s laughing the most…

Let’s be clear, HTML is not a programming language, it’s used for referencing and structuring part of a webpage, it’s like preparing your lunch box for an OCD-person, labelling one box with <ham> another one with <cheese> and another one with <bread>, the <ham> and <cheese> boxes being smaller and fitting right into the <bread> box. 

You get the picture.

Now, imagine an elaborate lunch with starter, main course and desert (and a drink too). You are having a <salad class=”rocket watercress”> with a <dressing class=”balsamic”>

<div class="rocket watercress"> <div class="balsamic vingar"> Here's your salad!!! :) </div> </div>

The main concepts you should make sure to understand before you move on to another language are the following ones:

How to link an HTML file to a CSS stylesheet.

How to link an HTML file to a JS script.

The header contains information about your webpages and is not visible on the actual page (title, meta-information, etc.)

What’s visible when you’re on a site is the content of the <body> tag.

Classes should be used to style several elements while IDs should be used on unique elements. For example, if you want your header, main area and footer to have the same width you can use a class on them of .wrapper for example but you should use an id of #header for your header, #footer for your footer, etc.

In HTML5, you should use as much as you can semantic tags instead of just divs with a given class, here’s a link to the new semantic tags in HTML5.

More will follow!

Feel free to comment and tell me what you think about that or how you learned HTML yourself.

[tomthedev-blog]

My YouTube channel just opened!

[tomthedev-blog]

General Javascript questions during an interview.

Preparing for an interview can be stressful, and even more so if you don't feel you've put the right preparation ahead of D-day.

"By failing to prepare, you are preparing to fail."  -- Benjamin Franklin

Since Javascript is both used for front-end and back-end, it's hard to overlook in the hiring process and many interviews will feature core-js questions or at least general ones.

Here are some questions you should be prepared to answer:

Q - What is JavaScript?

You didn't expect that one, right? Yeah that one can come up. It's unlikely and a bit too scholar but it can get you on the wrong path if the interviewer feels that you have no idea what JS is about from the very beginning of the conversation. Possible answer - JavaScript is an interpreted programming language with object-oriented capabilities that allows to build interactivity into otherwise static HTML pages.

Q - What are the advantages of using JavaScript?

That's the follow-up question for the 1st one. Keep it up.

Possible answer - It allows less server interaction ; you can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.    - It allows immediate feedback to the visitors ; they don't have to wait for an entire page to reload to see if they have forgotten to enter something.    - You can add interactivity ; for example having an interface that reacts the user hovers over an element. Now the more serious stuff.

Q - What is a callback?

Callback functions are really important in Javascript. JS being a event-driven language, if you write say functionA() followed by functionB() they're going to be returned in that order... unless functionA takes too long. A callback will ensure that functionB() is only triggered when the script is done with functionA(). Might not make sense right away but try replacing functionA() with puttMyClothesOn() and functionB with goToWork()... Getting the picture?

Possible answer - In JavaScript, functions are first-class objects. One of the consequences of this fact is that functions can be passed as arguments to other functions and can also be returned by other functions. A function that takes other functions as arguments or returns functions as its result is called a higher-order function, and the function that is passed as an argument is called a callback function. It’s named “callback” because at some point in time it is “called back” by the higher-order function. Michael Vollmer explains it really well in his post.

Q - What is a closure?

If you don't get that question during your interview.... well that's just not possible, you will get that question for sure. You might not get that on the very first interview but you will get it at some point. 

Closures are crucial as they allow you to create private variables. JavaScript variables can belong to the local or global scope.

Imagine you want to use a variable for counting something, and you want this counter to be available to all functions.

You could use a global variable, and a function to increase the counter:

1 2 3 4 5 6 7 8 9 10 11

var counter = 0; function add() { counter += 1; } add(); add(); add(); // the counter is now equal to 3

You need a way to prevent the variable counter from being changed/altered without using the add() function but also you need the counter to be called only once if needed so it's not really a solution to modify your function with += 1 addons.

The solution is to use a closure.

1 2 3 4 5 6 7 8 9 10

var add = (function () { var counter = 0; return function () {return counter += 1;} })(); add(); add(); add(); // the counter is now 3 but it is 'protected'

The variable add is assigned the return value of a self-invoking function. The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.

This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.

This is called a JavaScript closure. It makes it possible for a function to have "private" variables.

The counter is protected by the scope of the anonymous function, and can only be changed using the add function.

Possible answer - A closure is a function having access to the parent scope, even after the parent function has closed. It allows to protect a variable from being changed while allowing  a script to use via a function.

Practicing is your best bet here so don't hesitate to Google for mockup interviews and tutorials on this.

Here's a great video from Codementor.io YouTube channel:

This video is great and Dan is really giving a great overview of what most screening interviews will be look like. I can't stress enough the importance of his advice here.  You should always be communicating about what you are doing, how you are assessing the situation while you're in the coding challenge, exercise. Remember that the interviewer is not looking for a human MDN here (check out my resources post if you don't know what MDN is) but want to see how you think, how you use your current knowledge and experience to tackle a problem you've never encounter because that's what programming is all about.

Your ability to communicate on what you are currently doing is also crucial to prove to your interviewer that you can take a few steps back and have a critical eye on a problem.

Feel free to comment if you liked that post and let me know what you think or tell me about an interview!

PS: I'll be adding more questions and refining that post. I'll be writing about more in-depth questions and the exercises you can be asked to solve during an interview.

PS2: I know I was supposed to post a video on how to replicate the Facebook landing page but I'm still waiting on Amazon to deliver my microphone. 😎 

[tomthedev-blog]

Replicating Popular layouts Series

Hey guys!

I'm going to start recording a vlog series (yes a video-blog series) where I will be trying to replicate popular website designs live. The first will be the Facebook landing page.

I'll be re-creating the page from the ground up.

Interesting thought: You might not be familiar with that page as most people never log out of Facebook so going on Facebook will display your wall right away in most cases (except if you're on a public computer you're using for the first time).

Let me know in the comments what other sites you would like me to consider for the next episodes?

Cheers!

[tomthedev-blog]

Learning about Web Design without Photoshop

My design context.

I’ve always been very very keen on drawing and designing when I was a kid and it’s something I’m looking to dive into again as an aspiring front-end developer.

When I started learning web development I often ended up spending way too much tome on tiny design details and still today if I have my laptop and 1 hour of uninterrupted free time (when does that ever happen?) I’ll generally start a design / logo / banner to use on a site or just for the fun of creating.

At the moment I’m into duo-tone images. Those generally consist of a landscape / skyline picture (the more contrasty the better) where white tones are replaced by a color and dark ones by another. It creates beautiful effect that are easy on the eye and not visually competing with your content.  

The Photoshop disappointment.

So the ‘design’ side of things quickly became something important for me. I often come across front-end projects (I won’t give any name) where the layout, design choices, UI elements and color palette are just so bad that it drags the whole page down. Even something greatly-coded ; if not adequately designed will just remain…. some… thing greatly coded.

Developers are not entirely to be blamed for here. Most design tools are difficult to learn and if you ever tried to tame Adobe Photoshop you’re probably familiar with the following “front-end-dev-trying-to-design” routine:

Installing Photoshop

Opening Photoshop

Trying to create a new document

…

Being discouraged

Uninstalling Photoshop

Promising never to use it again  

Does that sound familiar? I bet it does...  

Photoshop, you old b...

The reason behind that is that Photoshop was never meant to be a web-design tools and only the last couple of updates and a handful of plugins have transformed the almost 30-year old software into something suited for web-design.

Sketch.

Now, don’t get me wrong, if you want to be a web designer as opposed to a developer, you should probably invest 400% of your time into becoming a star at Photoshop because it’s still the reference out there. But that doesn’t mean it’s the only one…

Here comes Sketch! Sketch was created by a company called Bohemian and is a vector-based graphics design software that's 100% web-development oriented. You can start creating a web or app interface in 2/3 minutes without having to go through endless formatting settings and editing.

It comes fully packed with templates and “artboards”, those are predefined working spaces that simulates the size of a device / computer screen so you can quickly build you desktop and mobile UI side by side.

The system of layers is (unlike) PS very easy to tame and at any given time, you will only see the options/tools that are relevant to the shape/layer currently selected so confusion is reduced to a minimum.

For example, here’s a Nike landing page I was able to design in about 10/15 minutes. It's not the best layout but Sketch allows you to quickly elaborate web layouts.

Sketch is really easy to use and has the following advantages over PS:

Photoshop is a photo editing tool that's been modified to suit the needs of web-designers. Sketch was designed with web-design in mind. The first tool inserts a shape, specifically a rectangle. This is usually the first thing one does in designing a UI. So, the relevant tools are front and center and the irrelevant ones have disappeared. This makes Sketch way easier to learn, and actually possible without a guide or tutorial.  

It's faster -- have you ever opened a PSD on Photoshop and lived to regret it?   

It's extremely light, no RAM-hold-up!  

It renders fonts better than Photoshop. Photoshop has an internal text rendering engine that lets fonts look different than they do in a real browser or phone. In fact I use fonts a lot when designing banners and this is critical to me.  

Learning curve on Sketch is amazing, you will become an expert at it in a week.  

Another aspect is the monthly pricing scheme. I personally prefer paying upfront to use the software for as long as I want rather than paying every month and ending up paying a lot in the end (over a period of 2 years, PS would cost about $600, yes that’s a 6 followed by 2 zeros…). Sketch sells at $99 period.

 Plugins.

Sketch has lots of advanced plugins that will make your work easier. For example:

 - SketchDistributor distributes selected objects vertically or horizontally with a specified spacing.

- AutoLayout lets you resize content responsively on the fly.

- Content Generator. That one is a true geme! It generates content (images, text, lists, etc.) that will automatically populate the content areas you have created. Watch it works it magic!

 Sources, references & interesting links:

- Sketch official site - Quora - Why is Sketch becoming so popular compared to Photoshop for interface design? - Sketch or Photoshop: Choosing the Right Tool for Web Designer [Infographics] - MonsterPost - Interview with Christopher Downer the Guy Who Designs Sketchapp Inside Sketсhapp - Sketch: A Beginner’s Guide on Medium

 Anecdote.

1 2 3

function getRidOfTheBloating(photoshop) { ............. }

I was cruising in UpWork the last couple of days and I came across an ad where the client provided a link to the assets they wanted to use for their landing page (keep that in mind, 1 single landing page). I was curious and wanted to give it a try so I clicked and ended up downloading a 514MB-heavy .psd file, all just for a landing page with 3 sections, a couple of buttons and background images…

Keeping in mind that those images will have to stay within 400/500KB for best loading speed and site performance, you can imagine what’s ahead of you as a developer when you’re being handled this type of assets.

 If you enjoyed reading this post, feel free to share it and let me know what you think in the comments section down below.

:)

[tomthedev-blog]

Is there a life without Javascript?

If you're a full-stack developer, you'll probably answer "No" to which I'll say

- "Yeah you're right"

- "This was a rhetorical question"

When you start coding you quickly understand that JS is about making a site or an application dynamic and yes, most animations you see on the Internet are made using Javascript or one of its libraries.

According to W3techs.com, Javascript is used by 94.6% of all the websites.

Ok, ok, if you have a form on your site then you'll have to use Javascript. Having a visitor filling out details will require a script to listen to an event, check that the data is correctly entered (for example that the email field does contain a valid email address and so on.

This doesn't mean that your site cam't look great without it. There a couple of sites out there with minimal and sometimes no JS.

Taking the same HTML structure as starting point, CSS Zen Garden is showing how far a pure-CSS-styling approach can get you. I personally like the horizontal-collage layout number 101 has and number 202 is awesome! 

Remember that CSS has very advanced attributes you can use now, such as

- CSS animations and transitions

There are two ways to create CSS animations. The first is very easy, it is done through animating the changes of CSS properties with the transition declaration. With transitions, you can create hover or mouse down effects, or you can trigger the animation by changing the style of an element with Javascript. You can see the transition below by hovering over the planet - this will cause the rocket to close in.

If you want to know more check out this brilliant article by Thoriq Firdaus:

- Generated content counters (and a game built on it)

See the Pen CSS Counter Game by Will Boyd (@lonekorean) on CodePen.

MDN gives a couple of examples on their page. You can even generate content on hover just like... yeah Javascript! If you're curious about what can be done and how to do it, a good starting point is this MDN page. Don't forget to check out compatibility issues beforehand on CanIuse.

You can create clickable responsive navigation tabs without Javascript. Here's how:

See the Pen Responsive CSS Tabs by Thomas Faller (@thomasfaller) on CodePen.

You can even create a game using only HTML and CSS: CSS Panic

I this example, crocodiles are actually radio buttons and animations are controlled via the :checked pseudo-class. Here's a link for more information on how CSS pseudo-classes work:

MDN - Pseudo-class

And here's the source code for it.

     One the same topic, you should check out this glorious Wired article 

 And here's a great site totally responsive that's not even using CSS 😉 http://motherfuckingwebsite.com/

[tomthedev-blog]

Where to start?

Simple answer: "Here"...

Here I am, trying to figure out where to start this and setting my objectives.

The objective is to become a Front-End Developer before the end of 2017! In order to achieve this I need extensive knowledge and experience in:

HTML

CSS

JAVASCRIPT

JQUERY

BOOTSTRAP

ANGULAR

NODE.JS

...

... Hang on, that's a lot!! 

That list is not really definitive, I want to learn about most JavaScript libraries too, and some back-end technologies won't hurt (PHP, .NET, RUBY, PYTHON, etc.).

(scratching my head)

So I started to take some courses on Treehouse, Udemy, CodeSchool and FreeCodeCamp just to name a few.

"By failing to prepare, you are preparing to fail."  -- Benjamin Franklin

I need a Portfolio Site to showcase my work, a Github account too. Some planning won't hurt! I decide to dedicate 1 hour every day to that new routine and I will alternate FCC, Treehouse and CodeSchool for the first 2 months.

[tomthedev-blog]

Resources! 1/3

There are lots of resources out there for aspiring developers.

W3SCHOOLS W3 Schools is a great site and it’s probably where the information is the easiest to search. Whenever I just need confirmation on that forgotten value or attribute (damn what’s that shorthand command again??) I just search W3 and find it right away. They have snippets of code you can run to see the effects right away. Pretty neat! Created in 1998, its name is derived from the World Wide Web. W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.

CSS-TRICKS Before you do anything else, you have to bookmark their snippet section “A Complete Guide to Flexbox”, this is so well made and explained it’s actually an embarrassment not to use it! It divides up the attributes between the "Flex parent" and "Flex children", which makes it very intuitive to browse. The site itself is pretty nice to dive into with a blog-style layout. You can directly open their Snippets section for an in-depth dive into their resources!

MOZILLA DEVELOPER NETWORK (MDN) THE bible! Pretty dry and complex at first (and that feeling continues later on) but extra complete and thorough. If it’s not there, chances are to doesn’t exist. Mozilla Developer Network is a resource for developers, maintained by the community of developers and technical writers and hosting many documents on a wide variety of subjects A great aspect is that it keeps referencing all the deprecated methods so you can keep up with the flow. It’s especially useful for jQuery/JS methods that really well-documented there. And for the other languages as well. I could not survive without their Pseudo-class page. Obviously it's a bit "Firefox inclined" (it's a page run by the Mozilla foundation so what do you expect) but it's packed with content!

CODEPEN Codepen is a genuine Sandbox web app that allows you to quickly create a page / app and test out some features. It comes with all the necessary plugins and it's super easy to use. You can instantly preview a page or play around! Here are some examples of projects built with Codepen:

Haiku4u - a lorem ipsum haiku generator

Align 4 - a classic game

Full Stack Conf - a mock tech conference page

Drawing App (the name is self-explanatory) The last 2 are from my portfolio of projects :)

[tomthedev-blog]

Every journey starts with a (tiny) step

I started learning to code about 6 months ago... oops let's rewind that...

I started coding when I was about 7-8 year old. My first programming companion was an Amstrad computer (lookup), it would take funny-sized floppy disks and hold about a couple of KB of rom, no more. Switching à computer On back then meant you had something in mind, or at least the will to create some stuff because there would not be anything for you to use if it wasn't for that blinking cursor. It had Basic installed on it and you could do line-by-line instructions like the following one:

It could even take some data:

And some logic gate:

Pretty cool for a boy of my age back then.

There were some graphics possibilities too but I only scratched the surface on those. I went on to write a text-based RPG that looked a bit like those adventure gamebooks I loved adventure gamebooks and took a very long time to write (it's not finished yet if you're wondering) but it was so fascinating and rewarding to see the scenario unfold before me as I typed the instructions that I would keep on rewriting and rewriting it. Coding requires attention to details, grit and the ability to take a fresh look at a problem even after starring at it for 20+ hours. 28 years later I am resuming my coding journey. Let's hike!