teleren/devto huggingface dataset:
Day 8 I4G10daysofCodeChallenge
Published: 2022-09-28 20:57:07

Problem: Given a two SQL tables A,B in a database Combine them. with a common column in A and B and rows that doesn't have a common fields should return null in the B fields.

Table: Person

+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| personId    | int     |
| lastName    | varchar |
| firstName   | varchar |
+-------------+---------+
personId is the primary key column for this table.
This table contains information about the ID of some persons and their first and last names.
 

Table: Address

+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| addressId   | int     |
| personId    | int     |
| city        | varchar |
| state       | varchar |
+-------------+---------+
addressId is the primary key column for this table.
Each row of this table contains information about the city and state of one person with ID = PersonId.
 

Write an SQL query to report the first name, last name, city, and state of each person in the Person table. If the address of a personId is not present in the Address table, report null instead.

Example :

Input: 
Person table:
+----------+----------+-----------+
| personId | lastName | firstName |
+----------+----------+-----------+
| 1        | Wang     | Allen     |
| 2        | Alice    | Bob       |
+----------+----------+-----------+
Address table:
+-----------+----------+---------------+------------+
| addressId | personId | city          | state      |
+-----------+----------+---------------+------------+
| 1         | 2        | New York City | New York   |
| 2         | 3        | Leetcode      | California |
+-----------+----------+---------------+------------+
Output: 
+-----------+----------+---------------+----------+
| firstName | lastName | city          | state    |
+-----------+----------+---------------+----------+
| Allen     | Wang     | Null          | Null     |
| Bob       | Alice    | New York City | New York |
+-----------+----------+---------------+----------+

Solution.

After reading through the solution I understand that what I need to do is to join Table A and B, using the LEFT JOIN.
Such that values that if some Rows in column A don't have the personId in them they should return null in the fields.

SELECT P.lastName, P.firstName, A.city, A.state
FROM Person P LEFT JOIN Address A ON P.personId = A.personId
I read about sql Joins
[GeeksforGeeks SQL Join](https://www.geeksforgeeks.org/sql-query-to-combine-two-tables-without-a-common-column/)

[Joining two tables](https://www.educba.com/sql-join-two-tables/)

[Leetcode problem](https://leetcode.com/problems/combine-two-tables/)
What are your git aliases?
Tags: git, beginners, tutorial, productivity
Published: 2022-09-28 20:55:38

## Introduction

I've been requested multiple times about sharing my `.gitconfig` to copy my aliases.

I use git aliases for two reasons:

1. To improve productivity.
2. To remember interesting `git` commands and learn from them.

## My Gitconfig

These are my aliases included in my `~/.gitconfig` file for your reference:

```ini
[alias]
    a = add .
    aliases = config --get-regexp alias
    alias = ! git config --get-regexp ^alias\\. | sed -e s/^alias.// -e s/\\ /\\ $(printf \"\\043\")--\\>\\ / | column -t -s $(printf \"\\043\") | sort -k 1
    ap = add . -p
    addups = remote add upstream
    bd = branch -d
    bi = bisect
    bl = branch -l
    blr = branch -a
    br = branch -r
    ca = commit -a
    cam = commit -a -m
    ci = commit -m
    cia = commit --author='imjoseangel <anotheremail@example.com>' -m
    cm = commit
    co = checkout
    colast = checkout -
    comments = commit -m 📒Comments
    count = rev-list --count devel
    db = branch -D
    forgetAbout = rm --cached
    formatting = commit -m 💅Formatting
    fp = fetch -p
    grep = grep -F
    laf = fsck --lost-found
    last = log -1 HEAD
    latest = log -5 --pretty --oneline
    ls = ls-files --others --exclude-standard -z
    mend = commit --amend
    nb = checkout -b
    op = gc --prune=now --aggressive
    pdo = push -d origin
    pf = push --force-with-lease
    po = push origin
    pou = push --set-upstream origin
    pr = pull --rebase
    pror = remote prune origin
    prud = pull --rebase upstream devel
    prum = pull --rebase upstream main
    prune = remote update --prune
    ptag = push origin --tags
    ra = rebase --abort
    rc = rebase --continue
    refactor = commit -m 👷Refactor
    remotes = remote -v
    renb = branch -m
    rh = reset --hard
    rhh = reset --hard HEAD
    ri = rebase -i upstream/devel
    rim = rebase -i upstream/main
    rl = reflog
    rp = repack -ad
    s = status -s
    search = rev-list --all
    sh = show
    short = shortlog -sn
    sign = commit --amend --no-edit --signoff
    st = status
    stashes = stash list
    tests = commit --allow empty -m ✅Tests
    tuto = help tutorial
    tuto2 = help tutorial-2
    unstash = stash pop
    vc = clean -dfx
    wow = log --all --graph --decorate --oneline --simplify-by-decoration
```

Running `git alias` after adding to the `.gitconfig` shows the list of all the aliases as a reference list.

To get more info, just run `git help <command or alias>`. For instance:

```sh
git help st
'st' is aliased to 'status'
```

```sh
git help status
```

There are two aliases I find interesting for beginners:

```sh
git tuto
git tuto2
```

Comments and suggestions with different approaches are always welcomed.
Day 6/100: The Gravity of Structure
Tags: webdev, react, 100daysofcode, devjournal
Published: 2022-09-28 19:57:46

In the last 2 days I spent my days making small edits to my site. Playing around with the CSS code, editing the CSS code, breaking the CSS code, re-fixing the CSS code😅
 
In my pursuit of better structure during my days, I found an extension called "TaskList" by Harshil Kaneria. It's good if you struggle with keeping track as I constantly did and as you can imagine, it has literally been a godsend. Working has become way less tiresome now. So Harshil, where ever you are, thank you.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1486vnupj4klss0b2n44.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyzqt95ckv6bnc3nrf82.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sj0xg71uhdklctfd0gga.png)
DAY 8 CODE CHALLENGE
Tags: sql, datascience
Published: 2022-09-28 19:39:43

## **COMBINE TWO TABLES**
****
Two tables were given to write an SQL query to report the firstName, lastName, city and state of each person in the "person" table. We were asked to report null if the address of a personId was not present in the "Address" table. Also, we were permitted to return result table in any order.

**DIAGRAMS OF THE TABLES**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qpw89uijojz8vwor43l.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eivqinv8vkoiwr8g9xu3.PNG)


**PROCEDURE**

- From the information given above, left join is required for this solution because we are returning every details from the first(left) table and matched records from the second(right) table.

- Using the select statement, select the column names (firstName, lastName, city, and state) that were stated to appear in our outcome as seen below:
`select firstName, lastName, city, state`

- Select from the first(left) table (that is the one we are returning the all their records)  as seen below:
`from Person`

- Left join to the second(right) table using the first and second  tables' common field as seen below:
`left join Address
using(personId)` 

- Since we were permitted to return in any order, I would prefer we go by lastName as seen below:
`order by lastName;`

**OUTCOME
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enys49xkkzfgbir9jrn6.PNG)**
Brachistochrone problem?
Tags: match, beginners, programming, calculas
Published: 2022-09-28 19:38:11

> Brachistochrone ออกเสียงว่า บราคิสโตโครน

**Brachistochrone Problem** คือปัญหาทางคณิตศาสตร์อย่างหนึ่งที่น่าสนใจและชวนคิดอย่างมาก สำหรับผู้ที่ชื่นชอบคณิตศาสตร์และไม่ชอบคณิตศาสตร์สามารถอ่านทำความเข้าใจและคิดตามได้ไม่ยากครับ

เรามาเริ่มกันเลย **Brachistochrone Problem** คือปัญหาที่ถามว่า "เส้นทางใดที่จะทำให้กลิ้งวัตถุจากจุดหนึ่งมาอีกจุดหนึ่งได้เร็วที่สุด" ซึ่งนั่นเป็นประเด็นที่น่าสนใจเป็นอย่างมากในหมู่นักคณิตศาสตร์เมื่อหลายร้อยปีก่อน แต่ก็นั่นแหละครับท่านผู้อ่าน **"คณิตศาสตร์คือการพิสูจน์"** ก็มีนักคณิตศาสตร์หลายคนพยายามหาคำตอบเกี่ยวกับมัน ซึ่งหนึ่งในผู้ที่ให้คำตอบกับเรื่องนี้ได้คนนั้นคือ **"ไอแซก นิวตัน"**

## โจทย์ปัญหา
งั้นมาดูกันที่โจทย์ปัญหากันก่อนครับ "หากต้องการสร้างรางเชื่อมระหว่างจุด A ไป B แล้วกลิ้งวัตถุเล็กๆมาตามราง รางต้องมีลักษณะอย่างไร เพื่อให้วัตถุใช้เวลาน้อยที่สุดในการกลิ้งจากจุดหนึ่งมายังอีกจุดหนึ่ง" ที่คือโจทย์ครับ งั้นดูจากภาพด้านล่างประกอบด้วย


![Brachistochrone Problem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67f3z4993g2lrn9aiybx.png)

ถ้าดูผ่านๆหลายๆคนคงจะบอกว่าก็กลิ้งลงมาเป็นเส้นตรงสิ ใช่!กลิ้งลงมาเป็นเส้นตรง แต่ในมุมมองนักคณิตศาสตร์มองว่าแล้วพิสูจน์ยังไงละว่าเส้นตรงเป็นทางที่เร็วที่สุด นั่นแหละฮ่ะท่านผู้อ่าน 
มาดูคำตอบของ ไอแซก นิวตัน กัน ซึ่งคำตอบของเขาคือ โค้งไซคลอยด์! What!? โค้งไซคลอยด์คืออัลไรนะ? หลายคนเกิดความสงสัยแน่นอนแต่ไม่เป็นไรครับเดี๋ยวผมจะช่วยอธิบายที่มาที่ไปของโค้งไซคลอยด์ให้เพิ่มนะครับ แต่ก่อนจะไปถึงเรื่องนั้นเรามาดูคำตอบที่เป็นรูปภาพกันก่อน

จากภาพคือเส้นรูปแบบต่างๆครับ
![Cycloid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87euzvzsl2z3ag7i9s3m.png)

---

![Brachistochrone Problem answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/241uiu7mxrj9b3a49ybt.png)
จากภาพจะเห็นว่าลูกบอลแต่ละลูกเคลื่อนที่ด้วยความเร็วที่แตกต่างกันครับ แล้วความเร็วมันต่างกันได้ยังไง ก็เพราะว่าความชันของเส้น ความชันของเส้นมีผลต่อความเร็วของลูกบอล อธิบายเพิ่มเติมจากที่เราเห็นเส้นแรก(line)ก็คือเส้นปกติที่ลากจากจุด A ไป B เป็นเส้นตรง ซึ่งเมื่อเรากลิ้งลูกบอลลงมาจะเห็นได้ว่าลูกบอลคลื่นที่ด้วยความเร็วเรื่อยๆ แต่ถ้าดูอีกเส้นถัดมาเส้นไซคลอยด์(cycloid)คือเส้นที่ลูกบอลเดินทางได้เร็วที่สุดเนื่องจากความชันของเส้นที่ลาดลงมาทำให้ลูกบอลมีความเร็วที่เกิดจากแรงโน้มถ่วงจนมีค่าคงที่ระดับหนึ่งและไหลไปเรื่อยๆโดยไม่ไต่ความชันขึ้นไปที่จุด B ซึ่งจะแตกต่างจากเส้นที่สามที่มีความเร็วในช่วงแรกก็จริงแต่สุดท้ายแล้วต้องไต่ความชันขึ้นมาเพื่อให้ถึงจุด B อีกทั้งยังมีระยะทางที่ไกลกว่า นั่นแหละฮ่ะท่านผู้อ่านเลยเป็นที่มาของคำตอบ

---

> สรุป : โดยการมองแบบผ่านๆ หรือผู้ที่ไม่มีประสบการณ์ทางด้านนี้อาจจะมองว่า เส้นตรงนั้นเร็วที่สุดแต่ในมุมของนักคณิตศาสตร์จะมีคำถามกลับมาว่า มั่นใจได้ยังไงว่าเส้นทางนี้เร็วที่สุด เลยเป็นที่มาของประโยคที่ว่า "การไม่ได้เห็นเส้นทางอื่น ไม่ได้หมายความว่าเส้นทางอื่นไม่มีจริง" ง๊อวววววว

หน้าตาอุปกรณ์ที่ทำขึ้นมาเพื่อพิสูจน์ทฤษฎีนี้
![Brachistochrone Problem Machine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8akwsdl6pe8fs202tkg.png)


ส่วนที่มาที่ไปของ Cycloid ผมขอต่อใน Post หน้านะครับ ^_^

---

Ref : หนังสือ ภาษาจักรวาล ประวัติย่อของคณิตศาสตร์ โดย อาจวรงค์ จันทมาศ
Ref : https://www.youtube.com/watch?v=1BdO8J0iynY
Benefits of building a cli app in dart.
Tags: dart, cli, flutter
Published: 2022-09-28 19:15:38

## Introduction

This is the first article in the series "Building a command line interface app in dart". In this series, we will learn together how to build a cli in dart and publish it on [pub.dev](pub.dev).

## Why build a cli?

There are many reasons to build your cli app, my main reason is to **automate repetitive tasks**


Personally, I hate, yes hate is a strong word, I hate doing the same thing twice. I hate repetitive tasks so much that I often procrastinate when I'm starting a new flutter project. I delay because every project will need the same things like adding themes, connecting the app to firebase, creating your folder structure, etc.

To solve my procrastination problem once and for all, I've decided to build my opinionated cli. If I'm going to build a cli I might as well publish it to [pub.dev](pub.dev) to benefit developers who follow a similar workflow to mine.

Other reasons to build a cli are, 

* Use your app without having to build a UI for it.
* To understand how cli app works 
* To get familiar with using the terminal 

The million-dollar question is, how to build a cli in dart?

## How to build a simple cli in dart?

Fortunately, dart.dev give us a great starting point... I recommend your read their [tutorial](https://dart.dev/tutorials/server/get-started). That tutorial while being an amazing starting point is too simple for a relatively complex cli app. I'll leave you to read the aforementioned article and we'll continue our cli journey in the next article of this series where we will create our cli.

## Connect with me

Thank you for reading my post. Feel free to subscribe below to join me on the #100DaysOfCodeChallenge or connect with me on [LinkedIn](https://www.linkedin.com/in/curtlycritchlow/) and [Twitter](https://twitter.com/CritchlowCurtly). You can also [buy me a book](https://www.buymeacoffee.com/curtlycritchlow) to show your support.
Next.js Tutorial: How To Create A Customizable Next.js Landing Page
Tags: webdev, nextjs, tutorial, programming
Published: 2022-09-28 19:14:20

Having landing pages that you can easily customize whenever you'd like?

Get ready to melt - #ButterCMS makes it happen! 🧈 

Here's how to customize your #nextjs landing pages in Butter! 🔥 
https://bit.ly/3SIfQ0O
How to create Google's Input Field with Tailwind?
Tags: tailwindcss, react, javascript, css
Published: 2022-09-28 18:55:54


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwj0g02cpree4krxm1zy.gif)

```jsx
const inputClasses = {
  root: /*tw:*/ `group relative h-14 w-full rounded-md border border-[#a5a5a6] focus-within:border-primary focus-within:ring-1 focus-within:ring-primary`,
  label: /*tw:*/ `absolute left-2 top-1/2 z-0 -translate-y-1/2 bg-white px-1 text-base pointer-events-none duration-200 group-focus-within:top-0 group-focus-within:text-xs group-focus-within:text-primary`,
  input: /*tw:*/ `z-10 h-full w-full rounded-md px-3.5 py-4 outline-none`,
};

function Input({ placeholder, ...props }: React.ComponentProps<'input'>) {
  return (
    <div className={inputClasses.root}>
      <label
        className={cnMerge([inputClasses.label, props.value && 'top-0 text-xs'])}
        htmlFor={props.id ?? props.name}
      >
        {placeholder}
      </label>
      <input id={props.id ?? props.name} {...props} className={inputClasses.input} />
    </div>
  );
}
```

{% embed https://stackblitz.com/edit/github-qddvvp?file=pages/index.tsx %}
Combine Two Tables
Published: 2022-09-28 18:44:05

Day 8 of the #I4G10DaysOfCodeChallenge featured combining two tables in SQL. You can read more about the problem [here](https://leetcode.com/problems/combine-two-tables/description/).

Table: Person

```
+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| personId    | int     |
| lastName    | varchar |
| firstName   | varchar |
+-------------+---------+
personId is the primary key column for this table.
This table contains information about the ID of some persons and their first and last names.
```

Table: Address

```
+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| addressId   | int     |
| personId    | int     |
| city        | varchar |
| state       | varchar |
+-------------+---------+
addressId is the primary key column for this table.
Each row of this table contains information about the city and state of one person with ID = PersonId.
```

**Question:**
Write an SQL query to report the first name, last name, city, and state of each person in the Person table. If the address of a personId is not present in the Address table, report null instead.

Return the result table in any order.

**Solution:**

When combining rows from two or more tables based on a shared column, a JOIN clause is utilised.
There are different kind of JOINS in SQL and you can read more about it in the [w3schools Tutorial on SQL](https://www.w3schools.com/sql/sql_join.asp).

Because we are not exactly fixated on finding matching values in the table we can use either a LEFT or RIGHT JOIN depending on the sequence in which you write your SQL query.

The LEFT JOIN keyword returns all records from the left table (Person) , and the matching records from the right table (Address) . The result is 0 records from the right side, if there is no match.

The RIGHT JOIN keyword returns all records from the right table (Person), and the matching records from the left table (Address). The result is 0 records from the left side, if there is no match.

Thank You🫶🏼
Display a list of things in Repeating Group in groups - Bubble Development
Tags: tutorial, beginners, nocode, bubble
Published: 2022-09-28 18:18:41

One of the interesting discussions that popped up was the around the need to display a list of users in groups on an RG. Some Bubblers were having trouble getting this to work - displaying ‘each cell’s thing’s list of users: each item’s name’ led to the list of names appearing as a comma separated list.

Have you ever experienced a similar situation in your bubble development? If not, do you know the solution for this?

### First, let's first understand the problem statement deeper

Consider the case where you are creating a feature that allows users to create their own groups and you want to show all group members in a list. When you try to do this in your repeating group, all the members are displayed together in a single text element. But, you want to show each member in its own cell.

How can one do this? Let's see some solutions!

### Solution! 🔓

Here ‘Equipos’ is the group and ‘miembros’ is members.

All we need in the first repeating group to find the equipo’s and the second repeating group to display each miembro within that equipo.

A quick mock up of this (image taken from the Bubble Forum thread):

![Bubble development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v7wx48zlbftb53gfcey.png)

![Bubble development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qqphfn9jvixqz0bkbxn.png)

You could simply create a Repeating Group with the type ‘Equipos’ and add another Repeating Group with data type Miembro in each cell that displays current cell’s Equipo’s Miembros (users).

Alternatively, you could use Bubble’s :grouped by functionality. This lets you organize a list of things into groups based on the properties of each thing. In this case, it would be a list of Miembros (users) :grouped by Equipos. The Field to group by would be ‘Equipos’ with type of grouping ‘Exact’.

In the example below, Orders are being grouped by City. 

With the aggregation property, you could also retrieve the count, sim, product or any other basic mathematical calculation on a field of the list of things within each group.

Summarizing how grouping works:
[List] ——group by—→ [Group1’s List] [Group2’s List] [Group3’s List] …

![Bubble development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awxcds0cq1ukj6mtj8wb.png)

With that, you’ll have a list of users displayed on Repeating Group without showing them together! 💃

### For Further reading:
[Case insensitive input for search in Bubble app development
](https://dev.to/atomicfusionio/case-insensitive-input-for-search-in-bubble-app-development-31p3)

[Forum Thread ](https://forum.bubble.io/t/how-to-display-list-of-users-on-rg-without-showing-them-together/225355)🪄 

Hope this helped. 🔓
Have you ever made an app?
Tags: javascript, webdev, lib
Published: 2022-09-28 18:18:25

Have you ever made a frontend application with *JavaScript*?

Recently, I was thinking about making a JavaScript library to make work easier while creating an app. 

So, if you've ever made a project or app, let me question a few things:

 - What is the most difficult thing to code for you when making an application?

- Would you use a library to make things easier?

Personally, I don't often use libraries, but I consider they as a easy solution to many complicated things to code.

Regards and thank you.
Recursion IRL
Tags: programming, recursion, development, algorithms
Published: 2022-09-28 18:14:46

---
title: Recursion IRL
published: true
description: Want to know if recursion helped you solve a problem in your work
tags: programming, recursion, development, algorithms
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fio3a9fjnhaxin0ala5.jpg
# Use a ratio of 100:42 for best results.
---

While learning programming or preparing for tech interviews, we go through a vast curriculum of topics. **Recursion** is often considered as a hard to grasp concept, and one that I still struggle with today.

As with many things, practice makes perfect. And I think that's the main reason I still cannot confidently implement recursion at work. Granted, it's not a jack of all trades and its applications should be considered carefully.

That being said, I'd like to know: do any of you use it regularly in your projects? If so, how did recursion help to solve your problem?

Thanks!
Operators in Java
Tags: java, programming
Published: 2022-09-28 18:07:22

Basic stands everywhere so in programming too operators are the fundamentals of any programming language so in this blog I'll write about the operators in Java
 So what basically operators are?
"Operators are used to perform operations on variables and values"

**Arthmetic operator** 
int num1 = 10;

        int num2 = 20;
        System.out.println("the value of num1 + num2 is");
        System.out.println(num1 + num2);
        System.out.println("the value of num1 - num2 is");
        System.out.println(num1 - num2);
        System.out.println("the value of num1 * num2 is");
        System.out.println(num1 * num2);
        System.out.println("the value of num1 / num2 is");
        System.out.println(num1 / num2);
        System.out.println("the value of num1 % num2 is");
        System.out.println(num1 % num2);
  


**Assignment operator**
int num1 = 10;
int num2 = 20;
num2 = num1;

        System.out.println("= Output: "+num2);

        num2 += num1;

        System.out.println("+= Output: "+num2);
        num2 -= num1;
        System.out.println("-= Output: "+num2);
        num2 *= num1;
        System.out.println("*= Output: "+num2);
        num2 /= num1;
        System.out.println("/= Output: "+num2);
        num2 %= num1;
        System.out.println("%= Output: "+num2);

**Logical operator**
Int a=9;
Int b=11;
int c=20;
    

        System.out.println(a<b&a<c);
        System.out.println(a>b||a<c)
        System.out.println(a>b|a<c);
        System.out.println(a>b||a++<c);
        System.out.println(a);
        System.out.println(a>b|a++<c);
        System.out.println(a);
    

**Comparison or rational** operator 
Int a=9;
Int b=11;
int c=20;
 
        System.out.println("a is "+  a + " and b is " + b);

        // == operator
        System.out.println(a == b);  // false

        // != operator
        System.out.println(a != b);  // true

        // > operator
        System.out.println(a > b);  // false

        // < operator
        System.out.println(a < b);  // true

        // >= operator
        System.out.println(a >= b);  // false

        // <= operator
        System.out.println(a <= b);  // true
How to hide bookmarks toolbar icons in Firefox (v106, 2022) on macOS
Tags: firefox, browsers
Published: 2022-09-28 17:52:30

Add:

```css
@-moz-document url(chrome://browser/content/browser.xhtml){
	#personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon {
		display: none !important;
	}
}
```

To: 

```
/Users/<username>/Library/Application Support/Firefox/Profiles/xxxxxxxx.dev-edition-default/chrome/userChrome.css
```

![File contents in Sublime Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uh1t52q65y8s5siwhyq.png)


![Result is no icons in Firefox Toolbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p9k7c0ppvlpkmx0y1re.png)