DEV Community: F.J.

On Queerness, Emancipendence and Belonging

F.J. — Sat, 08 Aug 2020 03:46:21 +0000

The first week of August holds tremendous significance for Jamaicans. We celebrate our ancestors' emancipation from slavery (Aug 1) and gaining independence as a nation from the colonizers (Aug 6). Since 2015, the LGBTQ+ community has also been hosting pride celebrations during this eventful week.

Our motto, "Out of Many, One People", is reflective of a culture rich with contributions from people of many nations and creeds. As is the case with most things that are easier to say than do, I fear our practice of celebrating diversity has yet to align with our theoretical celebration of it.

I am not saying I expect us to be perfect. I am simply acknowledging that we have much work to do as a people before all of us can truly feel at home in a country we love so dearly.

As a queer man in Jamaica who works in tech, I tend to be given a front-row seat to the sexism, anti-queerness and toxic masculinity for which tech spaces have gotten a bad reputation. I am yet to work at an organization where I truly feel comfortable. Notwithstanding, I have been fortunate to encounter some amazing coworkers.

Still, I feel lonely in Jamaica's tech scene as an openly queer man. I can imagine other LGBTQ+ people feel similarly but given our context, stepping outside of the proverbial closet can have adverse effects on our job security.

Queer spaces for people in tech aren't novel. There are several communities and non-profits engaged in this work such as OutInTech, TransTech Social, WomenWhoCode, LesbiansWhoTech, and QueerJS just to name a few. These are all wonderful communities and I've had good experiences engaging with them.

While I can relate generally to the discrimination and other challenges we face as queer people in the global tech industry, a shared cultural context has been notably absent from these communities.

To this end, my friend Sam and I created a Discord server called "Qodescope" for LGBTQ+ Jamaicans in tech. Qodescope is intended to be a safe space for us to connect, share ideas, grow and learn from each other. And what better time to launch it than during Emancipendence and Pride week!?

So if you're LGBTQ+, currently working in the tech industry or intend to, and would like to connect, please reach out to us and we'll send you an invitation to join our server! We're looking forward to meeting you!

Developing WordPress Themes With TailwindCSS – Part I

F.J. — Mon, 29 Jun 2020 20:33:27 +0000

In this series, I'll be walking through the process of setting up a local environment for WordPress theme development using TailwindCSS.

Whether you're on Linux, Windows or Mac, we'll need to run our WordPress own server. You can use XAMPP, WampServer, MAMP or similar software that enables you to run a local PHP server with Apache and MySQL. I'll be using MAMP but feel free to download and install your preferred tool.

To install MAMP, navigate to https://www.mamp.info/en/downloads/ and download the package file; double-click the downloaded package to begin the installation. Once our server is installed, we can start it by opening MAMP and clicking 'Start servers'.

Optionally, we can configure the ports and document root or opt to keep the defaults. These options are reachable via MAMP > Preferences. I kept the default ports and configured a different document root to a project folder I had previously created.

Next, we'll get the latest version of WordPress and unpack the downloaded zip file into your document root. You can rename the extracted folder to the name of your project to keep track of your websites.

Now that we've got our WordPress site in place, we can create the database to store our site data. Navigate to http://localhost:8888/phpMyAdmin and create your new database.

Next, we'll point our WordPress site to our newly created database. Open your site folder (the one you extracted WordPress to) and locate the file wp-config-sample.php. We're going to rename this file to wp-config.php and update it the following options:

DB_NAME <database name>
DB_USER root
DB_PASSWORD root

Great! Now we're all set! If you navigate to localhost:8888/<site-name> you should see the WordPress installation screen.

Once you fill out the form, you can log in and start using your brand new local WordPress site!

Cover image by Igor Miske

Getting Started with the MongoDB Extension for VS Code

F.J. — Tue, 19 May 2020 20:18:19 +0000

Last week MongoDB announced the release of their extension "MongoDB for VS Code". Naturally, I was very excited to read the news given my love for VS Code and all things MongoDB.

The new MongoDB extension allow us to:

Connect to a MongoDB or Atlas cluster, navigate through your databases and collections, get a quick overview of your schema, and see the documents in your collections

Create MongoDB Playgrounds, the fastest way to prototype CRUD operations and MongoDB commands

Quickly access the MongoDB Shell, to launch the MongoDB Shell from the command palette and quickly connect to the active cluster.

Source: MongoDB

To get started, install the extension via the VS Code Marketplace. We can also install it by opening Extensions tab in VS Code (CMD + Shift +X on Mac or Ctrl + Shift + X on Windows) and searching for "MongoDB".

Once installed there will be a new MongoDB tab that we can use to add our connections by clicking "Add Connection". If you've used MongoDB Compass before, then the form should be familiar. You can enter your connection details in the form, or use a connection string. I went with the latter as my database is hosted on MongoDB Atlas.

To obtain your connection string, navigate to your "Clusters" page and select "Connect".

Choose the "Connect using MongoDB Compass" option and copy the connection string. Make sure to add your username and password in their respective places before entering the string in VS Code.

Once you've connected successfully, you should see an alert. At this point, you can explore the data in your cluster, as well as your schemas.

We can now create a new playground by using the menu on the MongoDB tab and selecting the "Create MongoDB Playground option".

The playground opens a template you can use or modify. Here I've written a few commands to add data to my test database and a simple find query. The playground is the perfect place to test your queries and aggregation pipelines. The results are shown in the Output window.

And that's it! Congratulations, you have now created your first successful connection to your MongoDB database using the new extension! Happy hacking!

What is Tailwind CSS?

F.J. — Tue, 05 May 2020 01:05:22 +0000

I started using Tailwind a few months ago and it has dramatically improved my workflow. So much so that I decided to write a gentle introduction attempting to demystify Tailwind's "utility-first" ideology.

What is Tailwind CSS?

Tailwind is a "utility-first" CSS framework that lends itself to rapid custom design prototyping. According to their website, Tailwind is a "highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override."

What does "utility-first" mean?

I was initially confused about what made Tailwind distinct from other CSS frameworks I had tried; for example, Bootstrap, Foundation, Material UI etc. But after experimenting with it on a project, I understood.

Other CSS frameworks ship with default themes and default-styled components which you have to painstakingly customize. These customizations require a lot of sleuthing to find every occurrence of that class and then modifying it for every screen size. At this point, you're probably using !important a LOT.

Instead, Tailwind provides you with a set of aptly-named classes. These classes are the "utilities" you use to style your elements; giving you complete control over their appearance and enabling you to create a "theme" if you wish. The result of this? You have to build everything from scratch. Depending on how you perceive it, it's either a glass half-empty or half-full situation.

Trivial scenario:

I'm building a page and I need a button. This button should have a small border-radius, white text, blue background, and a darker blue background on hover.
I could do something like this:

html

<button class="button"> Click me!</button>

CSS

.button {
  background: #4299e1;
  padding: 0.5rem 1rem;
  border-radius:0.25rem;
  color:#ffffff;
}

.button:hover {
  background: #2b6cb0;
}

If I needed several buttons with the same metrics (spacing, padding, margin etc) but different colors, we can easily see how the CSS could balloon exponentially.

eg. I now need to add a green button, so I refactor the base class and add 4 additional classes to account for differences in colour and hover effects:

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius:0.25rem;
  color:#ffffff;
}

.button.blue {
  background: #4299e1;
}

.button.blue:hover {
  background: #2b6cb0;
}

.button.green {
  background: #48bb78;
}

.button.green:hover {
  background: #2f855a;
}

But I only need this green button in one place....

Tailwind to the rescue

Tailwind provides us with an easier way out of this predicament. Using the framework's utility classes, the original html becomes:

<button class="rounded py-2 px-4 text-white bg-blue-500 hover:bg-blue-700"> 
Click me!
</button>

And if I need a green button?

<button class="rounded py-2 px-4 text-white bg-green-500 hover:bg-green-700"> 
Click me!
</button>

Now I have the single instance of the green button I need, without adding additional code to the CSS file. If I wanted to extract the component classes to make them reusable, it would look like this:

.button {
    @apply py-2 px-4 rounded text-white;
 }
.button.blue {
    @apply bg-blue-500
 }
.button.blue:hover {
    @apply bg-blue-700;
 }
.button.green {
    @apply bg-green-500;
 }
.button.green:hover {
    @apply bg-green-700;
 }

This is much simpler to read and write than pure CSS, or playing whack-a-classname.

Using this approach makes it easier to build custom components and share styles. Sharing colours across elements is also easier, and doesn't require sifting through a massive CSS file to locate the HEX (or RGB) code. Also, in the event that we customize the color palette all the changes will cascade seamlessly. And the CSS...well, I don't need to spend time defining every single thing as all the utilities are already defined in the framework.

Tailwind facilitates full customization; inclusive of colours, spacing (used to determine margins and padding), and font sizing.

So let's break down the Tailwind utilities I've used.

rounded: Applies a default (0.25rem) border-radius to the element. Variations include rounded-sm, rounded-md, rounded-lg and rounded-full.

bg-blue-500: Specifies the colour and weight of the background. The number specifies the weight of the colour. In this case, 500. Using bg-blue-300 would result in a lighter shade of blue.

hover:bg-blue-700: Adds hover style; specifying a heavier weight of the same hue.

py-2, px-4: Applies vertical (y) and horizontal (x) padding in increments, respectively (0.5rem & 1rem). p-1 equates to a padding of 0.25rem.

text-white: Specifies text colour. Text, border, and background colours are all generated in the same way. For eg. if we wanted a text colour that was the same colour as the button we could use text-blue-500.

To see the examples in action, check out the codepen here . For more information on Tailwind, take a look at their documentation. It is very thorough and includes examples for each utility class, as well as how to customize them.

Benefits of Using Tailwind CSS

Mobile-first & responsive

Tailwind uses a mobile-first breakpoint system that you're probably already familiar with (sm, md, lg, xl). Defining how elements should behave at various breakpoints is a breeze using these prefixes. eg. Changing the flex direction of a container from column on mobile, to row on larger screens: <div class="flex flex-col sm:flex-row"> ... </div>

No more whacky class names.

(Almost) All the css rules you need to style an element can be achieved by using one, or a combination of several Tailwind utilities. Classnames made easy. No distress necessary.

Smaller css files

Since (almost) all the classes you need are already predefined, you rarely have to write custom css which reduces bloating and results in...smaller css files. Combine Tailwind with PurgeCss to strip out classes you never use to result in really tiny minimized css files.

Less anxiety

Collaborate with other developers without worrying about introducing breaking changes. Tailwind provides a common language through shared classnames. Classes in your HTML is local and so are changes, so you can modify styles without worrying about other elements breaking.

In the end...

... Tailwind saves me from writing hundreds of lines of css with increasingly ridiculous classnames in order to style elements and provides a common language for developers across the project. No more bloat from ad-hoc classnames because the developer couldn't find a particular style to modify. Everyone is utilizing a set of pre-defined utility classes. My favorite part? Not having to hunt for, and manually override framework classes.

I understand how ridiculous it might look at first glance. I was very skeptical of all the "inline" styles at first; but give it a try. I highly recommend it over other frameworks for projects that require a greater degree of control over the UI or have custom designs. It will save you hundreds of lines of CSS and lots of headaches; literally.

Share your experience using Tailwind CSS in the comments!