DEV Community: RR Joson

Keep your repository clean by automatically deleting GitHub branches

RR Joson — Tue, 17 Sep 2019 11:10:27 +0000

Have you ever found your GitHub repo having too many branches? Was it because you and your teammates keep forgetting to delete a branch after it gets merged?

You can fix this in 3 easy steps:

On GitHub, navigate to the main page of the repository.
Under your repository name, click "Settings".
Under "Merge button", select or unselect "Automatically delete head branches"

Now, the next time you merge a branch, it will get automatically deleted. Keeping your repository from having too many branches.

Thanks for reading. Did this help you out? If it did, I hope you consider sharing it. You might help someone else out. Thanks so much!

Reference: https://help.github.com/en/articles/managing-the-automatic-deletion-of-branches

How to use GitHub wiki to speed up code reviews

RR Joson — Thu, 12 Sep 2019 07:49:51 +0000

When doing code reviews, you might find yourself having to point out inconsistencies in your team's coding style that a linter can't catch. Things like naming variables, file structure, etc. And sometimes having to do this and having to explain why a coding style is preferred over another can affect the time a PR gets merged.

One of the ways you can address is to create a GitHub wiki. If you have a standard for naming arrays as nameList instead of names, document it there. If your team prefers to import lodash functions like import _get from 'lodash/get;' instead of import get from 'lodash/get';, add it there. But make sure that you have discussed the pros and cons with your team before you put it there.

The result is a faster code review process because of two reasons. First, you can use that wiki as a guide when doing code reviews. Second, when a new developer comes in and a coding style was not followed, you can just refer to the wiki without having to explain why a coding style is preferred over the other.

A better way to add URL params

RR Joson — Tue, 10 Sep 2019 02:00:18 +0000

Let's say you are building a filter component for a search page. To achieve this, you might use template strings to build you url params.

const urlParams = `?checkin=${filter.values.checkin}&checkout=${filter.values.checkout}`;

This might look ok but it can get a bit difficult to read when it gets more values.

An alternative way is to use query-string. It provides a stringify function that allows you to pass an object and it generates the url params for you.

import queryString from 'query-string';

const urlParams = queryString.stringify({ 
   checkin: filter.value.checkin,
   checkout: filter.value.checkout
})

The result is a way of generating your URL params without having to manually add &. It is also easier to read when you have to pass multiple values.

Fastest way to optimize your images for the web

RR Joson — Mon, 02 Sep 2019 01:34:43 +0000

Ever wonder what's the fastest way to optimize your images on the web?

What if you don't have to manually create optimized images for every screen size and screen density? What if you can optimize images on the fly? What if you can provide advanced image formats like WEBP? What if you can just pass a single URL and get a list of optimized image urls back?

If you are using Filestack, then check out filestack-adaptive. It allows you to pass in an unoptimized image URL like this:

https://cdn.filestackcontent.com/5aYkEQJSQCmYShsoCnZN

And get a list of optimized image URLs that you can use in a picture element:

https://cdn.filestackcontent.com/resize=width:180/5aYkEQJSQCmYShsoCnZN 180w, 
https://cdn.filestackcontent.com/resize=width:360/5aYkEQJSQCmYShsoCnZN 360w, 
https://cdn.filestackcontent.com/resize=width:540/5aYkEQJSQCmYShsoCnZN 540w, 
https://cdn.filestackcontent.com/resize=width:720/5aYkEQJSQCmYShsoCnZN 720w, 
https://cdn.filestackcontent.com/resize=width:900/5aYkEQJSQCmYShsoCnZN 900w, 
https://cdn.filestackcontent.com/resize=width:1080/5aYkEQJSQCmYShsoCnZN 1080w, 
https://cdn.filestackcontent.com/resize=width:1296/5aYkEQJSQCmYShsoCnZN 1296w, 
https://cdn.filestackcontent.com/resize=width:1512/5aYkEQJSQCmYShsoCnZN 1512w, 
https://cdn.filestackcontent.com/resize=width:1728/5aYkEQJSQCmYShsoCnZN 1728w, 
https://cdn.filestackcontent.com/resize=width:1944/5aYkEQJSQCmYShsoCnZN 1944w, 
https://cdn.filestackcontent.com/resize=width:2160/5aYkEQJSQCmYShsoCnZN 2160w, 
https://cdn.filestackcontent.com/resize=width:2376/5aYkEQJSQCmYShsoCnZN 2376w, 
https://cdn.filestackcontent.com/resize=width:2592/5aYkEQJSQCmYShsoCnZN 2592w,
https://cdn.filestackcontent.com/resize=width:2808/5aYkEQJSQCmYShsoCnZN 2808w, 
https://cdn.filestackcontent.com/resize=width:3024/5aYkEQJSQCmYShsoCnZN 3024w"

So the next time you find yourself manually optimizing images for the web, check out filestack-adaptive.

Why you should avoid using div when creating custom buttons

RR Joson — Sun, 01 Sep 2019 05:23:01 +0000

Let's say you need to create a signup button with custom styling. You might try to create a div element and add your CSS and add an onClick handler. Instead of using a div element, a good practice is to use a button element instead of a div.

This is because using a button element provides built-in keyboard accessibility. Another reason why you might want to use semantic HTML for your buttons is that it is good for SEO. Search engines give more importance to keywords inside buttons compared to divs.