Thoughts on building components libraries

A few months ago we started using React at Thinkific. One of the challenges of using React is creating reusable components not only from a look and feel perspective but also shareable in different projects.

I didn’t create this concept of elements (or components) library. To be honest, there are podcasts, courses, and examples everywhere about it but how to even start it? When you start creating a project from scratch you face several questions:

  • How to style components? Sass? Stylus? styled-components?
  • How to show the elements?
  • How to build the library? Babel? Webpack?
  • How to publish the library? To NPM or not NPM?
  • How to use integrations and CI in your favour?

Lots of decisions and you may not know all the answers. Startup Life™ doesn’t let you do whatever you want – everything has a cost and a trade-off. Why am I talking all this story? Because I wanted to share my thoughts about it and I created a repository to document what we are doing.
Read more

 

Sick Picks: Podcasts

I am huge fan of podcasts. It is always nice to hear people’s thoughts, struggles, jokes and sick picks. Here is my short list of development-related podcasts.

What are your favourite podcasts? Let me know in the comments :)

 

Useful apps that I use daily – 2017 edition

2 years ago I wrote a post about my tooling and here I am again, 2017 edition. I decided to write again because I keep listening to podcasts with Sick Picks and I also have my Sick Picks :)

Dev tools

Editor: Atom

I have been using Atom for a while. Despite I started testing VS Code in the latest months, I returned to Atom because VS Code doesn’t separate UI theme from syntax theme – you may not care about this, but I am a fan of a light UI and a dark code highlight.

My Atom

Here are the packages that I have installed:
Read more

 

Github webinars

Many of us use Github daily however we usually don’t use all its features. On the latest months, its team released a few webinars about how Github uses Github. More than showing the web interface, they talked about their culture and their workflows. In this post, I’m adding the links to the webinars with a few notes.
Read more

 

Serving raw files directly from Github

We usually create HTML files in our Github repositories, but how to show this data in the browser? RawGit is a solution to serve files with the correct content types.

Example: The WordPress readme.html file can be shown in the following URL:

https://rawgit.com/WordPress/WordPress/master/readme.html

You only need to follow the formula:

https://rawgit.com/USER/REPOSITORY/BRANCH/file.html

The advantage of using RawGit over Github Pages is that RawGit works with all branches, while Github Pages requires a gh-pages branch. Last not the least, the source code of this solution is also available in Github.

 

Excluding folders from indexing in Sublime

Sometimes we work in projects with tons of Javascript dependencies. Folders like node_modules and bower_components are a pain in the neck because every time that we need to find something in the project the content of these folders will be used in the search.

Sublime offers 2 settings to hide these files from the index. First of all, open the User Preferences (Preferences -> Settings – User):

  • binary_file_patterns: This option excludes files from the index but keep them in the sidebar.
  • folder_exclude_patterns: This option excludes files from the index and sidebar. This is why, for example, you don’t see the .git folder in a project.

Read more

 

Replace git author using shell script

This is an old trick that saved me several times. Sometimes people forget to setup their name and email information. The following script is useful to fix mistakes:

#!/bin/sh

git filter-branch -f --env-filter '

an="$GIT_AUTHOR_NAME"
am="$GIT_AUTHOR_EMAIL"
cn="$GIT_COMMITTER_NAME"
cm="$GIT_COMMITTER_EMAIL"

if [ "$GIT_COMMITTER_EMAIL" = "[email protected]" ]
then
  cn="New author name"
  cm="[email protected]"
fi

export GIT_AUTHOR_NAME="$an"
export GIT_AUTHOR_EMAIL="$am"
export GIT_COMMITTER_NAME="$cn"
export GIT_COMMITTER_EMAIL="$cm"
'

echo "Run after"
echo "git push origin +master:master"
 

My Sublime Text settings

Almost 3 years ago I wrote (in Portuguese) a post about my Sublime Text settings. Now, I updated my tips in an English post.

1. Free video course

If you know nothing about Sublime, please watch these free videos from tut+.

2. Package Control

First of all, you should install Package Control to manage plugins. Actually, you can install packages just copying the package files to correct folder, however, Package Control is easier than copy & paste. Open Sublime Text console (View > Show Console or ctrl + `) and paste the following line:
Read more

 

Useful apps that I use daily

I decided write a post describing some tools that I use in my MacBook to enhance my tasks.

Alfred

How awesome is Alfred? It is totally awesome! Alfred is a great tool working as a shortcut to daily tasks. More than that, you can create customized workflows that improve even more your productivity. You must see:

  • Yet another layouter: you can use keyworks like top left, top right to resize and move windows. This is really useful for people who use multiple displays
  • Battery: it is a workflow that shows relevant information about battery, such as charge cycles, health and serial number
  • Alfred Workflows Forum: the community forum where people share their workflows
  • Packal: an unofficial directory of workflows and themes. My currently theme is the Elegant v4, but you can choose your favorite in several options.

Read more

 

Data looks better naked

Data is usually explained in tables or charts, but people sometimes commit mistakes when they add in them redundant or boring elements. A good table or chart is worth a thousand words and the following three gifs show how to improve your presentations. Source

Remove to improve - the pie chart edition
Read more

 

codestacker in Github

codestacker Some years ago, precisely on July/2008 I created codestacker. I know, there were several options to collect snippets, but I decided to code my own solution. More than that I have planned to develop a Textmate bundle and a Mac OS Widget (who cares?), however I did not code these functions.

In the latest days, I migrated all old data to a new app written in Rails 4.2 and hosted on Heroku. The source code is available in Github.