DEV Community: shecodez

TypeScript used to be on my $#!% 💩 list

shecodez — Wed, 01 Dec 2021 19:20:44 +0000

JavaScript (JS)

JS - a high-level, ECMAScript, interpreted / just-in-time compiled programming language developed by Brendan Eich of Netscape. Not to be confused with Java.

JavaScript was initially created to “make web pages alive”.

well known - JS is almost as old as the internet
JS is an OOP (object oriented programming) language
JS is single-threaded
but JS is weakly and dynamically typed

👩🏽‍💻 (me): Good ol' JavaScript, what more can I say about one of the worlds most popular scripting language? 🌎 (world): Learn to TypeScript or GTFO.

So I started learning TypeScript. Not gonna lie it was so painful in the beginning. I hadn't been working with JS long enough, understand JS well enough, or become annoyed enough by all the silly JS errors / browser compatibility issues to appreciate something like TS.

Thus, TS was very much so on my 💩 list, but I have since seen the light.

TypeScript (TS)

TS - a strongly typed programming language developed by Microsoft that builds on JavaScript, giving you better tooling at any scale.

Editor Checks

Suddenly debugging was less of a nightmare with editor checks, because if TS doesn't like it, it wont compile.

const user = {
  id: l334,
  firstName: "Nicole",
  lastName: "Nobles",
  job: "Web developer",
}

console.log(user.name)

JS doesn't know to alert me that user doesn't have a name property.

but with TS I get an error:
Property 'name' does not exist on type { firstName: string; lastName: string; job: string }

Auto-complete

No more guessing what properties are on an object.

Interfaces

If I made a User interface I can't add / remove any required properties to the object.

*Note: adding ? after a property makes it optional.

interface User {
  id: number
  firstName: string
  lastName: string
  job: string
  remote?: boolean
}

function updateUser(id: number, update: Partial<User>) {
  const data = getUser(id)
  const user = { ...data, ...update, city: "Hachiōji" }
  saveUser(id, user)
}

TS will rightfully complain that 'city' does not exist on interface 'User'.

This only the tip of the TS iceberg. Don't take my word for it, you can check out the documentation here.

Conclusion

Once given a proper chance TypeScript has been amazingly helpful at saving me time and hard ache with features Editor Check, Auto-complete, and Interfaces. I won't lie sometimes I just slap any on things and call it a day, but it eats away at me until I get it typed like the rest of the project.

So, Keep calm, and Type(Script) on. Thanks for reading! 😊

02 Waffles (Toasts) | Building 🚧 Dock-UI: Custom Tailwind CSS components for H010SPACE

shecodez — Tue, 30 Nov 2021 16:06:50 +0000

Every since I was introduced to Tailwind CSS - A utility-first CSS framework - I have wanted to build my own flavor of custom UI components with it. Even with so many wonderful UI component frameworks and libraries out there, some may have a few component styles I like, but none have all and only the components I like / find useful.

So, I have decided to document building a complete set of my own custom components called Dock-UI.

Last time, we used Tailwind CSS to style the <input /> element to look like the Material Design filled text field.

This is gon' be fun. We can stay up in the comment section, swapping dev stories, 'cause in this mornings post we're making waffles! 🧇

Question: so what the duck 🦆 are waffles? Answer: waffles are fancy toast.

I hope with this post you'll see that we're building more than just plain old toasts so I dub thee fancy toast sir d-waffles.

So starting off the inspiration for style of this UI component comes from this codepen by Julie Park.

HTML

<div class="d-waffle overflow-hidden w-64 py-2 border border-gray-600 m-1 rounded-lg shadow-md">
  <div class="actions flex justify-end space-x-1 p-1 mr-2">
    <div class="w-2 h-2 rounded-full bg-white bg-opacity-50 hover:bg-green-500 cursor-pointer">
      <span class="sr-only">ok</span>
    </div>
    <div class="w-2 h-2 rounded-full bg-white hover:bg-red-500 cursor-pointer">
      <span class="sr-only">close</span>
    </div>
  </div>

  <div class="relative success-face">
    <div class="exclamation absolute left-7 -top-6 z-20 text-red-400 font-bold hidden">-!-</div>
    <div class="face absolute w-11 h-11 bg-white rounded-full border border-gray-800 top-0 left-4 z-10">
      <span class="eye absolute w-1 h-1 bg-gray-900 rounded-full"></span>
      <span class="eye absolute w-1 h-1 bg-gray-900 rounded-full"></span>
      <span class="mouth absolute w-2 h-2 rounded-full"></span>
    </div>
    <div class="shadow absolute w-10 h-1 bg-gray-900 bg-opacity-30 left-5 top-11 z-10"></div>
  </div>
  <div class="message ml-16 text-white">
    <h4 class="mx-2 text-sm font-bold uppercase">Success</h4>
    <p class="mx-2 text-xs text-gray-800">We made a waffle! 🧇</p>
  </div>
</div>

SCSS

.d-waffle {
  min-height: 5rem;
}

.d-waffle .message h4 {
  text-shadow: 1px 1px #222;
  letter-spacing: 2px;
}

.d-waffle .eye {
  top: 40%;
  left: 21%;
}
.d-waffle .eye:nth-of-type(2) {
  left: 68%;
}

.d-waffle .shadow {
  border-radius: 50%;
}

.d-waffle .mouth {
  top: 43%;
  left: 41%;
}

.d-waffle .success-face .mouth {
  border: 1px solid;
  border-color: transparent #777 #777 transparent;
  transform: rotate(45deg);
}

$white: #fcfcfc;
$grey: #ccc;
$dark: #777;
$error: #ef8d9c;
$orange: #ffc39e;
$success: #b0db7d;
$lime: #99dbb4;
$blue: #7db0db;
$purple: #7d81db;
$yellow: #efe08d;
$peach: #efaf8d;

.d-waffle {
  //@apply bg-gradient-to-br from-green-500 to-indigo-300;
  background: linear-gradient(to bottom right, $success 40%, $lime 100%);
}

That gives us this cute little guy.

Lets add the CSS for the error, info, and warning waffle background.

SCSS

$white: #fcfcfc;
$grey: #ccc;
$dark: #777;
$error: #ef8d9c;
$orange: #ffc39e;
$success: #b0db7d;
$lime: #99dbb4;
$blue: #7db0db;
$purple: #7d81db;
$yellow: #efe08d;
$peach: #efaf8d;

.d-waffle.error-waffle {
  /*@apply bg-gradient-to-bl from-error-500 to-yellow-500;*/
  background: linear-gradient(to bottom left, $error 40%, $orange 100%);
}

.d-waffle.info-waffle {
  /*@apply bg-gradient-to-br from-info-500 to-purple-500;*/ 
  background: linear-gradient(to bottom right, $blue 40%, $purple 100%);
}

.d-waffle.warning-waffle {
  /*@apply bg-gradient-to-bl from-warning-500 to-red-300;*/
  background: linear-gradient(to bottom left, $yellow 40%, $peach 100%); 
}

Success is the default .d-waffle background so we can add .error-waffle, .info-waffle, or .warning-waffle to change the background colors.

Now all we have to do is add the styles for the different faces and animate them.

SCSS

.d-waffle .success-face .mouth {
  border: 1px solid;
  border-color: transparent #777 #777 transparent;
  transform: rotate(45deg);
}

.d-waffle .error-face .mouth {
  border: 1px solid;
  border-color: #777 transparent transparent #777;
  transform: rotate(45deg);
}

.d-waffle .info-face .mouth {
  border: 1px solid #777;
  border-radius: 0;
}

.d-waffle .warning-face .mouth {
  top: 50%;
  height: 1px;
  border-bottom: 1px solid #777;
  border-radius: 0;
}

And the finally the animations!

SCSS

.d-waffle .success-face .face {
  animation: bounce 1s ease-in infinite;
}
.d-waffle .success-face .shadow {
  animation: scale 1s ease-in infinite;
}

.d-waffle .error-face .face {
  left: initial;
  right: 5%;
  animation: roll 3s ease-in-out infinite;
}
.d-waffle .error-face .shadow {
  left: initial;
  right: 5%;
  animation: move 3s ease-in-out infinite;
}

.d-waffle .info-face .mouth {
  animation: talk 2s ease-in-out infinite;
}

.d-waffle .warning-face .eye {
  animation: blink 2s steps(5, start) infinite;
}

.d-waffle.warning-waffle .exclamation {
  text-shadow: 1px 1px #777;
  animation: scale 1s ease-in-out infinite;
}

@keyframes bounce {
  50% {
    transform: translateY(-10px);
  }
}

@keyframes scale {
  50% {
    transform: scale(0.85);
  }
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
    right: 5%;
  }
  50% {
    right: 45%;
    transform: rotate(-175deg);
  }
  100% {
    transform: rotate(0deg);
    right: 5%;
  }
}

@keyframes move {
  0% {
    right: 5%;
  }
  50% {
    right: 45%;
  }
  100% {
    right: 5%;
  }
}

@keyframes talk {
  0% {
    height: 8px;
  }
  45% {
    height: 2px;
  }
  75% {
    height: 6px;
  }
  85% {
    height: 4px;
  }
  100% {
    height: 6px;
  }
}

@keyframes blink {
  0% {
    height: 4px;
  }
  85% {
    height: 4px;
  }
  95% {
    height: 2px;
  }
  100% {
    height: 1px;
  }
}

And with that we've completed the d-waffle dock-ui component. Of course it's very basic right now, but I leave the upgrades for you and future me. Thanks for reading! 😊

01 Text Field | Building 🚧 Dock-UI: Custom Tailwind CSS components for H010SPACE

shecodez — Thu, 18 Nov 2021 15:55:16 +0000

Every since I was introduced to Tailwind CSS - A utility-first CSS framework - I have wanted to build my own flavor of custom UI components with it. Even with so many wonderful UI component frameworks and libraries out there, some may have a few component styles I like, but none have all and only the components I like / find useful.

So, I have decided to document building a complete set of my own custom components called Dock-UI.

While H010SPACE is in development, the only accessible page for awhile will be the landing page which has one main element, a sign up <form /> for the mailing list with a email <input /> and submit <button />.

So, first up we're building an <input /> with Tailwind CSS.

Of all the frameworks and libraries I've seen so far, my favorite style for <input /> is by Material Design. Today we'll build the Material Design Filled Text field with Tailwind CSS.

Note: I usually use Windi CSS instead of Tailwind CSS for the speed ⚡, but the classes work the exact same for both.

Starting with the foundation we have:

<input type="email" placeholder="E-Mail" class="border" />

Now that we have the base lets style it up. According to Material Design the anatomy of a text field consists of:

Container
Leading icon (optional)
Label text
Input text
Trailing icon (optional)
Activation indicator
Helper text (optional)

<div>
    <label for="email">E-Mail</label>
    <input type="email" name="email" class="border" />
</div>

For simplicity I've left out the optional bits.

TL;DR the finished code is right below take it, use it, and modify the crap 💩 out of it. A brief explanation of the code will follow if you want to stick around for it.

HTML

<div class="d-textfield relative bg-black bg-opacity-10 px-4 pt-5 pb-1.5 rounded-t border-b border-black border-opacity-40">
    <input type="email" name="email" placeholder=" " class="block bg-transparent w-full appearance-none focus:outline-none text-sm" />
    <label for="email" class="absolute top-0 transform translate-y-1/2 duration-300">E-Mail</label>
</div>

SCSS

.d-textfield:focus-within {
  border-bottom: 2px solid blue;
  background-color: rgba(0,0,0, 0.20) !important;
  & input {
    caret-color: blue;
  }
  & label {
    color: blue;
  }
}

.d-textfield label {
  z-index: -1;
}

.d-textfield input:focus-within ~ label,
.d-textfield input:not(:placeholder-shown) ~ label {
  //@apply transform scale-75 -translate-y-6;
  transform: translate(-0.4em) scale(0.74);
}

Part of the beauty of Tailwind CSS is that the utility classes make it pretty clear what's going on. Plus because you can extend tailwind the SCSS can be made even shorter.

For example we can change the border color when the input is focused using the pseudo-class focus-within. We can enable the focus-within variant in Tailwind for borderColor by adding it in the tailwind.config.js or windi.config.js under the variants section:

tailwind.config.js / windi.config.js

variants: {
  borderColor: ['responsive', 'hover', 'focus', 'focus-within'],
}

Then we can add the focus-within:border-blue-500 class to the input container <div /> to change the border color on focus and remove the .d-textfield:focus-within { border-bottom: 2px solid blue; } from the SCSS.

The same thing could be done with the negative z-index for the <label />. Just extend the Tailwind theme to generate a negative z-index for you:

tailwind.config.js / windi.config.js

theme: {
  extend: {
    zIndex: {
      "-1": "-1",
    },
  },
}

With that you can add the class -z-1 to the <label />, and remove .d-textfield label { z-index: -1; } from the SCSS.

And with that we've completed our first dock-ui component. Of course it's very basic right now but I leave the upgrades for you and future me. 😊

Thanks for reading! 🖖

00 Intro | Building 🚧 Dock-UI: Custom Tailwind CSS components for H010SPACE

shecodez — Tue, 16 Nov 2021 19:38:26 +0000

Every since I was introduced to Tailwind CSS - A utility-first CSS framework - I have wanted to build my own flavor of custom UI components with it. Even with so many wonderful UI component frameworks and libraries out there, some may have a few component styles I like, but none have all and only the components I like / find useful.

So, I have decided to document building a complete set of my own custom components called Dock-UI.