Forem: Nikki

Adding Syntax Highlighting to Code Blocks with PrismJS

Nikki — Wed, 24 Feb 2021 00:00:00 +0000

Note: this post uses Dev.to's syntax highlighting. To see PrismJS in action, please visit the original post on my blog

You've written code using an IDE like Visual Studio Code or Sublime. Maybe you've built a blog that uses code blocks like I have. You may have been wondering how to go from:

    .unstyled-code-block {
        display: block;
        position: absolute;
        color: none;
    }

to:

    .styled-code-block {
        display: block;
        position: absolute;
        color: inherit;
    }

What is Syntax Highlighting?

Syntax highlighting is a feature that displays text in different colors and fonts according to a category of terms. The intention of syntax highlighting is to create visual distinctions for readers. Text editors such as Visual Studio Code, Vim, and Sublime all utilize this feature. Code is far easier to interpret with these distinctions.

PrismJS

PrismJS is a lightweight syntax highlighter built with Javascript. PrismJS can be included with any website, but for this tutorial I'll be installing it with Gatsby.

Here's a link for more information on how you can use their library: PrismJS Docs - Basic Usage

Installation with GatsbyJS

Prerequisites - Beginner knowledge of Gatsby (or React)

Step One - Create a Gatsby Project

For this tutorial, we'll be using an easily customizable Gatsby Starter: gatsby-starter-blog. This starter includes support for a full-featured blog with optimized images and markdown posts. Create a new folder, open up a terminal, and run the following command to install:

gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

This creates a new Gatsby site with the name 'gatsby-starter-blog', we're then appending it to include this starter's source code from Github

Our new project structure should look something like this:

Along with our site's node_modules, package.json, and configuration files, we should also see:

content/ holds our image assets and markdown blog posts
src/ contains our website's components (layout.js, bio.js, seo.js), pages (index.js, 404.js), templates (blog-post.js, our single post template file), and our CSS files (normalize.css, style.css)
static/ contains static files that are generated upon build

Step Two - Install Required Plugins

Ensure that your new Gatsby site is working by opening up a terminal, navigating into your project's folder and run: npm start. This builds your Gatsby site which you can now view at localhost:8000

Next, we'll need to ensure that three important packages are installed in our project: gatsby-transformer-remark, gatsby-remark-prismjs, and prismjs. Our starter, gatsby-starter-blog includes these packages already, but if you're using a different starter or blog, please open up a terminal, navigate into your project's root folder and run:

npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs

gatsby-transformer-remark - Parses Markdown files using Remark

gatsby-remark-prismjs - Adds syntax highlighting to code blocks in markdown files using PrismJS

prismjs - PrismJS, our syntax highlighter

Step Three - Add Plugins to Config File

Next, we need to make sure we're referencing our new plugins in our Gatsby configuration. Open up gatsby-config.js and add:

    // In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            // Class prefix for <pre> tags containing syntax highlighting;
            // defaults to 'language-' (e.g. <pre class="language-js">).
            // If your site loads Prism into the browser at runtime,
            // (e.g. for use with libraries like react-live),
            // you may use this to prevent Prism from re-processing syntax.
            // This is an uncommon use-case though;
            // If you're unsure, it's best to use the default value.
            classPrefix: "language-",
            // This is used to allow setting a language for inline code
            // (i.e. single backticks) by creating a separator.
            // This separator is a string and will do no white-space
            // stripping.
            // A suggested value for English speakers is the non-ascii
            // character '›'.
            inlineCodeMarker: null,
            // This lets you set up language aliases. For example,
            // setting this to '{ sh: "bash" }' will let you use
            // the language "sh" which will highlight using the
            // bash highlighter.
            aliases: {},
            // This toggles the display of line numbers globally alongside the code.
            // To use it, add the following line in gatsby-browser.js
            // right after importing the prism color scheme:
            // require("prismjs/plugins/line-numbers/prism-line-numbers.css")
            // Defaults to false.
            // If you wish to only show line numbers on certain code blocks,
            // leave false and use the {numberLines: true} syntax below
            showLineNumbers: false,
            // If setting this to true, the parser won't handle and highlight inline
            // code used in markdown i.e. single backtick code like `this`.
            noInlineHighlight: false,
            // This adds a new language definition to Prism or extend an already
            // existing language definition. More details on this option can be
            // found under the header "Add new language definition or extend an
            // existing language" below.
            languageExtensions: [
              {
                language: "superscript",
                extend: "javascript",
                definition: {
                  superscript_types: /(SuperType)/,
                },
                insertBefore: {
                  function: {
                    superscript_keywords: /(superif|superelse)/,
                  },
                },
              },
            ],
            // Customize the prompt used in shell output
            // Values below are default
            prompt: {
              user: "root",
              host: "localhost",
              global: false,
            },
            // By default the HTML entities <>&'" are escaped.
            // Add additional HTML escapes by providing a mapping
            // of HTML entities and their escape value IE: { '}': '&#123;' }
            escapeEntities: {},
          },
        },
      ],
    },
  },
]

Step Four - Include a CSS Theme

PrismJS offers eight different themes to choose from or you can create your own using CSS. I'm using Prism's 'Tomorrow Night' theme for this blog. You can see the different theme options in action on the PrismJS homepage: (https://prismjs.com/)

To use a theme, just require its CSS file in your gatsby-browser.js file:

    // gatsby-browser.js
    require("prismjs/themes/prism-tomorrow.css")

Including the theme's file in our gatsby-browser.js allows us to use this CSS along with our existing stylesheet.

Here is a peak at this section of my blog's CSS file:

/* My initial styles with custom scrollbar 
code blocks without language specification will
use this instead of PrismJS 
*/
code {
  background-color: #4f4543;
  color: #f8f5f2;
  padding: 8px;
  border-radius: 3px;
  word-wrap: break-word; 
  letter-spacing: 1.15px;
  font-size: 14px;
} 

pre code{
  display: block;
  padding: 1rem;
  margin: 1.5rem auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  line-height: 1.5;
  max-width: 70vw;
  min-width: 300px;
} 

pre code::-webkit-scrollbar {
  height: 1.25em;
} 

pre code::-webkit-scrollbar-track {
border-radius: 1.5px;
background-color: #8f2d56;
box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

pre code::-webkit-scrollbar-thumb {
height: 48px;
border-radius: 10px;
background-color: #FFB847;
box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

/* PrismJS Theme styles */
 pre[class*="language-"] {
   overflow: auto;
 }

 code[class*="language-"],
 pre[class*="language-"] {
   color: #ccc;
   background: #453d3b;
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
   line-height: 1.5;

   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;

   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;

 }

 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
   background: #453d3b;
 }

 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: .1em; 
   border-radius: .3em;
   white-space: normal;
 }


 .token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
   color: #999;
 }

 .token.punctuation {
   color: #ccc;
 }

 .token.tag,
 .token.attr-name,
 .token.namespace,
 .token.deleted {
   color: #e2777a;
 }

 .token.function-name {
   color: #6196cc;
 }

 .token.boolean,
 .token.number,
 .token.function {
   color: #f08d49;
 }

 .token.property,
 .token.class-name,
 .token.constant,
 .token.symbol {
   color: #f8c555;
 }

 .token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
   color: #cc99cd;
 }

 .token.string,
 .token.char,
 .token.attr-value,
 .token.regex,
 .token.variable {
   color: #7ec699;
 }

 .token.operator,
 .token.entity,
 .token.url {
   color: #67cdcc;
 }

 .token.important,
 .token.bold {
   font-weight: bold;
 }
 .token.italic {
   font-style: italic;
 }

 .token.entity {
   cursor: help;
 }

 .token.inserted {
   color: green;
 }

/* Additional styling from Gatsby -

 * Remove the default PrismJS theme background-color, border-radius, margin, padding and overflow.
 * 1. Make the element just wide enough to fit its content.
 * 2. Always fill the visible space in .gatsby-highlight.
 * 3. Adjust the position of the line numbers
 */
 .gatsby-highlight pre[class*="language-"] {
  background-color: transparent;
  margin: 0;
  padding: 0;
  overflow: initial;
  float: left; /* 1 */
  min-width: 100%; /* 2 */
}

Usage

We're not going to see any syntax highlighting until writing a code block in one of our posts. Navigate into one of the existing markdown posts (found in the blog/ folder within content) and write some code blocks.

Here's a helpful reference on writing with Markdown: Markdown Cheatsheet

Three backticks are used to denote a multi-line code block in Markdown. In order to use PrismJS, we need to include our code language of choice with the intial backticks, like so:

Final Considerations

PrismJS was easy to integrate with my existing Gatsby Blog and I plan to use it in other projects as well. There are additional options you can include such as line highlighting, line numbering, adding a Shell prompt, showing code differences, or line hiding. For more on how you can use PrismJS, please visit Gatsby's extensive documentation: gatsby-remark-prismjs

I would also recommend testing your blog with a Contrast Checker tool in your browser before publishing. This is especially helpful if you plan to make changes to your PrismJS styles but want to also ensure accessibility guidelines are met. WebAIM Contrast Checker

Resources:

Styling with text-decoration

Nikki — Sun, 07 Feb 2021 00:00:00 +0000

Text-decoration is a great way to emphasize text on a webpage. I use the CSS property often for headings or elements that receive focus, such as buttons or anchor tags.

Text-decoration

Text-decoration is shorthand for the following properties:

text-decoration-color: sets the color of the decoration, otherwise the color of the text is inherited
text-decoration-line: sets the type of decoration that is used; the options are: underline, overline, and line-through
text-decoration-style: sets the style of the line that is used for the decoration such as solid, double,wavy, dashed, or dotted
text-decoration-thickness: sets the thickness of the line used for the decoration

You can use text-decoration with a single property: text-decoration: underline;

Or with multiple properties on the same line: text-decoration: underline solid #444 5px;

Text-underline-offset

Sometimes, the text-decoration line is obstructed with letters. You can use the property text-underline-offset to move the line up or down:

In the following image, the property is used to move the line down slightly:

Keep in mind this must be declared outside of text-decoration because it's styling the line itself and is not a text-decoration property

Conclusion

Along with text-shadow, border, and color, text-decoration is an excellent way to bring attention to various elements of your website. I created a CodePen to demonstrate a few of the different ways we can use this property:

Here is a link to the pen: codepen: text-decoration

Resources:

MDN docs: text-decoration

WCAG 2.1 - Using visual cues to convey information

Customizing the scrollbar with CSS

Nikki — Tue, 19 Jan 2021 15:17:15 +0000

Have you ever noticed the intricacies of the websites you visit? You can style just about every pixel of it, including the scrollbar. I was curious about how to go about this and found that it could be accomplished with just a few lines of CSS.

Here's what we'll build in Codepen:

Link to the final project: CodePen

Three boxes containing overflowing text content will all be scrollable but styled differently. The first <section> will have content be scrollable while the scrollbar itself is hidden. The second <section> will have a styled scrollbar that is always visible. The third <section> will have a styled scrollbar but only display it when the <section> is focused upon.

Create the three sections with text content

First, create three <section> elements and within those sections create a paragraph containing a long string of text (I used 4 paragraphs of dummy text, enough to create overflow). I also chose to label each <section> with an <h1>:

<section>
  <h1>Hidden</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

<section>
  <h1>Styled</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

<section>
  <h1>Hidden-until-focused</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
    <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

Create base styles with CSS

Next, you'll want to create some basic styling:

:root {
  --white: #f8f5f2;
  --teal: #00E8F0;
  --magenta: #CC0088;
  --purple: #54086B;
  --gradient: linear-gradient(to top left, var(--purple), var(--magenta));
}

body {
  display: flex;
  justify-content: space-evenly;
  background: var(--gradient);
  color: #121212;
  width: 90vw;
  height: 100vh;
  margin: 2rem auto;
}

section {
  display: block;
  background-color: var(--white);
  border-radius: 5px;
  height: 60vh;
  overflow-y: auto;
  margin: 0 1rem;
  padding: 2rem;
  border: 3px solid #121212;
}

p {
  line-height: 1.35;
  font-family: sans-serif;
}

I decided to use custom properties for the colors in this project and declared them first at the top of the file (this is optional of course). Next, we'll use Flexbox to style the <body> using display: flex and space the sections evenly using justify-content: space-evenly. I also added margin to the <body> so that the sections would be centered horizontally with a bit of space on top and bottom as well: margin: 2rem auto

body {
  display: flex;
  justify-content: space-evenly;
  background: var(--gradient);
  color: #121212;
  width: 90vw;
  height: 100vh;
  margin: 2rem auto;
}

The sections each have a height of 60vh with a border-radius of 5px for rounded corners. I added some padding to the <section> as well so that there is a nice amount of whitespace. You want to make sure you declare overflow-y: auto when styling your sections so that they are scrollable:

section {
  display: block;
  background-color: var(--white);
  border: 3px solid #121212;
  height: 60vh;
  border-radius: 5px;
  overflow-y: auto;
  margin: 0 1rem;
  padding: 2rem;
}

The only styling I chose for the paragraph elements was a line-height of 1.35 and changing the font-family to sans-serif:

p {
  line-height: 1.35;
  font-family: sans-serif;
}

Styling the scrollbar component

Now it's time for the fun part! In order to select the scrollbar, we'll use the pseudo-element ::webkit-scrollbar on our <section> element to indicate that we want to use a custom scrollbar and assign it a width of 1.25em:

Note: if you plan to use a horizontal scroll bar instead (or in addition to) you'll need to declare a height for the scrollbar

section::-webkit-scrollbar {
width: 1.25em;
}

Next, we can style the 'track' of the scrollbar using ::-webkit-scrollbar-track:

section::-webkit-scrollbar-track {
  border-radius: 1.5px;
  background-color: var(--teal);
  -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

I added a small border-radius because the <section> container has rounded corners as well. You may also create an inner-shadow for the track using box-shadow and the keyword 'inset'.

Now that the sidebar and sidebar-track have been made we can add custom styling to the sidebar-thumb (this is the element that moves along the track):

section::-webkit-scrollbar-thumb  {
  height: 50px;
  border-radius: 10px;
  background-color: var(--magenta);
  -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

Once again, we've added border-radius for rounded corners and an inner-shadow on the element. Adding an explicit height here was also necessary because the height of the scrollbar-thumb adapts to screen size and becomes too small of a target on mobile devices.

Hiding the scrollbar

Remember, we want to hide the scrollbar on the first <section> while still maintaining scroll. To do this, simply target the element by its ID (#hidden) and write display: none;

#hidden::-webkit-scrollbar {  
  display: none;
}

Hiding the scrollbar until focused

Styling the third <section> was a bit trickier. We don't want the scrollbar to show unless the section has been focused upon. First, you must target the element by its ID (#inactive) and hide the overflowing content (this also hides the scrollbar!):

#inactive {
  overflow: hidden;
}

Next, target the element's :focus state and change the overflow of the y axis to auto:

#inactive:focus {
  overflow-y: auto;
}

If you click or tap on the third section, you should now see our custom scrollbar appear!

Making the sections tabbable and adding `:focus` styling

These next few steps are implemented so that the sections can be focused upon by keyboard users as well. The <section> element is not tabbable by default as is the case with input elements, buttons, and anchor tags. In order to fix this, I added a tabindex to each of the sections within the HTML:

<section id="hidden" tabindex="1"></section>
<section tabindex="2"></section>
<section id="inactive" tabindex="3"></section>

Next, custom styling can be used to indicate more clearly whether an element has been focused upon. For this project, I applied transition and :focus styles globally:

* {
    transition: all .3s ease;
}

*:focus {
  outline: 4px dotted var(--teal);
}

Finishing touches

You may also wish to add a short note as I have to the third <section> indicating that the user must tap to view the content:

<em>* tap to focus on small screens</em>

In our CSS file, we can hide this element on large screens using a media query:

em {
  display: block;
}

@media screen and (min-width: 769px) {
  em {
    display:none;
  }
}

Next, we should add another media query so that our content collapses when viewed on small screens:

@media screen and (max-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
  }

  section {
    margin: 1rem auto;
  }
}

First, we update our <body> element to use flex-direction: column. Next, adjust the margin on the <section> elements so that there is a vertical gap between them and they are centered horizontally: margin: 1rem auto;

Final HTML:

<section id="hidden" tabindex="1">
  <h1>Hidden</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

<section tabindex="2">
  <h1>Styled</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

<section id="inactive" tabindex="3">
  <em>* tap to focus on small screens</em>
  <h1>Hidden-until-focused</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
    <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

Final CSS:

:root {
  --white: #f8f5f2;
  --teal: #00E8F0;
  --magenta: #CC0088;
  --purple: #54086B;
  --gradient: linear-gradient(to top left, var(--purple), var(--magenta));
}

* {
    transition: all .3s ease;
}

*:focus {
  outline: 4px dotted var(--teal);
}

body {
  display: flex;
  justify-content: space-evenly;
  background: var(--gradient);
  color: #121212;
  width: 90vw;
  height: 100vh;
  margin: 2rem auto;
}

section {
  display: block;
  background-color: var(--white);
  border-radius: 5px;
  height: 60vh;
  overflow-y: auto;
  margin: 0 1rem;
  padding: 2rem;
  border: 3px solid #121212;
}

p {
  line-height: 1.35;
  font-family: sans-serif;
} 

section::-webkit-scrollbar {
    width: 1.25em;
} 

section::-webkit-scrollbar-track {
  border-radius: 1.5px;
  background-color: var(--teal);
  -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

section::-webkit-scrollbar-thumb  {
  height: 50px;
  border-radius: 10px;
  background-color: var(--magenta);
  -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}


/* hiding the scrollbar for the first <section> */
#hidden::-webkit-scrollbar {
  display: none;
}

#inactive {
  overflow: hidden;
}

#inactive:focus {
  overflow-y: auto;
}

/* use hidden-scrollbar type for 'body' */
body::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
  }

  section {
    margin: 1rem auto;
  }
}

em {
  display: block;
}

@media screen and (min-width: 769px) {
  em {
    display:none;
  }
}

That's it! We now have three scrollable sections each with custom styling 🎉

Wrapping things up

This is just the beginning of what you can do to style the scrollbars for your projects. There are a variety of pseudo-elements that can be used to customize each part of the scrollbar:

*::-webkit-scrollbar — the entire scrollbar.
*::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards).
*::-webkit-scrollbar-thumb — the draggable scrolling handle.
*::-webkit-scrollbar-track — the track (progress bar) of the scrollbar.
*::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
*::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
*::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.

One important factor to keep in mind is accessibility. According to MDN, it is not suggested to be used in production due to its incompatibility with some browsers:

MDN Docs - webkit-scrollbar

There is also another method being developed which I think is important to point out: MDN Docs - CSS Scrollbars

Here is an example from MDN:

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

In this example, we're using green for the color of our thumb and purple for our scrollbar's track (both declared using scrollbar-color).

And the HTML:

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

Current browser compatibility for scrollbar-color and scrollbar-width:

If you know of any other methods that can be used for customizing the scrollbar, please share in the comments. Thank you for reading!

Updates & Pandemic Projects

Nikki — Wed, 13 Jan 2021 14:09:47 +0000

I hope everyone's been staying safe and healthy during this pandemic! I'm trying to focus on learning as much as I can. Being a junior developer, I've been focused on coding daily and creating functional projects to add to my portfolio. In this post, I wanted to share a few things I've worked on (and why I chose the technologies I did):

Bootstrap Portfolio

Visit Portfolio

I rebuilt my portfolio in June to a new design using Bootstrap. I cut my coding time in half by switching to a framework (even with changes to the color palette and typography), and the new site is much more responsive and accessible. I included a sidebar for navigation on large screens and a card-grid layout for displaying projects:

Previous design (HTML & CSS only)-
Github

I cringe a little bit when looking back on old projects (performance was terrible in my old portfolio), but it truly is a necessary part of growing as a developer. I fully intend on revamping this portfolio again in the future, but for now I'm pleased with the design and content.

Wordpress Blog with Elementor

Visit Blog

One of my favorite things to do is spend time outdoors with my family. I wanted to create a personal blog to display a large amount of content. I decided to use Wordpress for this because:

I lacked experience with a CMS and wanted to create a site as if it were for a real client. Wordpress powers a lot of websites and I wanted to gain real experience using the platform.
I wanted to create a blog fast and spend less time on coding because I had a lot of content I wanted to use right away

Though I'm happy with how quickly I was able to get my blog up and running, I felt I had to write a lot of custom CSS and may have been better served using Bootstrap. I may rebuild the site in the future with a different tech stack (Javascript and the Wordpress API? Gatsby?). I did enjoy the features that could easily be added using plugins - such as the custom Google Map that was added to the category page 'Trips'. I was even able to customize the login page and admin dashboard.

React Blog with Tailwind and Sanity

Visit Blog

I saw a really great technical blog recently that I wanted to replicate and customize. Instead of using Jekyll, I created mine with React and Tailwind (I love Tailwind!) and deployed the site using Github and Netlify. I also found a great tutorial on Youtube that featured exactly what I was looking for:
Build a Portfolio Site with React and Sanity

Now, I wasn't planning to build a portfolio site, but this tutorial would also show me how to integrate with Sanity.io (more CMS experience!).

I'm pretty happy for now with the end result and even managed to upload my first post. My goal in creating a technical blog like this is to improve my documentation (for the sake of better understanding the technologies I use). I'm hoping what I can post may be helpful to those new to web development as well.

Moving forward, it seems that some of the functionality I'd like to add would be more easily accomplished with Gatsby. I'd like to be able to generate an XML file for use in RSS feeds and for my posts there to be automatically added here on dev.to.

Front End Projects with Tailwind

I've been working a lot with Tailwind this year. One thing that I enjoy about using a framework like this is that it forces me to be more conscious of my html tags (using <main>, <section>, or <article> instead of <div>). Of course that's always possible with Bootstrap as well, but I also enjoy the method of writing these styles within my markdown (and the css files are TINY).

Here are a few of the other pages I've made with Tailwind:

Cannabiz - Visit Site

Photography Portfolio - Visit Site

Tailwind Blog - Visit Site
My first Tailwind site

Thank you for reading this! If you have any input for me about my projects or want to share some of what you've done yourself, please feel free to do so 😊

Epilepsy and ES6- nevertheless, she coded

Nikki — Sun, 08 Mar 2020 12:16:50 +0000

Imagine you're at the office. You're sitting at your desk, debugging an app or building a UI. Your coworker suddenly falls to the floor and starts convulsing. They're having a seizure....what do you do? You roll them onto their side, protect their head from injury, but the shaking continues. Just when you thought things couldn't get worse, their breathing stops. You're a developer, not a doctor. Now what?!??

I've had epilepsy since I was 15 years old, almost 20 years. I've been that stranger-in-need on more than one occasion. At school, at work, at events, while driving....I can never predict when my next involuntary dance will be. I've crashed two cars and have hit my head on safes, doors, wall corners, bars, desks, and more. Some say epilepsy is an invisible illness, but I've had many painful bruises to prove otherwise.

I'm not one of those lucky people that is 'overcoming my illness' or 'living without boundaries'. My boundaries are seizure triggers and epilepsy will inevitably end up overcoming me. More than 1 in 1,000 people with epilepsy die from SUDEP- the sudden, unexpected death of someone with epilepsy. It is the leading cause of death in people with uncontrolled seizures. Did I mention I also have refractory epilepsy? Lucky me!

But seriously, chronic illness has a way of altering your perspective on life. Sometimes I wonder, when I'm camping with my family, playing ball with the dogs, or just debating politics in the morning....is it the last time? Sometimes I'll struggle to fall asleep; I'm envisioning my husband and kids at my funeral when I shut my eyes. Despite the negativity, I do feel that I enjoy life more overall...everything matters, everything means something.

So I plan. I prepare. I update my 'software' regularly. Much of my life with epilepsy is planning for the next big 'disc' failure.

Just this past Wednesday, I had another seizure. I stopped breathing for 45 seconds, longer than I knew I could hold my breath! But this time was different than the others: there were no hot fryers or grill tops to burn myself on, no hard corners to bump my head on - I fell directly onto my bed. That moment is what I've been planning for since 2015 when I first googled 'free web development courses'. At the time, I was a homeschool mom who had been denied disability assistance twice and didn't finish college because I became pregnant. I'd always relied on hard labor to earn a buck, working as a line cook, restaurant manager, and landscaper. But I was determined to work smarter, not harder, in an effort to extend my life.

Recently, I've been working to complete my portfolio website and have been finishing up courses on Udemy (check out The Modern React Bootcamp) and FreeCodeCamp. I also took a break to publish a simple Bootstrap site for my son's Science Fair project (an excuse to apply some of my skills): Testing Performance in Model Rockets. I feel very fortunate to be able to learn and create neat projects like this.

It's rare that I get excited about the future, but I am. Remote work is on the rise. The ability to contribute to the world, no matter your physical ability or location, is groundbreaking. It's changing the world - changing my world anyway.

Having my brainwaves recorded by an EEG head cap, 2017

My dream is to code while drinking percolator coffee at sunrise with birds chirping in the distance

Am I a Developer yet?

Nikki — Mon, 27 Jan 2020 19:23:40 +0000

Today I hit a big landmark in my journey transitioning into Web Development: I received a call this morning from a recruiter regarding a Junior-level Front-End-based role. I've been studying Web Design, App Development, CMS, front-end, back-end (you name it, I've tried it) for almost 5 years now. Prior to my interest in all things web-related I was a line cook, food server, restaurant manager, customer service representative and homeschool mom. I've gotten great at managing time, creating schedules, handling money, and assisting customers. But did I ever think I'd be capable of eliminating bugs from software or creating responsive web sites? Not so much. My brother was the technical one growing up, playing PC games and taking apart computers. It was never 'supposed' to be for someone like me. However, in High School and College I had a lot of interest in Graphic Design and often dabbled with Illustrator and Photoshop. On most days, I feel VERY comfortable playing with code; it feels as if it's something I shouldn't have waited until my 30's to pursue. On the other days, I still see myself as an outsider.

Fortunately, before my landmark phone conversation this morning, I had read a great blog post which specifically addressed this psychological problem:

https://dev.to/juanfrank77/how-to-forget-about-imposter-syndrome-1d79

Do I feel I'll be offered the job? Not necessarily. However, it was a great experience to be forced to look back on the progress I have made and I'm excited to continue learning new skills. Those Bootcamps, code-alongs, projects, and code snippets really do add up over time! So am I a Developer? Of course! And here's my justification:

ONLY YOU CAN DECIDE WHO YOU ARE

Imposter Syndrome is real, and we don't deserve to do this to ourselves. Of course you're still learning, everyone is. It's important to note that the learning never stops. You won't just become an expert one day and seize to ask any more questions. There'll always be something new to learn. Burnout is common and can also add to feelings of self-doubt. I try to reserve one whole day each week as a break from programming. It usually isn't a 'whole' day, and I can't help myself from working on codepen projects here and there...but the break from courses and documentation is great for rejuvenating both mind and body.

This was my first post. Too often, I refrain from socialization and the lack of communication has hindered my growth. One of my goals in further developing myself is to ask more questions, share more input, and connect with more people.

Thank you so much for reading!