Forem: tiff

Let's See Your Terminal

tiff — Tue, 16 Apr 2024 20:56:34 +0000

Since I've decided to pivot to another area of tech over the past two years, I returned here to DEV to clean out my over 1100+ Reading List articles and to follow new tags.

While pruning, I came across this article:

Can I see your terminal?

Saurabh Sharma ・ Feb 28 '18

#discuss #windows #mac

This got me thinking about my recent pivot, my switch to Neovim by way of LazyVim to write most of my code, and using tmux to keep terminal states alive after closing a session.

I've tricked out my terminal with iTerm2 being my editor of choice and seeing that old article made me want to share my terminal with the DEV Community.

Where I've been

It's been a long time. Life has not been easy. Like at all. Landing and losing two jobs, my mother to dementia, the best therapist I've ever had, my mobility for a whole year after a severe leg injury, and the townhome I rented before our startup cut the non-essential devs from the roster, has worn on me mentally and emotionally, so much so I am not even sure how I am still here. I am currently couch surfing with an old school friend's mom and she's been kind enough to let me setup my computer, TV, PS5, and homelab setup in this tiny room I am in. I am forever grateful for this because if it wasn't for her, I would have been on the street for a year plus as no family here has or is willing to help me out with shelter.

The room before I rearranged it for the 20th time this year

Regardless, I have pivoted to cybersecurity. While I still build software, I am no longer interested in the frontend part of software development and am strictly working in VMs for pentesting and SOC analysis and using Python, Rust, and Go to build tools for red team projects.

I also have a homelab stocked with used and new rack mounted NUCs, a TP-Link 24 port managed switch, a UniFi Dream Machine Pro Switch and AP, and some really old Raspberry Pis I bought a few years ago connected up to another old UPS unit till I move from here to the new place in a couple months.

My server rack with all components mentioned above.

You said something about a terminal, no?

Yes! Here is mine. Share yours if you want to in the comments. Or don't. I'm not your dad.

The linter I installed with mason.vim is really particular.

Can I use RSpec without Rails?

tiff — Thu, 29 Sep 2022 05:38:17 +0000

📸 Photo by Joshua Fuller on Unsplash

I am working on a static site generator using just Ruby and a few gems.

It seems that testing with RSpec is the way to go, however most tutorials or blog posts associate RSpec with Rails and I don't have, want, or need a Rails component to this; it's just a CLI tool.

My question is can I use RSpec with a pure Ruby CLI tool or should I try something like Minitest instead?

**Oh and maybe someone would be willing to take a look at what I've got?"

twhite96 / static-gen-ruby

A static site generator scaffold built with Ruby

Static Gen

A static site generator built with Ruby.

How to use:

🌀 Clone the repo at https://github.com/twhite96/static-gen-ruby.git or with GitHub CLI gh repo clone twhite96/static-gen-ruby
🏃 Run: bundle to install dependencies.
🎊 Have fun with it.

Motivation for this app

I wanted to show that I could build something, even if it was small, on my own, with little guidance.

Ben Halpern started a thread about his generator on DEV and I took his scaffold and ran with it.

🥞 Stack

Ruby and ruby-handlebars

👊🏽 Wins

Just getting the script running is a win for me, as I am not a Ruby dev at all.

😐 Difficulties

Ruby is a whole other animal compared to JavaScript and React. No semicolons, defining different methods (Ruby is class based, so there are more methods than functions in this instance), etc. I spent a whole month stuck on what this method did:

…

View on GitHub

What is meant by a "shape" in programming

tiff — Mon, 07 Mar 2022 22:14:09 +0000

Devs like to talk about imagining the shape of the code or data and when people say that, all I can think of is a circle and square, traditional shapes and I can't get past that mental model.

Whenever it is explained to me I'm lost and have no idea what it means.

Can someone help me understand this?

How Do You Pass a Method to gsub in Ruby?

tiff — Tue, 24 Nov 2020 04:14:30 +0000

I am building off of Ben's static site generator, and I wanted to DRY it up a bit.

One thing led to another and I built my own static site generator today

Ben Halpern ・ May 3 '20

#webdev #javascript #ruby #html

I have a few methods:

prod_build = ARGV[0] = "production_build"

# Read files

def page_partials(new_page_partial)
  pages = "site/#{page_partial}.html"
  new_page_partial = File.open(pages).read
end

def script_partials(new_script_partial)
  scripts = "site/#{script_partial}.js"
  new_script_partial = File.open(scripts).read
end

def style_partial(new_style_partial)
  styles = "site/#{style_partial}.css"
  new_style_partial(styles).read
end

puts page_partials()

I'm not a Rubyist, though I've dabbled in it. I assume these methods are correct, considering:

build_string = base_html
  # How do you use a block in a .gsub method???
  .gsub("{{ head }}" {page_partials})
  .gsub("{{ seo }}", seo_html)
  .gsub("{{ main }}", main_css)
  .gsub("{{ dev }}", dev_html)

I have a bunch of .gsub methods that expect a file, will change the file name, and in the build string, will create the file.

What I want to know is, as a JavaScript dev, how to pass these methods as parameters to the .gsub method in a block and if you can do this.

Shifting paradigms

I haven't looked at this code in a month as I was sick for that long. I have no idea what I was aiming for as such I am a little lost. JavaScript handles things much differently and I am trying to apply my js knowledge to Ruby and that seems to be a bad idea.

Thanks for helping, if you can.

Flexing My CSS Muscles by Adding A Bit of Panache

tiff — Wed, 11 Nov 2020 01:32:25 +0000

📸 Photo by Caspar Camille Rubin on Unsplash

Well, this was a ride. But I came out on the other end. The following is a case study of my journey adding low highlights to headings and links to this blog.

To add a bit more color and style to this blog by adding a low highlight to headers and links, much like you can find on the Rust landing page and Wes Bos' website.

Rust's landing page highlights

Wes' sense of design is always top notch. Always a bit of whimsy with his stuff.

Motivation

I wanted my blog to look cool and modern, fancy, like the big kids in this space. I also wanted to flex my CSS muscles, as that is one of my weaker areas¹.

Process

At first, I went into DevTools and copied the CSS from Rust's webpage. It didn't quite work. None of my highlights were showing and I didn't debug because I felt like something deeper was at play². I decided to skip this idea and go a different route.

I did a bit of Google-fu on how to get this effect and came across How to create a low highlight behind your text by Thirty Eight Visuals. It's a tutorial on how to do this on Squarespace but you can apply it to any website.

I copied this snippet of code:

 background: linear-gradient(180deg, rgba(255, 255, 255, 0) 65%, #ffc1d2 65%);
  display: inline;

created a class and added that to the h1 element in my page.html file. The resulting code looks something like this:

h1.highlight {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 65%, #ffc1d2 65%);
  display: inline;
}

This worked for all the h1 elements, but I also wanted the h2 and h3 elements to be highlighted. In this instance, it also only highlighted the h1 elements on the index page, which in my Jekyll theme is default.html.

I tried to add a class to all the header elements but it still didn't work. I found it difficult to actually target those specific elements with the .highlight class. If I added the class to all the header elements in one template, it didn't go across all the other templates in my _layouts folder.

Targeting inline header elements

I wanted all header elements to be highlighted on every page. It was difficult to accomplish this with the different templates that my Jekyll theme has in its _layouts folder.

I dug into the Sass in my theme and looked for any classes that targeted what I wanted and added the gradient to them but that also didn't work.

This image doesn't capture the half of it...

I decided to head back to Google, Stack Overflow and try to find something to help me with this.

MDN and the :not() selector

One of the things I wanted to do was exclude certain elements with certain classes. I found the :not() selector on MDN.

At first it confused me; what are we excluding?

At first I selected all of the elements I wanted to change and added the :not() selector, for instance p:not(.some-class) which highlighted all the p elements that did not have that class. This meant all paragraphs in the body were selected.

I tried to add the linear gradient to all the main hn selectors which meant even those elements that I didn't want selected, like the tags or header in the newsletter box had the gradient added to them which I didn't want. I also wanted to add the gradient to different links in the body. I did the same for the anchor elements, not realizing that the social icons and tags were also links, thus having all the social icons, tags, and other buttons included in the linear gradient selection. It was a disaster so I went back to the docs and reread them.

Decided :not() was not the right selector³

I tried to use :first-child() selector but then I'd need to select different elements that were not descendants to the parent element because this Jekyll theme and Liquid templating is hard to reason about when it comes to custom styles.

Looked up the :nth-child() selector and decided that wouldn't work either.

Sat on it for a few minutes, Googling and trawling Stack Overflow.

Back to basics

Went back to CSS fundamentals and realized I could just add a background: #fff to the elements that I didn't want the highlight to be included in. Learned more about specificity and how to order selectors along the cascade to target specific elements, for example:

p.site-info a {
  background: #fff;
}

to target all the p elements with the class site.info that have an anchor tag, a as a descendant I also changed the color of the text selection when a user selects text on most of the site with the ::selection selector.

Oh ...and a scrollbar

What good is a dev blog without a fancy scrollbar?

Got the idea from swyx and CSS-Tricks.

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background: rgb(6, 215, 217);
  background: linear-gradient(45deg, rgba(6, 215, 217, 1) 0%, rgba(255, 193, 210, 1.00) 35%, rgba(6, 215, 217, 1) 100%);
  border-radius: 3em;
}

scrollbar CSS-Tricks

Conclusion

CSS can be fun at times and sprucing up this blog with some fancy CSS tricks was quite an adventure.

Learning about specificity, different CSS selectors, and the like, made for a fun yet frustrating evening and I am glad I did it.

Edit:

I could have used a CSS variable instead of writing background: #fff everywhere, declaring the :root pseudo-class and declaring a variable like so:

:root {
  --non-highlights: #fff;
}

And then applying this variable everywhere I need, like this:

.non-highlights {
  var(--non-highlights)
}

I plan on implementing this soon.

Also, admittedly, my least favorite. ↩
Maybe something custom that I was missing. I just didn't feel like digging any deeper for such a minor enhancement. ↩
Ba dum tiss ↩

Real Artists Ship: Portfolio Finished

tiff — Tue, 10 Nov 2020 03:31:44 +0000

Long time no DEV! Been heads down but have some fresh content for y'all, originally posted on my blog.

📸 Photo by Anas Alshanti on Unsplash

This is monumental for me; I actually shipped something I said I was going to ship, and in less than a month. The thing I shipped is my new portfolio, built with Gatsby and based on the work of Jacob Martinez and heavily inspired by Brittany Chiang's portfolio which I gush over in this post.

It took me two weeks working on it every couple days for a couple hours a day. I took the gatsby-simple-portfolio theme, a simple starter, and made it my own.

The easy part

I wanted the color theme to look like Brittany's because, well, I really like it. I used a tool for Mac called Sip to grab the colors from her site and went to work.

The hard parts

There were several hard parts:

I wanted to have a downloadable resume in the resume button instead of a link to my resume site
I wanted to have navigation on the site instead of relying on scroll-reveal and scrolling all the way down the page
I wanted each nav item to scroll to its id on the page
I wanted a hamburger menu to show only on mobile

We'll tackle these in the next few sections.

1. Downloadable resume

For this I wanted a pdf file to download when users clicked the resume button. I didn't know or understand how people could download files, whether in Gatsby, or HTML in general.

I spent a lot of time in the Gatsby documentation learning about the filesystem and how to store files. The example showed a GraphQL query but I didn't need GraphQL; this was a static site with no moving parts. The theme did not include GraphQL because it was basic. I could have added all of that but why? I just needed to serve up some images, links, and a pdf; there was no content and no pages.

I went back a couple pages in the docs and found what I needed.

I created a download directory in the src directory and placed the pdf in there. I then needed a way to download the pdf from that directory.

First, I added the directory to gatsby-config.js using the gatsby-source-filesystem plugin:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `downloads`,
    path: `${__dirname}/src/downloads/`,
  },
}

Then I imported the pdf into the About.jsx component like so:

// some other imports
import resumeDownload from "../../downloads/resume.pdf";

Next, I needed to figure out a way to download a file from a React component.

Initially, I thought I'd need to come up with some convoluted system to do this but it was as simple as using an anchor tag and a couple built-in React props:

<span className="d-flex mt-3">
  <a
    target="_blank"
    rel="noopener noreferrer"
    className="cta-btn cta-btn--resume"
    download
    href={resumeDownload}
  >
    Resume
  </a>
</span>

Now, when the user clicks the Resume button, a copy of my resume will download with some sort of UUID at the end¹.

2. Navigation

Brittany Chiang's portfolio has an interesting navigation bar that I wanted to have. I picked a similar font to the one on her portfolio, and went about building the nav.

In order to get the numbers to be a separate color from the text, I wrapped the numbers in a <span> and added a class so that I could target just those spans:

<span className="menu-numbers">01.</span> Intro &nbsp;

which results in this nice navbar at the top:

It took a little bit of CSS-fu to get it aligned properly, trying to not rely on the react-bootstrap CSS that came with the theme².

3. Anchor tag scrolling

I forgot how this worked. I did some searching and found that I could add an id to the top node in the component tree and target each component that way:

<section id="projects">

and in the Nav

<a href="#projects" className="menu-text">
  <span className="menu-numbers">03.</span> Projects &nbsp;
</a>

Now, tapping any of those links in the nav take you to the section immediately instead of needing to scroll down the page³.

4. Creating a responsive hamburger nav

This was the hardest part about this project. I didn't use react-bootstrap for the navigation, which would have made this whole endeavor easier. Bootstrap has some utility classes that make adding a hambuger nav easy.

But since I wanted a custom nav, using Bootstrap wasn't going to work. So I built a hamburger nav from scratch. Only, it was hard.

I wasn't sure how to do it in a React app. I did some searching and came across a tutorial on CSS-Tricks that gave a step by step guide on how to build a hambuger nav⁴. The issue was I wanted the hamburger nav to show up only when the viewport reached 769px.

I searched some more and found that I could make the hamburger icon its own component, called Burger.jsx and a mobile nav called MobileNav.jsx. I used styled-components to create both of these, with code from a video that also used the same code in that CSS-Tricks article⁵.

Mobile nav

For the mobile nav we have a simple unordered list of menu items that link to the sections ids of the sections of the portfolio:

const StyledList = styled.ul`
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  li {
    padding: 18px 10px;
  }

  // More styled component CSS
}
`
const MobileNav = ({ open }) => {
  return (
    <StyledList open={open}>
      <li>
        <a href="#hero" className="menu-text">
          <span className="menu-numbers">01.</span> Intro &nbsp;
        </a>
      </li>
      <li>
        {" "}
        <a href="#about" className="menu-text">
          <span className="menu-numbers">02.</span> About &nbsp;
        </a>
      </li>
      <li>
        {" "}
        <a href="#projects" className="menu-text">
          <span className="menu-numbers">03.</span> Projects &nbsp;
        </a>
      </li>
      <li>
        <a href="#contact" className="menu-text">
          <span className="menu-numbers">04.</span> Contact &nbsp;
        </a>
      </li>
    </StyledList>
  );
};

Here we use the StyledList to create the MobileNav passing in an open prop to the styled list.

Then, in Burger.jsx we set open's state using the useState hook and setting the intial state to false:

const Burger = () => {
  const [open, setOpen] = useState(false);
  return (
  <>
    <StyledBurger open={open} onClick={() => setOpen(!open)}>
      <div />
      <div />
      <div />
    <MobileNav open={open}/>
    </StyledBurger>
    </>
  );
};

When someone taps or clicks on the burger part of the mobile nav, the new state returns true, and the mobile nav opens. Having MobileNav outisde StyledBurger tripped me up; I kept seeing two menus and no burger when testing on mobile. I moved the MobileNav inside the StyledBurger which worked and gave me the hamburger menu I wanted. But it was always there.

Media queries, breakpoints, and defeat

I tried to use media queries to get the hamburger menu to only show when the viewport reached 769px >. Nothing I tried worked.

I kept searching and, in a moment of defeat, because I spent a couple days trying to figure this out, I used a little library called react-socks, a React library to render components only on specific viewports. I was able to easily set the breakpoints I needed with an import and some nesting in App.jsx:

<BreakpointProvider>
  <Breakpoint large up>       
    <Nav />
  </Breakpoint>
  <Breakpoint medium down>
    <Burger />
  </Breakpoint>
</BreakpointProvider>

Couldn't get any easier than that.

Fixes

The navigation jumps a bit when loaded on mobile. I think it may have to do with the library or how I am implementing the mobile nav. In either case, I need to fix it.

There are some content fixes that need to happen as well so I will work on them this weekend.

Conclusion

I shipped a thing I said I was going to ship and I am proud of that. I am not done shipping new projects. I am starting another this weekend and when that one is finished I want to build a full stack app with Next.js.

I am a better dev and know much more now. Real artists ship. Now onto the next.

I'm assuming it is a UUID; a weird combination of letters and numbers follow after the filename. ↩
Which has its own Navbar component but I needed a custom one, and all Bootstrap navs are unappealing. I also just wanted it quick and without the need to override stubborn Bootstrap utility classes with !important littered everywhere. ↩
I am going to wrap each anchor tag scroll-reveal's <Fade> component for a smoother scroll experience. ↩
And with Hooks! ↩
The video creator didn't mention the article. It was a blatant copy of the CSS-Tricks article. Not sure how I feel about that, but will make sure to credit the author of the article and link to the repo. ↩

A LinkedIn Learning Playlist for Corporate Newcomers

tiff — Mon, 09 Dec 2019 00:31:45 +0000

If you're over 30 and have just made your way up from some place like Target as a cashier to having a nice, cushy dev job in a corporation, it can seem really daunting at first. I was out of my element for a good portion of the past 5 months.

I am a bad communicator and that means I hit some snags. I also know there is a lot to being a corporate worker, such as being assertive, pitching an idea, or giving a presentation.

Being broke and working fast food or retail jobs then working corporate is hard. There is leeway there that you just don't have at your retail job.

I was really struggling so I went on LinkedIn Learning, formerly Lynda.com, and made a playlist to help me and anyone else of a certain age navigate their first corporate job.

First Time In Corporate

LinkedIn is a necessary evil today. My company pays for us to use this to level up our skills but I still think it is worth the investment if you're struggling to adjust. It's helped me.

Have you used LinkedIn Learning? Are you a dev of a certain age just breaking into corporate? Tell me your story. I'd love to hear it.

A Simple Terminal Website with CSS and Typewriter.js

tiff — Sun, 08 Dec 2019 21:49:44 +0000

Just recently, I was searching for how to create a terminal-esque website, much like Jeremy Wagner's old site where you could run commands to open different links and places on his site.

It was really cool, and interesting idea: a command line interface to navigate a website¹. Neat!

I went in search of doing something similar however couldn't find any articles or tutorials on how to do it.

Hacker Noon

I found an interesting article on how to make a terminal landing page. It was kind of what I was looking for, but still had some flaws:

The UI of the site was decent but still not what I would want
I dug into the code on GitHub and decided that piping in a text file to do the typewriter effect was a hack I wasn't willing to put up with

The interesting bits, like the typing and the introduction to what the site is about, was something I could take with me.

GitHub diving

I came across this site, 0x44 and instantly knew I wanted my landing page to look like this.

I copied the CSS when I inspected the site², added a bit of my own, and went to work.

The HTML

It's just plain old HTML; a header and nav, footer, like so:

<header>
    <nav>
      <a href="/" class="underline">/about</a>
      <a href="your email here" class="underline">/contact</a>
    </nav>
  </header>
  <div class="site-title">
    <h1>
      <a href="/">twhite96:$</a><span class="cursor">█</span>
    </h1>
  </div>
  <div id="app" class="container">

  </div>
  <footer>

    <a href="https://github.com/twhite96/" class="svglink">
      //GitHub svg here
    </a>
    <br><br>
    © Copyright 2019 - twhite96.

  </footer>
</body>
</html>

Here we have a nav that will have the core links underlined. Then, we give the main part of the terminal header the class, site-title where we will give it its 1980s terminal vibe. You can find the block cursor with an online search.

The second div is where the cool stuff happens.

I am using a library for the typewriter effect called, obviously, typerwriterjs. In order to type everything we need out to the "console", we need an empty div we can target with enough space to type what we need. We can do that with an id of app. Then I added a class of container to center the content and make it responsive once we add content to the div. Then the footer is just an svg of the GitHub logo and a copyright.

The CSS

This is the look that Ian Pringle created with his site. The main pieces are:

a {
  color: rgb(0, 170, 0);
  text-decoration: none;
}

.underline:hover {
  color: rgb(0, 170, 0);
}

.underline {
  position: relative;
}

.underline::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: rgb(0, 170, 0);
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.underline:hover::before {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.cursor {
  animation: cursor 2s infinite;
  color: rgb(0, 170, 0);
  display: inline-block;
  width: 10px;
  margin-left: 5px;
  border-radius: 1px;
}

.centered {
  margin: 0px auto 40px;
  display: block;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.container {
  display: flex;
  align-content: center;
}

We want to give the links that 1980s terminal green. We also want to give the body a black-ish background, and use CSS transitions and transforms so that when you hover the links in the nav, you get the ease-in-out effect:

Using the transform-origin property allows us to specify where to start and end the transition, in this case, the bottom right of the link in the nav.

We give the cursor some love with the animation property and keyframes to give it a fade in and out look as it is blinking.

Finally, we make the text container, where our links will be displayed, a display of flex so it can shrink and expand as needed, and then we can align our links within that container center.

The problem I had was keeping the footer flush to the bottom, regardless of where the content was initiated.

I added this to the footer:

footer {
  text-align: center;
  position: fixed;
  bottom: 0;
}

positioning the footer at the bottom with the fixed property making it static, and giving the bottom of the footer a length of 0.

The JavaScript

Okay this isn't really all that difficult. Just following the docs allows you to get something up and running relatively quickly.

Insert the unpkg link in the area above the closing body tag, along with the file you're going to initialize the typing effect in:

<body>
  // Some code
  <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
  <script src="app.js"></script>
</body>

You initialize the Typewriter object like so:

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
  loop: false,
  delay: 75,
  autoStart: true,
  cursor: '█',
  strings: ['My name is Tiffany, and I am a frontend dev and wannabe hacker.']
});

We target the DOM node we want the typing to occur, this being the div with the id of app. Then we create a new Typewriter object, pass in our app variable, and add a few properties on the Typewriter object:

loop: do you want the typing to start over when it is finished?: Boolean
How long to delay the start of the typing: Number, in ms
Whether or not to start when a user initially loads the site: Boolean
Type of cursor you want, the default being the pipe: String
And the initial string you want to type out when the user first visits: Array of strings

This is simple enough.

To get the typing started, we can do something like this:

typewriter
  .deleteAll(1)
  .pauseFor(50)
  .deleteAll(1)
  .typeString('I work for <strong>[REDACTED]</strong> as a frontend dev, and I code, write, and shoot and edit videos on weekends.')
  .pauseFor(300)
  .deleteAll(1)
  .typeString('Find me online: <br />')
  .pauseFor(300)
  .typeString('<a href="https://tiffanywhite.dev">Blog</a> <br />')
  .typeString('<a href="https://www.tiffanyrwhite.com">Portfolio</a> <br />')

We delete all the initial strings using the deleteAll method which takes a number in ms for how long the delete animation should last. Then we can use the pauseFor method to pause for a specified time in ms.

The typeString method allows us to type whatever we want. Each method takes one string that can also contain HTML. This means in order to do what I wanted, I needed to create several typeString methods to create a list of links I wanted to show on different lines. It's an unfortunate limitation but with everything else you get in the library, it is not a deal breaker.

Check out all the methods that come with the library to see what you can do with it.

Wrap-up

In the end, you get my site, pard0x³.

It's a simple thing that looks cool and is easy enough to build.

His site doesn't have the command line interface anymore which is a shame, really. It was really innovative and made with pure HTML, CSS, and JavaScript. ↩
I give Ian S. Pringle, the dev, full credit in the source code. Don't worry. ↩
I wanted par@d0x but you know you can't do that in a domain and I forgot about that. ↩

The JavaScript Developer's Reading List

tiff — Fri, 15 Mar 2019 22:22:44 +0000

I made a little repo of books and articles for JavaScript devs to read that either I've read or have been recommended to me by other devs.

twhite96 / js-dev-reads

A list of books 📚and articles 📝 for the discerning web developer to read.

The JavaScript Developer's Reading List

A list of hand-picked books and articles for JavaScript developers

The problem 😕

There are a lot of web development reading materials out there, from books to videos to blog posts. How can you know what is actually worth reading?

Solution 😎

Here I have hand-picked web development/JavaScript books and articles I have personally read or have come highly recommended to me by other developers.

Things to think about 🤔

Free books. Who doesn't like free books?! But if you are able, buy the book if it is offered as an option. No worries if you can't. But if it helps the…

View on GitHub

If you have a suggestion, submit an issue or pull request.

Feel free to add your favorites but please keep it to JavaScript and maybe, once I get a feel for who wants what, I'll add other web tech like CSS and HTML. Also, make sure you've either read the book or it came highly recommended to you. I tried to avoid really bad books and articles from making it on this list so please keep that in mind.

Let me know what you think! 📚📝

Independent Contractor Taxes Self-Employment HALP

tiff — Thu, 21 Feb 2019 00:26:43 +0000

Looking on taking an internship and this internship pays as an independent contractor. I have no clue how this works, especially with taxes, and I need some help understanding this.

Can any freelancer or independent contractor break this down for me?
🙏🏾

What is the Difference Between a Function and a Method in JavaScript?

tiff — Tue, 05 Feb 2019 19:00:36 +0000

This article was originally posted on my blog.

Abby Snopek tweeted the following:

// Detect dark theme var iframe = document.getElementById('tweet-1080650513635569666-246'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1080650513635569666&theme=dark" }

In short: a method is a function that belongs to a class. In JavaScript, however, a method is a function that belongs to an object.

Everything in JavaScript is an object; a function is an object; an Array is an object. This is a quirky design decision, but because most everything in JavaScript is an object, we can do neat things with Prototypal Inheritance. The nice thing about prototypal inheritance is that we can manipulate several different properties on the prototype chain at once.

Give that above article a read for more information. Also, check out the Inheritance and the prototype chain article on MDN.

Update: I wrote this post without coffee and realized I should show some examples. Will rectify this after my java ☕.

Sign Up for the Newsletter. No spam. I hate that, too.

https://buttondown.email/tiffanywhite

Bugfix: Spelunking in Someone Else's Code

tiff — Sat, 05 Jan 2019 06:34:46 +0000

This article was first published on my blog.

I love CodeSandbox. It has pretty much replaced CodePen for me unless I am fiddling around with CSS or freeCodeCamp front-end projects.

I like going through the sandboxes and picking out different ones to look at, take apart, and figure out how they work.

While going through React Tutorial for Beginners by Kent C. Dodds on Egghead.io I decided I would look for sandboxes that correlate with the course as I was using Codesandbox to build out the stopwatch we were building in that course.

I found a sandbox which I forked and found it to be buggy.

Why didn't the stopwatch work? Glancing at the code for a few seconds, I saw some obvious problems right away.

Here is an example of the stopwatch being broken:

Bugfix 1

The first thing I noticed was on line 7:

class StopWatch extends React.Component {
  state = { lapse: 0, running: false };
  handleRunClick = () => {
    const startTime = Date.now() - this.state.lapse;
    setInterval(() => {
      this.setState({
        lapse: Date.now - startTime
      });
    });
    this.setState({
      running: true
    });
  };

Date.now() needs parentheses. Date is an an object constructor with .now() being a method. When we click on the start button, React doesn't know what to do here; we aren't setting the state of lapse to be a number, which we expect. By adding the parentheses, we get the start button to work. No more NaNms.

But now we have another problem: the timer won't stop.

I also removed the console.log(Math.random()); because I felt it was unneeded.

Bugfix 2: Getting the Stopwatch to Stop and Clear

Each time the button is clicked, we set the state to either running or lapse. The timer runs when we click start but clicking stop or clear doesn't seem to work. How can we fix this?

We can create a timer update function that accepts the current state. We can accomplish this by using native DOM APIs such as setInterval() and clearInterval(). We can run conditional logic to see if the timer is running:

//updater function
this.setState(state => {
  if (state.running) {
    clearInterval(this.timer);
  } else {
    const startTime = Date.now() - this.state.lapse;
    this.timer = setInterval(() => {
      this.setState({
        lapse: Date.now() - startTime
      });
    });
  }

and use Date.now() to get the timestamp in ms, assign it a startTime variable to compare the current time to the amount of time that has passed. When we click the start button, it sets the startTime to the current timestamp. We also need to return a new state as state is not mutable..

class StopWatch extends React.Component {
  state = { lapse: 0, running: false };
  handleRunClick = () => {
    //updater function
    this.setState(state => {
      if (state.running) {
        clearInterval(this.timer);
      } else {
        const startTime = Date.now() - this.state.lapse;
        this.timer = setInterval(() => {
          this.setState({
            lapse: Date.now() - startTime
          });
        });
      }
      // returning a new state to not mutate our original state
      return { running: !state.running };
    });
  };

Okay so this partially works. But as you can see below, if I click clear while the stopwatch timer is running, it doesn't clear the timer, and it also doesn't allow me to stop the timer, either.

How do we fix this particular bug?

If we look back at the previous code, we can see we are using clearInterval() to reset the stopwatch timer. In our current iteration, our handleOnClear method is just setting the state without clearing the previous state.

handleOnClear = () => {
  this.setState({
    lapse: 0,
    running: false
  });
};

We can fix this by adding clearInterval() and passing in the timer function to the handleOnClear method to clear the state.

handleOnClear = () => {
  clearInterval(this.timer);
  this.setState({
    lapse: 0,
    running: false
  });
};

This will give us the results we want.

Potential Problem?

There is a memory leak in this particular iteration. The timer will run until it is explicitly stopped in the DOM. We can use a React lifecycle method to stop all processes in the DOM when this component is mounted or unmounted.

For this we can use componentWillUnmount to tell React to unmount the component once it is done rendering.

componentWillUnmount() {
  clearInterval(this.timer);
}

Thoughts and Conclusions

I find it much more enjoyable fixing other people's bugs than my own. This was a fun exercise and I plan on doing it more regularly and blogging about it.

This stopwatch is a stupid simple component but if you are just scratching the surface of React like me, I am sure digging into something like this stopwatch and figuring out how it works is an excellent exercise and use of one's time.

Sign Up for the Newsletter. No spam. I hate that, too.

https://buttondown.email/tiffanywhite

Forem: tiff

Let's See Your Terminal

Can I see your terminal?

Saurabh Sharma ・ Feb 28 '18

Where I've been

You said something about a terminal, no?

Can I use RSpec without Rails?

twhite96 / static-gen-ruby

A static site generator scaffold built with Ruby

Static Gen

Motivation for this app

🥞 Stack

👊🏽 Wins

😐 Difficulties

What is meant by a "shape" in programming

How Do You Pass a Method to gsub in Ruby?

One thing led to another and I built my own static site generator today

Ben Halpern ・ May 3 '20

Shifting paradigms

Flexing My CSS Muscles by Adding A Bit of Panache

Motivation

Process

Targeting inline header elements

MDN and the :not() selector

Decided :not() was not the right selector3

Back to basics

Oh ...and a scrollbar

Conclusion

Real Artists Ship: Portfolio Finished

The easy part

The hard parts

1. Downloadable resume

2. Navigation

3. Anchor tag scrolling

4. Creating a responsive hamburger nav

Mobile nav

Media queries, breakpoints, and defeat

Fixes

Conclusion

A LinkedIn Learning Playlist for Corporate Newcomers

A Simple Terminal Website with CSS and Typewriter.js

Hacker Noon

GitHub diving

The HTML

The CSS

The JavaScript

Wrap-up

The JavaScript Developer's Reading List

twhite96 / js-dev-reads

A list of books 📚and articles 📝 for the discerning web developer to read.

The JavaScript Developer's Reading List

The problem 😕

Solution 😎

Things to think about 🤔

Independent Contractor Taxes Self-Employment HALP

What is the Difference Between a Function and a Method in JavaScript?

Sign Up for the Newsletter. No spam. I hate that, too.

Bugfix: Spelunking in Someone Else's Code

Bugfix 1

Bugfix 2: Getting the Stopwatch to Stop and Clear

Potential Problem?

Thoughts and Conclusions

Sign Up for the Newsletter. No spam. I hate that, too.

Decided :not() was not the right selector³