DEV Community: Sal Hernandez

I learned React Fragments

Sal Hernandez — Mon, 26 Feb 2018 12:36:34 +0000

I bet you read that title & thought “Whoa that sentence is a Fragment!” 😜 Haha what the title should say is “I learned about React Fragments”. Anyways I know what you’re asking “What are React Fragments?!?” They are a common pattern for a component to return a list of children.

Note: React 16 added support for returning an array of elements from a component’s render method & as of React 16.2 provides a first-class Fragment component that can be used in place of arrays.)

I just learned about them (I know I’m a little late to the game) & ran into a good use case where it came in handy!

So I’m setting up my routes & want to make certain routes are available only when a User is Logged & vice-versa.

So I come up with something like & this works perfectly but this brings up a small issue. When running the above setup if you open up your browser console you will notice the error below.

The reason React is throwing this error is because the Switch component only expects Route components children. 🤔 Hmmmm so lets try this. Let’s wrap each Route in it’s own conditional & see if this fixes our error.

Andddd yup it fixes our error! Hmm but this doesn’t seem like the best solution because it isn’t DRY & contains code smells. If we go with this solution we’ll have to include the isLoggedIn conditional for every single new Route. Also our code will be computing the same condition for x amount of routes that we have(This is a code smell 😷). So what can we do? I really like our first example because it was DRY & it didn’t contain a code smell but wrapping our routes in a div gives us an ugly looking error. I know what your saying to yourself, “I wish there was a way you can wrap stuff in React magically!”.

React Fragment to the Rescue!!! We can now keep what we had in our first example & just replace the div with Fragment (imported from ‘react’).

See note below on why we’re importing a custom Switch component.

See a live example here: https://codesandbox.io/s/7k9rn30jmq?module=%2Fsrc%2Fconfig%2Froutes.js&view=editor

Yay No more errors! That about WRAPS up this post! 😉

For more puns and code tips follow my journey on twitter @clickclickonsal

This article originally published on my Medium publication

Edit (February 27th, 2018)
Note: @leandroaps ran into a issue where his route was always getting rendered. It turns out React-Router’s Component doesn’t have support for routes wrapped in Fragments. While the code “seems” to work fine it breaks when trying to add a “catch all” route. I looked into this and found a Github related issue & came across a workaround for this problem here. The workaround is to wrap the react-router Switch component that includes logic to flatten the routes out. I’ve updated the code sandbox above to include this fix so you can see how it’s implemented. Thanks @bripkens for the your Open Source contributions! 😃

Git Hooks aren't so Ruff! I'll tail you all about it!

Sal Hernandez — Wed, 11 Oct 2017 17:49:52 +0000

Yo dog! I’m going to tail you how to use git hooks (with yarn/npm) to help maintain code quality across your team before stuff gets pushed to a remote repository (ex. Github).

If you aren’t familiar with Git Hooks, they’re a way to execute scripts before committing, after committing, before pushing, after pushing, etc. In the past when I looked into this, it was kind of a pain to set up locally, and then even more of a pain setting it up across a team. ðŸ˜£

I came across a library on GitHub called husky, that makes it super easy to implement Git Hooks in your project using npm!Â

Heres’s a super quick walkthrough of husky.
yarn add husky --dev or npm install husky --save-dev
In your package.jsonÂ add husky hooks in the scripts object.

{
  "name": "husky-demo",
  "version": "1.0.0",
  "description": "Husky demo, woof woof.",
  "main": "index.js",
  "scripts": {
    "precommit": "yarn lint",
    "prepush": "yarn test",
    "test": "jest",
    "lint": "eslint . --cache",
  },
  "author": "ðŸ¶",
  "license": "ISC"
}

precommit

With this hook, whenever I commit (ex. git commit -m “woof, woof"), the script precommit will be executed before git commit runs. In this scenario, we have eslint run, so if any linting errors occur then git commit will not run and those errors would need to be addressed before trying to commit again.

prepush

With this hook, whenever I attempt to push new commits (ex. git push origin master) to Github, the script prepush will be executed before git push runs. In this scenario, we have the script run our test suite, so if any tests fail, it would prevent the code that broke the tests from making it's way up to Github.

Summary

======
Doing things like this is really cool because it can prevent stuff like linting errors &/or broken tests from getting to master if you're like me who's working on a project by yourself ðŸ˜›, but this is also beneficial when working in a pull request flow because it helps really focus on reviewing the actual code & not having to go back & forth on things that the linting tool could have caught.

I've always wanted to do stuff like this in previous projects but never did because it wasn't a quick simple thing to do, but then if I did set it up, would it still work consistently across the team regardless of their operating system? ðŸ¤” Then when I stumbled across husky & saw how simple it was to implement into my npm project I was hooked! I've been using it for a couple weeks now & it's saved me a bunch of times already! Including almost accidentally pushing broken tests to master! ðŸ˜…

Special thanks to typicode for creating this awesome open source tool! Thanks dog!ðŸ˜‰

These are a few of my favorite: Terminal Shortcuts

Sal Hernandez — Fri, 28 Jul 2017 18:44:36 +0000

Terminal: an interface where the user types and executes text based commands.

I’ll admit that when I first opened the terminal in 2014, I disliked it. At the time, I strongly believed that using a Graphical User Interface, such as Finder on Mac, was much faster for things like deleting, copying, and creating files and folders. The tutorials and articles I would read kept insisting that the terminal was ðŸ”‘, though, so I kept going.
I’m glad I pushed through and kept learning to use the terminal! Eventually, with practice and consistency, the understanding and speed came. Now I barely use the GUI for managing my file system.
That said, the road wasn’t all smooth. There were a lot of terminal commands thrown at me during my journey. How was I supposed to memorize all of them??!!? At once?!?!

To prevent you from going through the same anxieties. I compiled a list of my Top Fave â¤ï¸ Terminal shortcuts. ðŸ˜

ls List files and directories (Folders)

cd Change directory
pwd Print Working Directory (Shows the full pathname of the current working directory)

touch Create a new file

mkdir Create a new directory

cp Copy files or directories

mv Move (rename) files or directories

rm Remove files
rm -r Remove Directories & files in
Note: Therm command is really powerful. It deletes files/directories without recovery. (It doesn’t go to the trash bin)

Ctrl + A Gets the cursor at the beginning of the line
Ctrl + E Gets the cursor to the end.

Cmd + k (Mac) `Ctrl + L (Linux/Mac) Clears the Terminal Screen

And now for my absolute favorite â¤ï¸: Tab auto-completion!

If you’re trying to remember a command, type at least one letter and hit tab twice and it will show you all the commands available based on the typed characters. If you type enough characters and only one match is left then it’ll auto-complete it for you. This works with all UNIX commands and even your file system.

Now go on and jump into your terminal, start playing with it & work your way towards becoming the terminal-ator. ðŸ˜Ž

If you liked this post, make sure to hit the hit the green heart! ðŸ’š
For more puns and code tips follow my journey on twitter @clickclickonsal
Join the Color Coded slack community by visiting our site and stay in the loop.

This article originally published on the Color Coded Medium publication

Am I still a Junior Developer?

Sal Hernandez — Sun, 26 Feb 2017 22:06:03 +0000

I started to learn how to code in August 2014 at General Assembly. After finishing the 3 month Web Development Immersive course there I was able to claim the title “Junior Full Stack Developer”. I landed my first job as a Junior Full Stack Developer at Skyline Technology Solutions in February 2015.
A couple of weeks ago I started asking my self “Am I still a Junior Developer?”, because It's been 2.5 years now that I've been coding and 2 years of coding professionally. How do I know when I leveled up? Am I going to be a Junior Developer forever???

So I started to reflect back to when I started and where I am today and I remember not fully understanding callbacks, this, and prototypes in JavaScript. Not knowing why I would need to use JavaScript's .call() or .apply() methods. Or what were tools such as requireJS, webpack, grunt, or gulp actually doing for me. I can't recall when, but I remember everything was starting to click and I finally understood this (Pun Intended)!

Before I answer the question in the title of this post, I'll list out some bullet points on what I think determines the difference between a Junior & Mid-Level Developer.

Junior

Understands basic programming concepts
Will produce code without keeping performance or maintainability in mind sometimes
Can use libraries & frameworks but will not always understand what the tools are actually doing for them and/or how's it doing them.
Might copy & paste code from the web (such as Stack Overflow) without understand it, if it just works
Will need occasional mentorship
Sometimes won't ask for help when stuck because of fear thinking you're not good enough (You are good! It's ok to ask for help ðŸ˜Š)

Mid-Level

Understands one or more languages more deeply
Will produce code with thinking about performance & maintainability
Understands what the tools are doing for them, digs into the source code often to understand how it works & also finds undocumented usage of tools.
Will understand code found on the Web before even thinking about copying & pasting code.
Will ask for help when they know they're stuck (because asking for help is ok!)

The above bullet points are just high level bullet points I gathered with the help of the internet & talking to my co-workers. So I am proud & confident to say that I am now a Mid-Level Developer ðŸ¤“!

WAIT! Can I seriously just answer this question myself and change my title on my own? You actually can because there is no piece of paper you need to claim any title in this field. In my opinion what you should do before changing your title is discuss this question with the people you work with or even the people you interact with in the tech community.

I'll definitely write a blog post when I feel I've reached Senior Level! :-)

This article originally published on my Medium publication