Forem: Cole Walker

Conventional Commits, the Future of Git

Cole Walker — Fri, 04 Sep 2020 00:03:34 +0000

Conventional commits are something which have revolutionized the way that I work, and made me re-think how I go about my git workflow.

What?

Put simply, conventional commits is a standard for writing commit messages. Just like we have conventions for naming variables, or numbering release versions, there is a convention for writing commit messages.

Put even simpler, conventional commits tell you how to write your commit messages.

They're easier to write

There are many benefits to adopting conventional commits. But the first thing that an adopter notices is that they simplify the process of writing a commit. All developers are aware how difficult it can be to name things, and writing descriptive yet succinct commits can be even more difficult. By providing a format to follow, conventional commits take away a lot of the thinking work that is required when writing a commit message, and point us in a good direction.

They're easier to read

Secondly, they make it easier to read the history of a repository, for both humans and computers. The beauty of the convention is that it was designed for maintainers to easily be able to gloss over commits and get the gist of what each has done to the repository. When gitmojis are added into the fray, it makes it even easier.

Okay, so what are gitmojis?

Gitmojis are a convention (yes, another one) for attributing meaning to emojis in the context of development.

For example:

🎨 = "Improve structure / format of the code."
⚡️ = "Improve performance."
✨ = "Introduce new features."

These emojis make it even easier to see what changes a commit made, because they're bright and instantly pop out to the reader. Even someone unfamiliar with the format can understand the general idea because of how humans associate meanings with images.

Tools can parse it

Conventions make it easy for automated tools to process commits. Tools exist to lint commits, help to write them, or even automate changelogs and versioning.

I'm sold, what's the convention?

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

This is a basic representation of the convention, written in Extended Backus–Naur Form. Further rules and explanations can be found on the conventional commits website.

Type

The type of commit describes the type of work that occurs. You can think of this as being similar to the labels that are added to issues or stories.

The convention defines feat for features, and fix for bugfixes, but others can be added if necessary. For example, commitlint adds several more:

ci
chore
docs
feat
fix
perf
refactor
revert
style
test

Scope (optional)

Scope represents the area that you're performing the work on, and thus entirely depends on the project that is being worked on. Scope is usually surrounded by ( ). If a breaking change occurs, sometimes an ! is placed at the end of the scope to denote so.

For example, a web-application might have:

(database)
(dependencies)
(styling)

Description

This is where the description of the commit goes. It is a brief statement describing the work that was done. Any gitmojis related to the changes should go at the beginning of this.

Body (optional)

This is where a longer description would go if necessary. If breaking changes were introduced with this commit, they must be explained either here or footer, in the format:
BREAKING CHANGE change description

Footer (optional)

Footers are entirely dependant on the project once again, but they must follow a specific format, "each footer MUST consist of a word token, followed by either a :<space> or <space># separator, followed by a string value." (From the conventional commits website)

Examples

(courtesy of the conventional commits website)

feat: ✨ allow provided config object to extend other configs

BREAKING CHANGE: `extends` key in config file is now used for extending other config files

refactor!: 💥 drop support for Node 6

BREAKING CHANGE: refactor to use JavaScript features not available in Node 6.

fix: ✏️ correct minor typos in code

see the issue for details

on typos fixed.

Reviewed-by: Z
Refs #133

Conclusion

Conventional commits are good and you should try them.

Filtering Null Values out of TypeScript Arrays

Cole Walker — Sat, 29 Aug 2020 13:02:12 +0000

Filtering Null Values out of TypeScript Arrays

Something that stumped me the first time I encountered it in TypeScript was dealing with nullable types in arrays. When dealing with arrays, we often do not want to keep the null values in, or we want to perform a map operation and get yelled at by the compiler about missing properties. I learned a little snippet to deal with this, which I will explain step by step.

First, let's establish the scenario.

interface DoesntMatter{
  meaningless: (string|null)[]
}

Here we have an interface DoesntMatter with a property 'meaningless', which is an array containing either strings or null values.

Assume that we have an instance of DoesntMatter in our code, and we need to concatenate the strings of the array into one mega-string. Unfortunately, we can't do that without getting rid of all of the nulls first.

instanceOfDoesntMatter.meaningless.filter((val: val is string) => !!val)

The above snippet uses a really cool feature, called a type guard. The type guard will check to make sure val is a string, and if it is, it'll run the function. If it isn't, it won't run the function. Since we only need to filter out nulls, we know that the function will only run if the value is a string already, so we can return true if val, which is what the !! is doing.

The result of this filter is an array which contains nothing but string values.

Type guards are a very powerful feature, and this is only one small use case of the nearly endless possibilities with them.

4 Awesome Array Methods in JavaScript

Cole Walker — Mon, 17 Aug 2020 11:41:09 +0000

Arrays are one of the most commonly used data structures in JavaScript, and they have a lot of awesome methods that make development a bit easier for us. Here are a few of my favorite array methods.

Set

While not technically an array method, I often use this data structure to filter out duplicates from arrays storing primitive types. A Set is a data structure which stores unique values, making it a simple way of eliminating duplicates in arrays.

const arr = [1,2,2,3,3,3]
const filteredArr = [...new Set(arr)]   // [1,2,3]

Filter

When you have more complex data structures stored in your arrays, and need to remove duplicates or only some of the items, filter is the way to go. Filter allows you to return a new array containing any elements which pass a test of your choice.

const arr = [1,2,2,3,3,3]
const filteredArr = arr.filter((value, index, self) => {
    return self.indexOf(value)===index)
}

The above snippet passes each item of the array into the filter function, which will check to see if it is the first occurrence of its value. If it isn't, then that means it's a duplicate, and it will be removed.

Some

Array.some is a neat method which returns true if any element of an array matches a condition. I often use this method in conjunction with filter to filter my arrays with more complex logic.

/* I use the arrow function implicit return syntax here 
to make the code easier to read. 
If you aren't familiar with the syntax, 
the arrow function returns the value of the statement 
following it.
*/
const arr = [1,2,3,4,5]
const contains1 = arr.some((value) => value===1) // true
const contains6 = arr.some((value) => value===6) // false

All

Array.all is exactly what you think it is. It returns true only if every element in an array matches a condition. While I don't use this function as frequently as the others on this list, it is great to have in my back pocket.

const all1 = [1,1,1]
const arr = [1,1,2]
const all1Only1 = all1.all((value) => value===1) //true
const arrOnly1 = arr.all((value) => value===1) //false

What is the first thing that you do with a new tool or language?

Cole Walker — Thu, 16 Jul 2020 13:40:59 +0000

I often skip past "hello world", since it doesn't give you a good understanding of what a language looks or feels like. Usually, I try to dive into a project, often a smaller-scaled version of the idea that inspired me to try out the framework or language itself. For example, when I was diving into Go, I wrote a small application to grab data from the Goodreads API and parse it to my console, since I wanted to use Go for CLI or back-end applications.

Does anyone else skip "hello world"?

Beginner’s CommonLISP: Everything You’ll Need to Know for a Simple Application

Cole Walker — Thu, 02 Jul 2020 15:39:31 +0000

In the first article in this series, I discussed the basics of CommonLISP, including the installation of the runtime, mathematical operations, and variables. In this article, I will be detailing more operations which one will encounter while building applications in CommonLISP, such as standard output, conditional statements, lists, functions, and macros.

Standard Output

Standard output can be achieved by calling the print function on the desired output. However, the output will include quotation marks for strings. String values can be printed without quotation marks by calling the write or write-line functions on them instead. write-line will insert a new-line after the output whereas write will not.

Examples:

Code -> Output

(print “Hello World”) ->  “Hello World”

(print (+ 22 22)) -> 44

Conditional Statements

The if statement is the way that LISP handles conditional statements.

It takes 3 arguments, the first is the condition, the second is what is to be returned from the function if it evaluates to be true, and the third is what is to be returned from the function if it isn’t true.

Note: all values outside of nil are considered to be true.

Example:

(if (>5 1)

    (print “5 is greater than 1”)

    (print “Something is wrong”)
)

This code will always print "5 is greater than 1", and will never print "Something is wrong".

The progn Function

By default, if statements only allow one line of code for each condition. This becomes a problem if the programmer needs to include side effects in addition to the return statement. The solution to this issue is the progn function. The progn function takes an undetermined amount of arguments, referred to as the “body”, and the last argument will be the return statement of the function.

Progn works similar to how curly brackets work in C based languages.

Example:

(if (> 5 1)

    (progn

        (print “everything is right”)

        (+ 5 1)

    )

    (progn

        (print “something is wrong”)

        (- 5 1)

    )
)

This program will check to make sure that 5 >1.

If it is, it will print “everything is right” and then return 5+1.

If it isn’t, it will print “something is wrong”, and then return 5-1.

Lists

One of the unique features of LISP is how easy it is to create linked lists. A list is created by using what is called the symbol operator on a list of items surrounded by paren and separated by spaces. The items can be of any data type.

Example = Linked List

‘(1 2 3 4) = 1 -> 2 -> 3 -> 4

‘(“Hello” 2 “Friend, I am Cole” 3) = “Hello” -> 2 -> “Friend, I am Cole” -> 3

‘(2 3 4 5.5) = 2 -> 3 -> 4 -> 5.5

Car and Cdr

Some of the most common functions used for operating on lists in LISP are car and cdr. Car returns the first element of a list. Cdr returns every following element.

Example -> Returns

(car ‘(1 2 3 4)) -> 1

(cdr ‘(1 2 3 4)) -> (2 3 4)

(cdr (cdr ‘(1 2 3 4))) ->  (3 4)

(car (cdr ‘(1 2 3 4))) -> 2

Loops

The simplest form of a loop is with the loop keyword. It takes a set of statements as its arguments, and will repeat them until it encounters a return statement.

Example

(defvar a)

(setf a 0)  

(loop

(setf a (+ a 1))

(write a)

(when (> a 4) (return a))

This example declares the variable "a", sets it to 0, then each loop, it will add 1 to a, and print it with the write command. When a > 4, it will exit the loop and return a.

Defining Functions

Functions in CommonLISP are defined by the defun operator.
The syntax is

(defun <function name> (<parameter list separated by spaces>)
     (<function body, last value is the return value>)
)

Calling the function is the same as any of the above operators.

For example, here is a function which will return the square of the parameter “toBeSquared”.

(defun squareNum (toBeSquared)

(* toBeSquared toBeSquared))

Example -> Return Value
(squareNum 3) -> 9

(squareNum (squareNum 2)) -> 16

Anonymous Functions

CommonLISP provides a way to create anonymous functions, which will only be run once, when they are encountered. They will not be given a name nor will they be stored for later use. The syntax is identical to defun, but with the defun keyword swapped out for lambda.

Example

(+ 2 ((lambda (a) (+ a a) 2))

Returns
6

Macros

Macros are what make LISP such a uniquely powerful language. A macro is a function whose body is interpreted as input for the program before being interpreted as a program. It allows developers to programmatically change the program which is to be run. Macros are the reason as to why LISP is such a powerful tool in AI, they allow the computer to remember past decisions and modify its own code.

In other words, LISP adds a step before compilation, called “macro-expansion”. The macro-expansion step compiles the macro into lisp code before executing the rest of the program.

Macros are defined using the defmacro command.

The syntax is <defmacro> <name> (parameters) <body-form>

Macros are complex, so I will give a simple example.

(defmacro eight () (+ 3 5))

(+ eight 8) -> will return 16.

Whenever the above macro (eight) is called, it will be treated as the number 8, since it is going to be compiled and evaluated before running elsewhere.

Do you chat with other developers often? What are your favorite communities to do so?

Cole Walker — Thu, 09 Apr 2020 14:15:28 +0000

What I've Learned from Streaming Myself Coding

Cole Walker — Thu, 09 Apr 2020 14:13:52 +0000

For the past few weeks, I've coded every night on twitch for at least a few hours. It has been a lot of fun, and I've learned a lot about streaming, and branding myself in general.

Viewers are mostly there to hang out, don't sweat your coding skills

The first stream that I did was a completely blind building of an Angular app. I had no prior Angular experience, and I was looking at the documentation for every other line of code, and getting stuck on bugs for minutes at a time. Despite this, people watched, and chatted, and were super nice about it!

As it turns out, nobody expects you to be a perfect programmer 100% of the time. As long as you're actually putting a bit of effort in, that should be enough.

What you're building doesn't matter

When I first started this experiment, I made sure to describe exactly what I was building in the title of my streams. This resulted in a few people coming who saw that I was doing React Native programming, or Angular, but when I changed the titles of my streams to be something more generic, like "javascript stream, ask me anything", I noticed much higher engagement.

Additionally, I thought having a really exciting app would be what brought people into the streams. I wanted to make sure my viewers were as excited about the app as I was, so I picked ideas that seemed to be a bit more interesting, like a Movie Database app or a workout tracker. However, looking at the more popular streams in the programming sphere of twitch shows that the projects really don't matter. Some people build robots, others build websites for freelance clients, others are building finance programs, and their view counts are all pretty high. People respond more to a good personality than what that person is building, so build whatever you want to or are able to.

Be Nice

Believe it or not, people like it when people are nice to them. This is a little known fact about life in general, but with streaming it goes double. In fact, being nice will get you way more engagement than being funny. I don't think I'm very funny on stream at all, and I still have a few viewers each stream that I do, just because I'm nice.

So, don't feel like you need to be funny all the time, or super interesting, as long as you're nice, you're doing a great job of being a streamer.

Streaming is a great motivator

Lately I've been struggling with finding the motivation to code. A certain global event has completely torn my normal routine apart, and I was left with a bunch of bad habits and a lack of willingness to do anything. I decided that with all my extra time at home, I'd try to stream to at least do something somewhat productive with my time.

What I found that not only did streaming make me feel like I was converting otherwise unproductive time (gaming) into something slightly more productive, it actually encouraged me to code A LOT, and learn a ton about tools available and the ones that I already use to make the stream as good as it can for my viewers.

Streaming made me go from "I don't want to code" to, "Boy, I can't wait to code for 4 hours on stream tonight". I'm getting more work done on side projects than I ever have before.

Make a schedule

Making a schedule is in my opinion, what separates a good streamer from a great one. As a viewer, nothing is better than being able to plan to watch a streamer at a certain point of the day. I know that I have a few people who I go out of my way to watch at their scheduled times, I've even woken up early to watch streams before. Giving yourself a schedule, even if it's rough, will get you viewers who return each day, and that's important for building a community.

Conclusion

Streaming is a ton of fun. If you have the means to, I'd recommend giving it a shot, you might just find a new hobby for yourself!

Also, I'd be remiss if I didn't plug my stream in this article, I hope that you give me a watch sometime, I do a lot of JavaScript streaming, either mid-morning (11AM EST), or more often, at night (7PM EST).

https://www.twitch.tv/supcole

Setting up a CommonLISP Environment and an Introduction to the Language

Cole Walker — Tue, 31 Mar 2020 21:11:08 +0000

Introduction

In the mid 1900’s, the second high-level programming language was created by John McCarthy. It was called List Processor, or LISP for short. LISP itself is a relatively simple language, so it has been modified and added to over time. Modified versions of the language are referred to as “dialects”, and today the most well-known dialects are Clojure, Scheme, and CommonLISP.

LISP is a language which has been frequently used for AI due to its simple syntax, fast debugging process, and the inclusion of macros, which are a way to modify the program’s code as it is running.

This tutorial will be about learning CommonLISP specifically, though its syntax and concepts should be similar enough to other dialects that once one is learned, learning other forms of LISP should prove to be trivial.

Installation

To be able to execute CommonLISP code, we need to have an interpreter or compiler. The most popular option for LISP writers is the emacs text editor and SLIME extension, but that particular combination is daunting to newcomers of the language, since they may have to learn an unfamiliar text editor in addition to a very unique programming language.

For that reason, I recommend that newcomers install the Steel Bank Common LISP compiler, which is available on all major operating systems. To install this compiler, first go to the Steel Bank Common LISP website, and then go to the download section. On this page you will see a table with different architecture and operating systems.

On this table, select the square that best represents your computer’s architecture and operating system, and click the link to download the installer file.

The installer should take care of all of the configuration necessary to install the compiler on your computer, including adding the compiler to your operating system’s PATH.

Note: on Linux, installation is much simpler, by default, many distros include a repository which includes the compiler.

To install, enter the following command:

sudo apt-get install sbcl

LISP is an interpreted language, so running quick snippets of code is simple. To do so, type sbcl into the command prompt to open the SBCL REPL (read eval print loop). It will run subsequent commands as LISP code, and print the evaluated values.

Executing Code from a File in SBCL

CommonLISP code is saved with the .lisp extension. It can be run from the command line by using the following command:

sbcl --script <filepath>

Example:

sbcl --script helloworld.lisp

will run the file helloworld.lisp in the working directory

Basic Operations

LISP functions are called with what is called “prefix notation”. The operator goes first, then the operands follow.

Addition

The addition operator is the same as it is in most languages, +. It accepts any amount of numbers. The operator comes first because of prefix notation, and then the arguments follow.

Examples:

(+ 4 10)         returns 14

(+ 12 22 40)     returns 74

(+ 100 200.50)   returns 300.5

Subtraction

Subtraction works similarly, with the - symbol. numbers are subtracted left to right.

Examples:

(- 22 7)    returns 15

(- 7 22)    returns -15

(- 7 22 5)  returns -20

(- 22 0.5)  returns 21.5

(- 22 1.0)  returns 21

Multiplication

The multiplication operator uses the familiar *symbol.

Examples:

(* 5 4)     returns 20

(* 5 5 5)   returns 125

(* 2 0.25)  returns 0.5

(* 2 -2.5)  returns -5

Division

The division operator uses the / symbol. CommonLISP is unique in that dividing integers does not return a decimal, but a simplified fraction representing the arguments given. However, dividing floating point numbers will always result in a floating point number.

Examples:

(/ 4 2)    returns 2

(/ 4 10)   returns ⅖ 

(/ 4 -2)    returns -2

(/ 4.2 1.1)  returns 3.818181818181818

(/ 4.2 1)  returns 4.2

Variables

setq is how LISP sets variables. Syntax is

setq <variable name> <form> [<variable 2 name> <form 2>]....

Types are dynamic and implicit.

Example Variable / Value

(setq apple (+ 12 23))      apple / 35

(setq bonsai 12)            bonsai / 12

(setq name “Cole”)          name / “Cole”

Conclusion

After reading this tutorial, you should have a very basic understanding of CommonLISP, and have it installed on your computer. In the next tutorial, we'll look at control structures, lists, and more!

Working from Home Tip: Don't be Afraid of Analog

Cole Walker — Mon, 16 Mar 2020 15:22:00 +0000

Early on in my days as a programmer, I believed that technology and screens were the future. I thought that by default, an app would be better and more efficient than using its analog alternative. I opted for apps over calculators, apps over traditional to-do lists, and using a laptop for ALL of my notes, even when it was suboptimal.

I was thinking about it the wrong way. I now believe that we should search for analog methods first, and switch to technological solutions only when we realize that the analog solutions do not fit our needs.

My number one increase in productivity came from replacing my to-do list applications with a physical planner. I found that there was nothing more addictive to me than that feeling of crossing off an item. I wasn't getting that with my to-do list applications, and that was what made me re-think my position on analog.

Having a calculator at my desk allows me to make those quick computations much quicker than searching for my calculator app and typing in the numbers and symbols there.

Having a scratchpad for flowcharts and psuedo-code is infinitely more convenient and quicker than any kind of technological solution for doing so.

Additionally, most of our waking hours are spent staring at screens, which is proven to have consequences on our health, and personally makes me feel more irritable. I urge you to take advantage of whatever brief recess from screens you can, it'll make you more productive, and potentially feel better.

Tips for finding your first internship

Cole Walker — Sun, 08 Mar 2020 17:28:52 +0000

I have been in the software industry for almost a year now, and when I was first searching for jobs, I was overwhelmed and wished that someone who was relatable to me would share their tips and tricks for getting the first role.

I think it's important that you understand my background at the time, so that you can see what I had to work with.

I was:

Working 2 jobs, both retail
A junior in college, working on a CS degree
A good student
Not creative... didn't have much to put on a portfolio
Good at web development

I needed a job which was part-time and would bring me into the industry. I thought that would be impossible to find, but I was surprised at how many there were. Here are my tips for finding your internship.

Get help with your resume

Before I visited the career center at my school, I was convinced that my resume was fantastic. I googled for hours trying to find tips and tricks for making it better. For this reason, I didn't think it was necessary to meet a career counselor about it. Luckily, the school required that all students using its system to apply for jobs have a few appointments with a career counselor first.

As it turns out, my resume was NOT good. The career counselor very nicely tore the thing apart, pointing out its flaws, and helped me to build a resume which was actually good.

Immediately I started getting calls from employers. This was the single biggest boon to my job search at the time. Even if you don't have access to a career counselor, I'd suggest finding someone you trust to take a look at your resume and see if it's any good. Chances are that they'll find a few things that can be improved upon, and you'll have an easier time finding jobs after making some changes.

Get your name out there

Truthfully, I didn't even apply to my internship. I had no idea that the company existed before receiving an e-mail from them reaching out to see if I'd be interested in working there. They found my resume on a career board, and they desperately needed a part-time developer to help their team out.

I had a few other offers from companies that I actually applied to, but having your name out there on a few job boards will take a lot of the burden off of your shoulders. Posting blog posts on sites like this one will help in getting your name out there too!

List some projects on your resume

If you are like I was, you don't have any professional experience that is relevant to the positions that you're interested in. To prove that you're capable, you're going to have to place a "projects" section onto your resume.

During interviews, my prospective employers were always impressed by the projects that I put in this section. You can put whatever you've built, as long as you are prepared to talk about it at length in your interview.

To get my internship, I had a note-taking web app, another web app which I ended up not finishing, and my portfolio website on my resume. Under each project title I had a few bullet points which explained how I built the projects, and what they did. In the interview I was asked about why I used the technologies I used, and to go a bit more in-depth about the process and the status of the applications.

If you follow these tips, I promise that you'll have an easier time finding jobs. Good luck!

Customizing Firefox with CSS

Cole Walker — Sun, 08 Mar 2020 17:01:06 +0000

Today I found out that Firefox, my browser of choice, has some great features for web developers who love to tinker with the styles of things. As it turns out, not only can you edit the styles of the web browser window itself, but even use the familiar element inspector on it to help you do so. The best thing about this is that it isn’t only great for advanced web developers, but also people who want to practice their CSS skills on the thing they’ll probably be staring at more than anything else.

Setting up browser toolbox

To set this up, we’re going to first have to edit a few settings in Firefox.
To get the browser inspector, or what Firefox calls the “browser toolkit”, you’re going to open your developer tools (F12), click the little … icon in the upper right hand corner, and select the “Settings” option in the floating menu.

Take a look at the Advanced settings panel, and make sure that you check “Enable browser chrome and add-on debugging toolboxes”, and “Enable remote debugging” (yes, this is required, even if you’re debugging on your own machine)
Now we’re all set to play around!

Inspecting the browser

If you hit the key combination Ctrl Shift Alt I you’ll open up 2 new windows. One will be completely blank, and the other will ask you about incoming requests. Click yes, and the blank window will turn into the familiar inspector window… this time for your browser window. Hovering over the elements in the inspector will show an outline over the corresponding elements on the browser window itself.

If you look for the “box” element, that represents the top part of the browser, so expand that. From here, you can keep expanding things and play around with them in the style pane on the right, to see how they look. I’d recommend playing around with this for a bit to see how everything works.

Setting up a Stylesheet

If you’ve found a change that you like the look of, and want to keep beyond this session, you can force Firefox to load a custom .css file. First, we have to tell Firefox to check for the css file on startup.

Copy and paste about:config into the address bar, and hit enter to open the page.

Click “accept the risk and continue”, we won’t be doing anything dangerous here.
Type userprof into the search bar, and double click the box that is titled toolkit.legacyUserProfileCustomizations.stylesheets. This just tells Firefox that you want it to search for the CSS file on startup.

The next step is to actually create the CSS file.

To do so, you should copy paste about:support into the address bar, and hit enter.

You’ll see a page like this. Click the Open Folder button in the Profile Folder section, and it’ll open up your file explorer in the folder for your Firefox profile.

If there is a chrome folder, navigate inside of it, and create or edit a file named userChrome.css.

If there isn’t, create a folder named chrome, and create a file inside named userChrome.css.

This is the file where your browser styles can be saved to. You’ll probably need a lot of !important in this file, since the specificity can be really hard to overwrite in some places.

You can put whatever you want in here to make the browser yours, but this is the code that I have in mine. It will make the browser hide the bookmarks bar when you aren’t hovering your mouse over it, and it’ll make the address bar curved like it is in google chrome.

#urlbar{
    border-radius:25px !important;
}

#PersonalToolbar{
    --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
    --uc-bm-padding: 6px; /* Vertical padding to be applied to bookmarks */
  }

  :root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
  :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 6px }

  #PersonalToolbar:not([customizing]){
    margin-bottom: calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
    transform: rotateX(90deg);
    transform-origin: top;
    transition: transform 135ms linear 600ms !important;
    z-index: 1;

  }
  #PlacesToolbarItems {   
    display: flex !important;   
    justify-content: center !important; 
}
  #PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }


  /* SELECT ONE BOOKMARKS TOOLBAR BEHAVIOR */

  /* ONE | Show when urlbar is focused 
       #nav-bar:focus-within + #PersonalToolbar{ 
       transition-delay: 100ms !important; 
       transform: rotateX(0); 
   } */

  /* TWO | Show when cursor is over the toolbar area 
  My Personal Choice
  */
  #navigator-toolbox:hover > #PersonalToolbar{
    transition-delay: 100ms !important;
    transform: rotateX(0);
  }

Restart your Firefox, and your browser should look like this.

If you want to find ideas or code to use, check out the /r/firefoxCSS subreddit!

Confused by Redux: What the heck is Redux? What is state? Why do we need a state manager?

Cole Walker — Thu, 13 Feb 2020 00:24:20 +0000

Redux is one of the most difficult concepts to grasp as a newcomer to front-end frameworks, and it took me a long time to understand how it worked and how to use it. I didn't truly get it until I had a need for it.

In this article I aim to educate you about some of the concepts of Redux, including why we need it, what state is, and a high-level example of what we would use Redux for.

Why do we use Redux?

I think that this is the single most important thing to understand when learning redux. If you don't have a reason to use redux, you cannot hope to grasp it. It is a utility that needs to be learned out of necessity, not just for fun.

Redux describes itself as "a predictable state container for js apps". Chances are, you have no idea what the hell that means. I didn't when I first read it!

Put simply, Redux handles your global state so you don't have to.

Redux holds all of those nasty global variables you need in a way that's clean and predictable, so you don't go goofing stuff up by mistake.

Hold up, what the heck is "state"?

State is the status of an application in a given moment. In other words, it's a snapshot of the variables that your application relies on.

*Think of state as a screenshot of all of the variables on your app which change with interactions. *

The Example: a Countdown Timer

A few months ago, I set out to build an app which would make my life better, a countdown timer. The requirements of this app were as follows:

It needed to take as input a date and show me the amount of time remaining until that date in a stylish GUI.
The GUI should be fully customizable via a settings screen, allowing me to change the background, color of the elements, and text color.
The timer should update every second.

I started to build this app, and that's when I had my eureka moment with Redux. I finally understood why it was necessary, and why global state was a thing that people needed.

Let's take those requirements and piece out the state that is mentioned in the app requirements, and what screens that each piece will be used on.

The user selected date. (Main Screen, Settings Screen)
The current date and time. (Main Screen)
The amount of time remaining until the user selected date. (Main Screen)
The background. (Main Screen, Settings Screen)
The color of the elements. (Main Screen, Settings Screen)
The text color. (Main Screen, Settings Screen)

Here's a screenshot so you can better visualize the app.

From this list, you should be able to understand why we need global state, and which of these will be global state. The global state of this application is anything which exists on both of the screens. That is what we need Redux for.

Redux will handle the updates to the global state, and deal with managing these variables between screens.