4 Simple Things To Make Your Personal Website More Aesthetic

The purpose of this article is to highlight some small adjustments you can make to your personal site that will make a huge difference in usability and aesthetics. You don’t need to be an expert web designer or developer to make these changes. I’ve written this article after reviewing 100+ personal websites across the web which were custom built, WordPress, Square Space, etc. sites

1. Standardize your typography

Creating a standard typography for your site will make it easier for your users to recognize if the text on the page represents links/anchor tags, paragraph text, annotations, titles, and navigation links. Setting a standard typography means that the font and style used for paragraphs should be the same on every page of your application. (i.e. All paragraph text will be of font size 16px in Helvetica-Neue font. All text contained within buttons will be uppercase size 14px font.). That being said, all text with the same meaning or function should have the same font and text style.

Here is a simple typography generated via
Type Scale

type-scale

The folks over at Material Design also have a detailed typography scale you can use for reference.

2. Color scheme

For those who want to create a more aesthetically pleasing experience while users navigate your site, it may be worth spending a few minutes to create a matching color scheme for your website. I use often coolors.co to generate color schemes for my website builds.

Screenshot from coolors.co:

coolorsco

After picking a color scheme make sure you’re consistently making sure all your elements of the same function have the same styles. (i.e. All button on your page are green with white text which. Once your user sees this button once they will recognize all other green blobs with white on the page as buttons.)

3. Set max content width

All content on the page should be kept within a certain max with. When is last time you were on a web page on your desktop and your eyes had to move from the left side of the screen all the way to the right side of the screen to read a paragraph?

max-content

All content should be focused in one section so that it’s easier for a user to read.

4. Favicon

For those of you building a personal brand, I think having a favicon on your site will make you look that much more official and serious. Not having a favicon on your web page may make your personal site look incomplete and give the impression that it’s still under construction.

no-favicon

5 Atom packages that will speed up your workflow

The purpose of this article is to share 5 Atom packages that I use constantly that have sped up my workflow. Let’s start!

atom-beautify

atom-beautify on atom packages

With atom-beautify you never have to worry making sure your code is perfectly indented throughout the entire page. By hitting a designated set of hotkeys this package will take you unformatted code and indent it perfectly as if you spend the next 15 minutes indenting it yourself. The creators of this project made beautifiers for all types of code formats and languages such as JS, ESLint, Nginx, Vue, and many more.

autoclose-html

autoclose-html on atom packages
As you can probably infer from the name of the of the package, autoclose-html will automatically insert the closing HTML tag after you close the opening tag.

emmet

emmet on atom packages

emmet has had the largest impact on speeding up my web development workflow. Generating HTML code blocks has never been easier with the set of hotkey shortcuts this package comes pre-packaged with. For those who use a front-end framework like Bootstrap4 are familiar with writing the following code:

Screen Shot 2018-10-08 at 1.49.39 PM

For some of us, this code becomes muscle memory at some point. However, with emmet we can simply write the following:

div.row>div.col*3

and hit tab on the keyboard and generate the same code above.

emmet hotkey cheat sheet

minimap

minimap on atom packages

minimap generates a map of all the code in your open document/script file where you can quickly navigate to any point in your open source file no time at all. This is a huge step up from using a combination Ctrl + F and memory to jump between lines of code.

platformio-ide-terminal

platformio-ide-terminal on atom packages

This package allows you to open up multiple terminal instances in Atom in your current working directly. This is very convenient since you don’t have to open up another application to access the terminal.

Productivity as a DIY project

Guest Author: Mario Villacres

As I was wrapping up my time at Fullstack Academy, the future seemed bright. I had an in-demand skill set in my arsenal and after three months of drilling algorithms and learning best practices in web development, landing a position as a web developer was all but guaranteed.

And although my time in the classroom was done, I continued to get my money’s worth from Fullstack. I was assigned a career counselor who would continue to help me in my efforts to break into the world of tech, whether it be mock interviews or salary negotiation tips.

In order to make it easier for her to keep track of where I stood in the interview process with a given company, she had set up an account on Asana for me to record my progress. After trying Asana for a week, however, I was not a fan. This was not my first project management tool — I’ve used both Trello and Todoist extensively — and Asana felt cluttered by comparison.

I shared my gripes with my career counselor, she said I could simply keep her in the loop via Slack. Through this minor experience, however, I came to realize how much time I had been wasting switching between multiple services, which totally defeats the purpose of “productivity” apps.

Seeking a single source of productivity

Rather than have all my projects and tasks splintered across multiple services, I decided to consolidate all my projects onto a single platform. The only issue was which one to use.

Trello’s kanban boards were great for large-scale projects, but left much to be desired for one-off tasks (e.g. “Buy milk today”). On the other hand, Todoist’s single stream of tasks made it difficult to visualize workflow. I sought out other services that might have been a better compromise, but each service I sought out came with its own off-putting limitations (oftentimes it was the price tag).

Seeking a single source of productivity

It seems silly in retrospect. Here I was in search of a web app that would fulfill my particular needs, forgetting for a moment that I had just spent the past 3 months developing the skills I would need to build it myself! And so began my quest to build my perfect web app.

The building of Dharana

I chose the name Dharana both in reference to Asana (as both words refer to concepts from the Eight Limbs of Yoga) and as a way to describe what would be the experience of using my app — the word dharana in Sanskrit has several related meanings, including “a collection of the mind” and “uninterrupted focus.”

Tools Used

I was delighted to find out that Todoist was built with several of the same tools I had learned at Fullstack, and so I began building my app with a similar structure, adding my own twists along the way. Ultimately, Dharana’s tech stack was the following:

  • React on the front end, as each task and kanban list could easily be thought of as components
  • Redux in order to allow tasks to appear under various filtered/queried views (one of my favorite features of Todoist)
  • Node and Express on the back end for their flexibility
  • PostgreSQL as the database as the data easily lent itself to a relational structure

New faces, new influences

Anybody that has been job hunting within the past few years will tell you that it is simply not enough to get your resume circulated to the right people, your reputation also needs to make the rounds.

It’s for this reason that I began attending meetups almost daily since leaving Fullstack. One particular meetup group that I became fond of was the React NYC meetup. Every two weeks, they bring in some of the best professionals in the tech industry to give a presentation on how their companies go about using React in their online offerings. Each time I attend a React NYC event, I walk away learning something new and feeling like I’ve better refined my understanding of contemporary best practices on the front end.

Whenever I learned something that I felt would improve the experience of Dharana, I would spend the time to refactor the project; I usually ended up extremely satisfied by the results. Slowly, I began approaching my building of Dharana less as an end goal, and more as an open-ended exploration.

What’s next for Dharana?

While the current culture in tech dictates that developers must monetize everything under the sun, I’m in no rush to make Dharana into a full-blown business.

I have no doubt that Dharana could be a tool that several people might find useful in their daily lives, but for now, I’m very much content with Dharana being something that’s just for me.

Link to Mario’s Original Post on Medium

Stuck on 92% Chunk Optimization on Angular Production Builds?

The purpose of this article is to show you how I overcame an out-of-memory issue while building the production version of my Angular web application on my Ubuntu server by adding swap space.

Please keep in mind that building the Angular production bundle using another cloud providers resources (like building Angular on an AWS EC2) can get expensive fast. In light of that I figured out a way to automatically build and deploy Angular production builds essentially for free on GitLab.

The Problem

While Angular CLI was building the production build on the server, the machine returned a process out of memory error message. Here is what the stack trace looked like on the terminal:


FATAL ERROR: Committing semi space failed. 
Allocation failed - process out of memory 
1: node::Abort() [ng build --prod --aot]

At the time of writing this post this was my technology stack:

• Ubuntu 16.04.5 LTS (xenial)
• Node 8.12.0
• Angular CLI 6.1.3
• Angular 6.1.2

The Solution

After some doing some online research I found that a solution to this problem was to add additional swap space on my server. In this post, I will show you how I added swap space to my Ubuntu 16.04.5 LTS.

What is Swap Space?

Swap space is essentially emergency RAM that that sits on your hard drive and is utilized whenever you’re running your RAM close to max capacity. Sometimes large programs make the entire system need extra memory. Swap space can be a dedicated partition of your hard drive, a swap file, or a combination of both. The steps below will show you how to add more swap space to your machine.

Click here for the Official Ubuntu Swap Faq

Checking System Swap Information

First, we will check out our system to see if there are any existing swap configurations with the following:

$ sudo swapon --show

If the machine does not return an output then your system does not swap space available.

You can verify that there is no active swap using the free utility:

$ free -h

If you see a row of 0B‘s in the Swap row, no swap is active on the system.

Check Available Hard Drive Space

The most common way of allocating space for swap is to use a separate partition devoted to the task. However, altering the partitioning scheme is not always possible. We can just as easily create a swap file that resides on an existing partition.

Before we do this, we should check the current disk usage by typing:

$ df -h

The device under /dev in the output is our disk in this case.

For machines with less than 1 GB, it is highly recommended that the swap space should be at bare minimum equal to the amount of RAM. On top of that, it’s also recommended that swap space is at maximum, twice the amount of RAM depending on the currently available disk space. If need more swap space than twice your RAM then you should upgrade your server or add more RAM.

Create a Swap File

Let’s create a file of the swap size that we want to be called swapfile in our root directory.

My server had 512MB of RAM so for this example I will create a 1GB file with fallocate. Please adjust the file size to meet the needs of your own server.

More information on fallocate

$ sudo fallocate -l 1G /swapfile

Once the swap file is created we can verify that the correct amount of space was allocated with the following command:

$ ls -lh /swapfile

output:

$ -rw-r--r-- 1 root root 1.0G Oct 02 12:15 /swapfile

Enabling the Swap File

With the swap file available we need to tell the machine to leverage the extra space available in the swap file. First, we need to set the swap file permissions to 600 to prevent other users from being from being able to access or modify the file.

$ sudo chmod 600 /swapfile

Format the file as swap with mkswap:

$ sudo mkswap /swapfile

More information on mkswap

output:

Setting up swapspace version 1, size = 1024 MiB (1073737728 bytes)
no label, UUID=41e86209-3802-424b-9a9d-d7683142dab7

After marking the file as swap space, we can enable the swap file allowing our system to start utilizing it:

sudo swapon /swapfile

We can verify that the swap space is available by typing:

$ sudo swapon --show

The terminal should return an output like the following:


NAME      TYPE  SIZE USED PRIO
/swapfile file 1024M   0B   -1

Enable the Swap File Permanently

If we reboot our server at the current moment, the machine won’t keep any of the changes we’ve made to the hard drive partition. To make the changes permanent we will have to copy our swap to the /etc/fstab.

$ sudo cp /etc/fstab /etc/fstab.bak

Last we must add the swap file details to /etc/fstab to make it available at boot up permanently.

echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

Final Notes


Aside from this one case, there are many other reasons that one would need swap space which is included but not limited to memory consuming programs, hibernation (suspend-to-ask), unforeseeable circumstances, or optimizing memory usage. Please let me know if I could improve this post by making anything more clear!

Dockerized Flask App with Nginx & PostgreSQL

The purpose of the article is to share my Github project dockerized-nginx-flask-postgres , a dockerized Flask application that starts 3 docker container setup. This article assumes that you have docker and docker-compose installed on your local as you will need these tools to run this project. To run my project $ git clone my repository and then run the following command in the root directory of the project:

$ docker_init.sh

When this command is run a few things will happen:

  1. docker-compose will build the 3 container setup
  2. docker-compose will spin up the cluster on one network
  3. Flask-Migrate will initialize the PostgreSQL database with basic user authentication tables

When Docker finishes initializing the application you will see the following output in of your terminal:

$ ------------------------------------ 
$ The cluster has been initialized 
$ Navigate to http://localhost:8080 
$ to see the running flask app 
$ ------------------------------------ 

Open the browser to http://localhost:8080 and if the compilation of the application was successful then you will see the message Time to get building on the web page.

What’s the Goal of this Project

The goal of this project is to build an adaptable and modular stack that can be configured to be a lean full-stack framework or API depending on your business objectives needs with little to no configuration.

Why I Chose These Technologies

  • Docker – Leveraging the modularity of Docker allowed me to structure the application in a way such that anyone who forks my repository can switch out the source code, web server, or database to whatever technologies they feel comfortable using. For example, switching out PostgreSQL for MySQL is as easy as updating the docker-compose.yml and 1 line of code in the Alembic configuration and that’s it! When technologies change you will be able to swap out any container to stay one step ahead of disruption.
  • Nginx – Nginx was specifically written to address the performance limitations of Apache web servers. It can be deployed as a standalone web server or front-end proxy for other servers. Nginx was designed to support high concurrency where each worker process can handle thousands of HTTP connections simultaneously.
  • Flask – Most of my experiences in web development have come from working with full-stack frameworks such as Laravel or CakePHP that are out of the box and heavy solutions. Full-stack frameworks are great to have many layers of abstraction for a reason, however, they abstract away a lot of what goes on under the hood. I chose Flask because I have full control of what goes on in my application and only import the libraries that are essential to the application. Flask is everything you need it to be and nothing you don’t want it to be. Building out each feature and functionality from scratch has given me a much better understanding of what happens behind the scenes of full-stack frameworks.
  • PostgreSQL – I chose PostgreSQL because it is a powerful open source RDBMS (relational database management system) and I’m most familiar with. Since Flask does not have an ORM (object-relational model) library built in I use Flask-Migrate to manage the evolution of my database.

What’s Next on My TODO List?

  • Mapping the hot reload port on the Flask Container to my Local for faster development
  • Show how to connect your PostgreSQL container to Navicat for PostgreSQL
  • Show configuration for using MySQL instead of PostgreSQL
  • Show how to connect a MySQL DB visitation tool (e.g. MySQL Workbench) to the right port on the database docker container
  • Build out restful routes to populate the basic user authentication tables

Let’s Collaborate

Check it out on Github – I would love to collaborate with anyone! Pass this project along to anyone who you know would benefit from using it or be interested in improving it with me. I will update this blog post as I improve this project.

My top 5 Sketch plugins to increase productivity

The purpose of this article is to share what I think are the most valuable sketch plugins to my workflow when designing desktop and mobile screens. Enjoy!

1. Runner

Sketch Runner Plugin

Regardless of what you’re designing on Sketch, you will need Sketch runner to speed up your Sketch workflow. With this plugin, you will be able to search through all available plugins and Sketch menu commands without having to navigate through those long drop downs. You can also insert symbols, jump to any page, apply text & layer styles, and install new plugins.

2. Content Generator

Sketch Content Generator Plugin

Almost every client or project I’ve worked on has required me to populate my screens with fake data such as names, phone numbers, geo locations, profile images, etc which took a lot of my time because I had to come up with believable data off the top of my head for at least 50 rows of data. The content generator allows you to populate any number of rows of dummy data such as avatars, names, photos, geodata, etc in seconds.

3. Spell Check Whole Page

Sketch Content Generator Plugin

There are few mistakes more embarrassing allowing a spelling error slip through the cracks from design all the way into production. Spell check whole page allows you to spell check all text of every layer on the current page you are on. I also supplement this plugin by typing all of my screen text into Grammarly to check my grammar as well.

4. Merge Duplicate Symbols

Sketch Content Generator Plugin

As I have become savvier utilizing the power of Sketch symbols this tool has saved me a lot of time cleaning up my duplicate symbols from copying and pasting other symbols. This plugin allows you to merge symbols with the same name. You simply choose the one you want to keep and press OK. The other symbols will be removed, and all of their instances will be replaced by the one you choose to keep.

5. Symbol Organizer

Sketch Symbol Organizer Plugin

There comes a point where you have 50+ symbols throughout your Sketch file and you are dreading looking at the symbols page because of how messy you know it will be. Fortunately, the symbol organizer plugin organizes your symbols page alphabetically into groupings determined by symbols names in a clean grid.

Final Notes

I hope that these Sketch plugins add value to your daily workflow. What Sketch plugins have either changed the way you design or increase your productivity? Write them below!

How to connect Navicat to your remote PostgreSQL server on EC2

The purpose of this article is to show you how to connect you Navicat Database Admin Software tool to PostgreSQL server hosted on AWS EC2. Navicat is a vendor that offers a series of database management tools for PostgreSQL, Oracle, MariaDB, Microsoft SQL Server, MySQL and more. This article will assume that you already have a running EC2 Ubuntu 16.04 LTS instance with a PostgreSQL server running.

Step overview

  • Step 1 – Configure Security Group on EC2
  • Step 2 – Update PostgreSQL Configuration Files
  • Step 3 – Connect from Navicat

Step 1 – Configure Security Group on EC2

Log into your AWS account and select the AWS instance running the PostgreSQL server you would like to connect to on the EC2 dashboard. Next, you will edit the Security Group Inbound Rules.

Add an inbound rule with the following parameters:

  • Type: PostgreSQL
  • Protocol: TCP
  • Port Range: 5432 (This is the PostgreSQL port by default. If you changed the default port then use your custom port instead of the default one)
  • Source: [Write the single IP or IP range that you will be accessing your PostgreSQL database. Please be sure to restrict inbound port access to those who should not be able to access your database]

Once the inbound rules have been updated let’s proceed to update the PostgreSQL configuration files on the server.

Step 2 – Update PostgreSQL Configuration Files

First, we will ssh into the server via the command line and edit the postgresql.conf file with the following command.

$ sudo vim /etc/postgresql/9.5/main/postgresql.conf

Once in the file, we will include this line below which means the PostgreSQL server will listen for inbound communications from all IP addresses.

... listen_address='*' ... 

Next, we’ll edit the user access in the pg_hba.conf file.

$ sudo vim /etc/postgresql/9.5/main/pg_hba.conf 

Once in the file, we will include this line below which means the PostgreSQL server will allow access to only those who have the username and password to the database.

host    all    all    0.0.0.0/0    md5 

Keep in mind that these configurations may be too open to your preferences. I encourage you to update your database access to more exclusive IPs.

Step 3 – Connect from Navicat

All the hard work is done! Now the easy part. Open up the Navicat application and add a new connection. All you’ll need to do is enter the following information to make a new connection:

  • Host: [The Public IP of your EC2]
  • Port: [The port your PostgreSQL server is accessed thorugh]
  • Initial Database: [The name of the database you want to connect to on the server first]
  • User Name: [The username of the PostgreSQL user that has permissions to access the database]
  • Password: [The password of the PostgreSQL user that has permissions to access the database]

Once all of this information is filled out you should be able to connect no problem!

Final Notes

After you are connected you can begin to utilize the full potential of Navicat by generating relational diagrams, update your database, running backups, and so much more. I used to be a user of phppgadmin and I longed for the days I could seriously upgrade my database admin tool and Navicat was the answer.

Please like, share or comment if you found this article useful!