Category Archives: Technology

Setting up a new NAS – Synology DS220+

For a while now I’ve wanted to have a dedicated backup device instead of worrying about scripts running on my PC to 2 hard drives and cloud backup. It was a ridiculous setup that wasn’t really easy to keep up to date and I didn’t check on nearly enough. The internal drives of my PC are also pretty slow since they are secondary, and I also want to avoid keeping my PC on all the time. Then came Amazon Prime Day!

I finally took advantage of an Amazon Prime day deal and bought a NAS for home. I decided on the Synology DiskStation DS220+ since it was a great price, compact and can house 2 hard drives with a RAID 1 setup which is perfectly fine for my use case. I seriously doubt that both hard drives would fail on me at the same time – unless of course there was some crazy power outage or short. Also, I do a 3-2-1 backup.

A 3-2-1 strategy means having at least three total copies of your data, two of which are local but on different mediums (read: devices), and at least one copy off-site.

backblaze.com

My plan of attack is to do PC/Mac to NAS backup sync, then once a week sync the NAS to an external USB drive. My most important files and photos are in Google’s cloud. Ideally I’d have my second backup in another off-site location completely – but for now at least I’d have 2 different devices.

I decided to do a short Twitch stream setting the NAS up. You can take a look at the VOD below on my YouTube channel. It was great to see you all in chat!

I’ll write another blog post on what software I decided to use to sync, as well as any other plugins I decided to try for this Synology NAS. Thanks for reading!

You can leave a comment or catch me on Twitter!

Particles.js and a Coding Stream!

Recently I made a homepage as a birthday gift for a friend, similar to what I’ve done in the past with some of my favorite tools for building websites:

KilobyteKeith.com homepage
A homepage for KilobyteKeith

I used Particles.js, which is a Javascript library that has fun particle effects for the background of any webpage, Bulma.io for the CSS framework, as well as Press Start 2P for fun retro font styling.

I also finally got the nerve to show off how I put together this project and streamed it on my Twitch channel since I’ve been wanted to code on stream for a long time! My goal is to get really comfortable with being uncomfortable about what I know and don’t know, as well as grow and learn with the community I’m trying to build. A lot of my geeky friends are also web developers, and when I talked about doing this I received a bunch of support which was really wonderful! I’m very luck to find good people to push me along with my goals.

Here’s the VOD if you want to see me nerd out:

Thanks to everyone who tuned in and for the support! You make me want to do more and hit my goals. More projects to come!

Making a Linktree Clone in Angular

I’ve noticed lately that a lot of people on social media are using https://linktr.ee, which is basically the new homepage trend for social media sites that are primarily viewed on mobile. I wanted to start getting familiar with Angular so figured why not start a new project – create my own Linktree clone using Angular with links to all my social accounts that I want to share!

Here’s the first iteration:

Github repo

The next things on my to do list are:

  • web accessibility
  • linking up a CSS framework
  • adding more graphics/a prettier layout
  • properly analytics tracking with UTM codes and Google Analytics

I’ll be documenting my learning process as I go. Do you make any projects in Angular? Have any tips for me?

Reach out to me on Twitter!

Featured on Dev.to’s Twitter

I’m very proud that my post was featured on ThePracticalDev‘s twitter account! I’ve followed this dev community since the very beginning and have loved to see it grow over the years. They have built a great community of developers who inspire me to keep on going.

Trying New Things: Video Editing

Quarantine has been a crazy ride of ups and downs for me these past few months. I accept the fact that I’m human and go through all the feelings that we do. I’m currently on an upswing, feeling good, and the creative part of my brain is bugging me to learn something new.

I’ve decided to finally learn how to video edit with HitFilm Express which is something that’s been on my list for quite some time. I’ve been having a lot of fun, even with the growing pains of learning something new. I’ve scheduled a few videos to go out on YouTube in the next coming weeks, so check them out and feel free to send me any feedback.

I’m doing this for fun, and always want to be trying new things. What’s next? Who knows. I’ll ride this wave until the next one comes along. ๐Ÿ˜Š

What have you been working on? Hit me up on Twitter or leave a comment below!

Resource: How Can I Learn to Code?

Recently I’ve been asked a couple of times where someone can learn how to code. It all depends on what you’d like to do!

For me, I had a tech background so was interested in the full stack. From front endโ€“design, UI, how the website looks and feels, as well as the backendโ€“how the website functions and all of the technical bits that you don’t “see”, but make everything work. If you’re a beginner and you have a computer with internet access, you can start right away with tons of free software and resources. (There is also iOS/Android mobile dev, game development, etc that I will recommend in another post.)

Here’s my list for anyone interested in web development:

freeCodeCamp

FreeCodeCamp aims to teach code for free and help nonprofits. No software is needed, just your computer, internet and a web browser.

Dash by General Assembly

Dash is another free online course that will teach you basics with HTML5 and CSS and was created by General Assembly bootcamp.

Code Academy

Code Academy has some free courses available for HTML, CSS and more advanced frameworks in Javascript such as React, and other languages such as Ruby with Ruby on Rails.

Code.org

Code.org has tons of tutorials for kids K-12 and beyond! You can do a one-hour tutorial or keep learning up to computer science fundamentals. There is really no age range that is too early or too late so give it a go!

Khan Academy

Khan Academy is another nonprofit that wishes to provide a free education to everyone and have a good selection of how to learn how to program.

LeetCode

LeetCode is a free online site that is made to enhance your skills, expand your knowledge and prepare for technical interviews. I haven’t given this a try yet, but everyone in the online communities I’m a part of have recommended LeetCode to prep for interviews.

Hopefully you find these websites useful resources to start your own coding journey! As I find more sites of free resources I’ll add them here. Make sure you keep an eye out for more posts as I hope to add resources as I find them. ๐ŸŽ‰

Gatsby with Netlify CMS

I’ve seen a few developers on Twitch create their own blog or CMS for their portfolio as as a part of the portfolio itself. For my professional site, I’ve decided that since I wanted to play around with React, yet still have a professional blog with information on what I’m learning about, using Gatsby would be great to achieve the same goal.

I love Netlify for hosting websites since it’s easy to set up and comes with custom domain support, https, git integration and continuous deployment –all on the free starter tier! I’ve also learned that I can get the best of both Gatsby and Netlify worlds by following their easy to use tutorial on GatsbyJS.org. If you wanted to have a go, give it a try as well and let me know how it works for you!

Liz Rodriguez web developer
My professional site

This allows you to log into your Gatsby blog with Github authentication and add new posts rather than edit markdown files and push to the project. It’s pretty convenient!

Happy coding ๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป

My Mac Terminal Setup

I wanted to show the terminal setup I use for my dev environment. I have the same setup whether I’m on Mac or linux (Ubuntu) – but below is the setup I like to use on my Macbook Pro.

iTerm2

Instead of using the default terminal that’s built into MacOS, I love to use iTerm2. This is because iTerm2 allows for tons of customized configurability as well as my fave feature – split panes. It comes in hand when you need to run a few processes or log into various systems at the same time, without needing to open multiple windows and dock them a particular way. (For Linux I recommend Tilix!)

You can download iTerm2 directly from their website and drag to your Applications folder.

Oh-My-Zsh

Starting with MacOS 10.15, the default shell is zsh, whereas before it was bash. (If you’re on an early version of MacOS, you can use homebrew to install it quickly with the command brew install zsh.)

I like zsh because it allows for customizability. For even more features I love using Oh-My-Zsh, a popular plugin framework that’s community-driven and includes 200+ optional plugins and over 100 themes.

Install with the command

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

You’ll then be prompted to install the command line tools for MacOS:

install command line dev tools

After installing the command line dev tools, rerun the command to install Oh-My-Zsh.

Customize All the Things!

If you want to customize your theme like I usually do, you’ll need to edit your .zshrc config file located in your home directory:

My favorite theme currently is “SMT”, but you can change to whichever one your like from the Oh-My-Zsh site.

In the .zshrc config file, change the line:

ZSH_THEME="robbyrussell"
to
ZSH_THEME="smt" or whatever theme name you choose.

Close the terminal then open it back up to see new theme.

To customize my theme even more, I usually change the character “็ฆ” to an emoji that I prefer (๐ŸŒŸor โ˜•๏ธetc). Open up your them config file in your favorite text editor:

open ~/.oh-my-zsh/themes/smt.zsh-theme

Then I search for the “็ฆ” character and add my emoji or text:

edit your prompt…or not

Close the terminal then open back up to see the new line:

As a last step, I change my terminal colors like I change my mood. My latest fave terminal theme is Dracula. It’s available for nearly every software and terminal around!

Download the one for iTerm and follow instructions. Behold the beauty before your eyes!

beautiful terminal

That’s basically it! There are tons of things you can customize but this is the setup that I’ve used for a while now. I hope you’ve enjoy this post and let me know how you customize your terminal – hit me up on Twitter!

First Hacktoberfest Complete! ๐ŸŽ‰

Hacktoberfest 2019 Liz Rodriguez

This year I had a goal to finally complete Hacktoberfest, which is an online hackathon where you contribute to open source projects.

In the beginning of October, I reached out to my various discord coding communities for some project contribution ideas and was able to complete 4 small pull requests! The simple projects I did were:

  • Added an accessibility category (first PR) and extra app links (second PR) to a couple of sections on webgems.io
  • Added a haiku
  • Added a pixel to Twilio’s open pixel art project

What I’ve learned from this experience is that it’s not about how big a contribution I made to a project, but what I learned in doing so.

I made an error with my very first pull request on the Twilio project, where I swapped the branch to do the PR – then fixed it. I also learned that I needed to make a dev branch and then do the PR on the dev branch so that the maintainer of the project can merge to master as they choose.

I found instructions on how to do the pull requests via Github of course.

Then later found out how to *update* the fork I have to complete the PR later on – Thank you Christina Solana:

  1. Clone your fork:
    git clone git@github.com:YOUR-USERNAME/YOUR-FORKED-REPO.git
  2. Add remote from original repository in your forked repository:
    cd into/cloned/fork-repo
    git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
    git fetch upstream
  3. Updating your fork from original repo to keep up with their changes:
    git pull upstream master

Ever since the web 2.0 days, I was a supporter of open source software and now that I’m coding more, I want to write my own project to share with the world and contribute more to open source projects. Stay tuned to see what I think up! I also want to do more hackathons; both online and in person. I completed a couple of them last year which were a lot of fun!

Happy coding! ๐Ÿ‘ฉโ€๐Ÿ’ป

Kicking It Old School – IRC with Irssi

Lately I’ve been on this kick of going back to the days before social media. Partly because of my break from live streaming, discord and Instagram, and partly because I still like the old school way of doing things sometimes – the early 2000’s were my peak IRC chat/linux days, so it left me feeling nostalgic.

I remember using one of my fave terminal clients called Irssi. It’s basically an IRC chat client that you can run in any terminal on any OS. It’s wonderful. And simple. And once installed, always available and lightweight.

Here are instructions to save your Irssi preferences. Download the client for your current OS then do the following:

To add your IRC server of choice (this example uses Freenode) to the Irssi config and run automatically:

/server add -auto -network Freenode irc.freenode.net 6667

To add your nick to Freenode and automatically use that nick whenever connecting to the network:

/network add -nick <your-nick> Freenode

This will make you join your channel of choice on Freenode every time Irssi is opened:

/channel add -auto #channel Freenode

Assuming you have your nick registered, you can do this to identify automatically:

/network add -autosendcmd "/msg nickserv identify <your-password> ;wait 2000" Freenode

Now enjoy chatting to your fave communities that are still kicking it old school. You can also find a bunch of nifty themes online. If you happen to be on Freenode, find me at BinaryDigits ๐Ÿ‘‹