DEV Community: mjimenez3

Thinking about Tailwind CSS

mjimenez3 — Thu, 23 Apr 2020 21:57:34 +0000

When I first started to learn website design, every page I did was small and not very stylistic in terms of professional level work. Because of this my HTML and CSS files were easy to manage while adding or removing code. As I continue to learn, I am continually finding that my .css file grows by leaps and bounds as I input more style. It's slowly creeping to 100-200 lines of code and more. It became tiresome searching for all my classes and ids to change something simple. And even then, it would sometimes make changes that I didn't necessarily want.

As with every aspect of technology, the question is always asked, "How can I do this better/easier/faster?" Bootstrap became a fan favorite for design. But the more you look into it, the more cookie cutter it can feel. What if you wanted something highly customized and unique to you and your business.

Enter Tailwind CSS!

What is Tailwind?

Tailwind, created by Adam Wathan and Steve Schoger, is a highly customizable, low-level CSS framework that uses utility classes that let you build completely custom designs without ever leaving your HTML.

In other words, Tailwind allows you access to CSS attributes using class utilities right on your HTML document to customize unique designs, instead of having to choose from predesigned components.

With a traditional CSS file, it grows as you build your site. You have to think of names_subnames_subsubnames_subsubsubnames in order to style different portions of your site. With Tailwind, you can add, remove, modify straight to the object.

Just Starting

To download Tailwind, follow the directions here. It is a little bit of a lengthy process, but provides an abundance of power behind it, including customization.

If you are just wanting to take Tailwind for a spin, use the following CDN build:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Although this will not give you full features of Tailwind, it will allow you to explore if this is something you would like to incorporate in future projects.

How To Use Tailwind

Tailwind uses a mobile first breakpoint system, and uses four breakpoints:

Small (sm) min-width: 640px
Medium (md) min-width: 768px
Large (lg) min-width: 1024px
Extra Large (xl) min-width: 1280px

This means that utilities with no prefixes will be executed on all screen sizes, while prefixed utilities will only execute at their specified breakpoint and above. That being said, mobile screens will have no prefix.

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

Here is the code for a simple splash site utilizing Tailwind CSS:

<body class="bg-grey-200">
  <div>
    <div class="px-5 py-10 max-w-md mx-auto ">
      <img class="h-70 w-auto object-center" src="https://www.freelogodesign.org/file/app/client/thumb/e2c49719-4410-41b4-b0ce-83d3a22c3b6e_200x200.png?1587658842573" alt="Work from home logo">
      <img class="h-70 w-auto rounded-lg shadow-lg" src="https://images.propertycasualty360.com/contrib/content/uploads/sites/412/2019/03/RemoteWork.jpg" alt="working at home">
      <h1 class="mt-5 text-2xl text-grey-500 font-bold leading-tight ">Easy commute! Great work atmosphere! <span class="text-blue-700"> Start Today!</span></h1>
      <p class="mt-3 text-sm text-grey-600 ">Working from home allows you the freedom to be who you are, dress how you like, and go where you feel. Sign up today for a list of Work from home employers.</p>
      <a class="inline-block mt-5 px-5 py-3 bg-blue-700 text-white rounded-lg shadow-lg uppercase tracking-wider font-semibold text-sm" href="#">Sign up</a>
    </div>
  </div>
</body>

Let's go over what some of this means.

bg-grey-200 - Background color on scale from 100-900 in increments of 100.
px-5 py-10 - padding, both horizontal and vertical.
max-w-md - maximum width of medium no matter screen size (about 28rem).
mx-auto - horizontal margin set to auto.
w-auto - width set to auto.
object-center - img set to center.
rounded-lg - rounded corners and how tight they are rounded.
shadow-lg - box shadow.
mt-5 - margin top set to 5.
text-2xl - text size 1.5rem.
font-bold - darker, bolder font.
leading-tight - spacing between lines of text.
tracking-wider - spacing between letters.

Those are the basics of what I used to make the sample splash site below:

The possibilities are endless on customized websites, made exactly to your liking. No cookie cutters here.

Let me know what you think about Tailwind, and how it has made life easier or not for your web design.

References
TailwindCSS Website
Tailwind Cheat Sheet
Adam Wathan's Tailwind Tutorial

Transitioned/ing Military and PMP

mjimenez3 — Tue, 07 Apr 2020 21:30:33 +0000

As a military member, you do lots of things. You are told to do something, and you just get it done. That's what we do. For example, being in the Navy, one of our owned spaces was the missile deck on a Destroyer. We were tasked with painting it. As the guy in charge of three sailors, I set out tasks for all three. These tasks encompassed everything. We checked the weather to see if it was raining. The ship's schedule to see how fast we were traveling. Gathering material like paint brushes, rollers, tape, pans, etc. Ensuring that there was the correct paint on board in the right quantities. Who was going to paint what, and then what day I would come back and make sure things were done the way they needed to be done. At the end of all this, our portion of the ship was painted and we could move on to other things (like playing video games). What I didn't know until it was explained to me was that..

I had just led a project, and had Project Manager Experience!

This blew my mind. All this time I thought I had no experience that I could transfer to the real world when I got out. But no, I had successfully planned a project to include logistics, schedule, scope, people, quality assurance, and closing the project as I reported the results to my chain of command.

We don't realize this, but we as military members have more experience than most people do after 10 years at any job. Sure, it may not be the field that you want, like in my case, but you can use that experience to help you leverage your way to any job.

I used this aha moment to earn my Project Management Professional (PMP) and Professional Scrum Master I (PSM) Certifications. Using things like planning for deployments, painting the ship, upgrading software systems, preparing for ship certifications, I found that I had plenty of experience.

Searching for ways to study for PMP, I came across Onward 2 Opportunity. If you are in your last 6 months in the military, are already out, or are a spouse of a military member, you can apply to this program. It provides free training and certification exam through Syracuse University for a number of HR and IT programs. For PMP, they also pay for a 1 year membership to the Project Management Institute.

In all my studying, which took about 2 months, I found that in the military, we do everything that Project Managers do, it's just not formalized. We don't call the phases:

Initializing
Planning
Executing
Monitoring/Controlling
Closing.

We called it:

We have to do this
Let's do it
We're working on it
Looking Good
We're Done

Changing the way I thought of things, helped me to better understand everything I was studying.

Once I passed my PMP Exam, I knew I wanted to get into the IT realm. I heard that Scrum Master is the Project Manager of the IT world. So I began studying and found that they are very similar, except things are done in increments vice whole projects. There are other small differences, but after studying for 1 week, I took and passed the PSM exam.

Being in the military has given you many different experiences. You need to find out how to leverage that experience for the "real" world. How you word things is a big factor in doing that leverage as I wrote above. Below are some of the resources I used to study for the PMP Exam.

https://edward-designer.com/web/list-of-free-pmp-exam-questions/

https://www.oliverlehmann.com/pmp-self-test/100-free-questions.htm

https://www.oliverlehmann.com/contents/free-downloads/200_PMP_Sample_Questions.pdf

https://www.simplilearn.com/pmp-exam-prep-free-practice-test?source=PracticeTestCTA

https://www.edwel.com/Free-Resources/PMP-Certification-Practice-Exam.aspx

https://www.greycampus.com/opencampus/project-management-professional/practise-exams

https://www.whizlabs.com/project-management-professional-pmp/

https://www.pm-exam-simulator.com/pmp-exam-simulator/free-pmp-exam-simulator

Become a better you than you were yesterday!

My Story

mjimenez3 — Fri, 03 Apr 2020 02:13:18 +0000

When I joined the Navy in 1999, I knew computers were the way of the future. I decided to take a job that would work with computers and the Recruiters sold me on the Advanced Electronic Computer Field. Sounded amazing, and in fact it was amazing. I worked with missile systems shooting missiles! But it wasn't what I had originally wanted when I signed up.

Twenty years later, I still know computers are the way of the future. I still want a do get a job that will work with computers. I thought cyber security was interesting, and one of my co-workers was planning to do that when he got out of the Navy. So I dabbled in that and got my Security+ cert. But the more I learned the less I wanted to do that full time. I also got my Project Management Professional and Professional Scrum Master I certifications thinking that I could backdoor my way in by being an IT PM or SM. The more I learned, the less I wanted to do anything strictly PM.

I started looking at coding, and web development. I enjoyed making something from nothing. Designing, building, and writing something of my own and having a finished product. Being as creative as I could be, and finding a solution to something I didn't know. I was hooked.

I searched Google for everything I could learn in coding. I wanted to start with Python, but couldn't wrap my mind around it since I was new to everything. It gave me more information than I could ever process, telling to start here, and there, and over here. I signed up for some Udemy courses, but found it difficult to learn from the instructors that I got (not sure why since I had done Mike Myers' Sec+ course on Udemy). So I began to look for coding bootcamps. I came across Vets Who Code who gave you pre-work and a two-week deadline to read, comprehend, and make an "About Me" website. I learned so much and enjoyed every second as I stayed up to the wee hours in the morning trying to figure out how to make a text box stay where I wanted it to stay. I was hooked before, and now I was caught.

I was ecstatic when I found out that I had made the Vets Who Code cohort, and started consuming information so that I could have a great start. Almost five weeks into the cohort, and I am learning by leaps and bounds. I can do far more, and understand far more than I ever thought at this point. Just yesterday, I decided to do some reading on Python for a break from the computer screen. To my amazement, as it explained Python, I could see and understand what they were talking about, even in the different syntax, just from what I have learned in Javascript. My mind is blown and I look forward to the rest of this cohort, and lifelong learning in coding and programming.