DEV Community: Monica Macomber

Build & publish your own private npm package for free

Monica Macomber — Sun, 26 Apr 2020 23:24:02 +0000

Note: This is a real example, not a tutorial on how to print "hello world" with an npm package. So buckle up buckaroo. 🤠

Do you want to easily share code between projects? Do you want to keep that code private but avoid the monthly fee for privately publishing to npmjs dot com? Then this is the tutorial for you.

We'll be building an npm package, adding JavaScript and CSS, uploading to a private git repo on Bitbucket and making a simple project to test the package with.

Final product: https://github.com/mocasalter/npm-package-demo

When we're done your package will accessibly✨ hide outline focus styles for mouse users but show them for keyboard users*. Like this:

Pre reqs

I assume that you know how to use the command line, have the npm CLI and NodeJs installed and know how to use them, and have git installed and have a decent grasp of how it works.

1. Start a new package

In your CLI, run these commands to make a new folder, navigate into that folder and initialize a new npm package.

mkdir smart-focus-ring
cd smart-focus-ring
npm init -y

Make a new folder called lib and a new file called index.js. Index is the default entry point file for an npm package, and lib will hold the custom files.

mkdir lib
touch index.js

Then open the smart-focus-ring folder in a text editor. If you have Visual Studio Code installed you can run the command $ code ..

Open package.json and add this files array. That will ensure the lib directory is downloaded whenever the package is installed.

{
  "otherStuff": "",
  "files": [
     "lib"
  ]
}

2. Add JavaScript

Create a new file in lib called smart-focus-ring.js and paste in this code.

function handleFirstTab(e) {
  if (e.keyCode === 9) {
    // the "I am a keyboard user" key
    document.body.classList.add('user-is-tabbing');
    window.removeEventListener('keydown', handleFirstTab);
  }
}

function smartFocusRing() {
  window.addEventListener('keydown', handleFirstTab);
}

module.exports = smartFocusRing;

It adds a class user-is-tabbing to the body when the user hits the tab key.

That last line module.exports exposes the smartFocusRing function as a module so we can use it in index.js.

3. Export the function

Now import smartFocusRing into index.js.

const smartFocusRing = require('./lib/smart-focus-ring.js');
module.exports = smartFocusRing;

module.export-ing from the package's entry point (index.js) makes smartFocusRing available to any project that has installed the smart-focus-ring package.

4. Add CSS

Now add CSS to make the style changes based on whether the user-is-tabbing class is present on the body.

In the lib folder, add a new file called styles.css and paste in this code.

/* Hide the focus ring until we know it's needed */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

.user-is-tabbing button:focus,
.user-is-tabbing input:focus,
.user-is-tabbing select:focus,
.user-is-tabbing textarea:focus {
    outline: 2px solid #7aacfe !important; /* for non-webkit browsers */
    outline: 5px auto -webkit-focus-ring-color !important;
}

Your directory should look like this.

└───lib
│   │   smart-focus-ring.js
│   │   styles.css
│   index.js
│   package.json

5. Publish to Bitbucket

At this point you could publish to npm if you wanted to but there's a monthly fee for private packages so we'll use Bitbucket instead.

Run these commands to create a new repo inside the smart-focus-ring folder.

cd /path-to/smart-focus-ring
git init
git add .
git commit -m "Initial commit"

Then create an account on bitbucket.org and a new, private git repo on Bitbucket.

Run these commands to upload your local repo to Bitbucket.

git remote add origin git@bitbucket.org:YOURUSERNAME/smart-focus-ring.git
git push -u origin master

And you'll see a warning that looks something like this.

This is where things get interesting.

SSH keys

That warning comes up because you haven't given your computer permission to use your private Bitbucket repo yet. To do so, follow Atlassian's walk through on setting up SSH keys for Bitbucket for your operating system.

...Or if your privacy isn't that important, you can go to your Bitbucket repo, select Settings and uncheck the box for "This is a private repository."

Then run this command again and that warning should be gone.

git push -u origin master

6. Make a test project

Create a new project folder, initialize npm and make some files.

mkdir tester-project
cd tester-project 
npm init -y
touch index.js
touch index.html

Add some html to index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tester Project</title>
    <style>
        body{font-family:"Open Sans",sans-serif;}
        button{border:none;border-radius:0;padding:0.65em 1.2em;cursor:pointer;color:#fff;background:#8d6e91;}
        button:focus{background:#AB90B2}
    </style>
</head>
<body>
    <h1>Tester Project</h1>
    <button type="button">button</button>
    <script src="index.js"></script>
</body>
</html>

And install a bundler so we'll have ES6 module support.

npm install -g parcel-bundler

Run the bundler and go to the url it gives you. Mine was localhost:1234.

parcel index.html

Now try clicking the button. See how it has a focus ring? Once the package is installed, that focus ring will only show if you've indicated keyboard navigation by hitting the tab key.

7. Import the module

Install the package using your Bitbucket user name.

npm i git+ssh://git@bitbucket.org:YOUR-USER-NAME/smart-focus-ring.git

Import the smart-focus-ring assets into the index.js file and call the smartFocusRing function.

import smartFocusRing from 'smart-focus-ring';
import './node_modules/smart-focus-ring/lib/styles.css';
smartFocusRing();

Then run Parcel and go to the url it provides.

parcel index.html

Now if you click the button the focus ring will be gone, but it will appear when you hit the tab key. All thanks to your npm package! Congratulations! 🥳

*As seen in Removing that ugly :focus ring (and keeping it too).

What are your favorite portfolio sites for devs?

Monica Macomber — Fri, 07 Feb 2020 00:14:05 +0000

I'm looking for some portfolio site inspiration! I'd love to see your favorite sites by other developers or or even even your own site if you're happy with it.

My site is overdue for a refresh and the hardest part for me is always deciding on a design. It would be great to have some more ideas.

What non-CMS tools would you use to make a small but growing website?

Monica Macomber — Mon, 09 Dec 2019 19:34:11 +0000

I'm making a website for my husband's construction company and the initial features will be:

A static home page
Blog posts that he can create and edit

But over time I'd like to add:

More pages
A dashboard for clients and employees, ideally available offline
Complex forms

My first thought is to start with the Hugo static site generator and add a React app later for the dashboard and forms.

But what tools would you choose?

I'd rather not lock myself into a CMS and I think that would more headache than help anyway. Thanks!

Recursion: An Illustrated Play-By-Play

Monica Macomber — Tue, 03 Dec 2019 16:50:02 +0000

Do you ever just need to see code in action? Reading about how it works is all well and good but do you like to see a breakdown of exactly what happens at step 1, 2, 3 and 4? Me too.

I'll show you an example of a recursive function in JavaScript and then walk you through how it works, featuring colorful automobiles and a seafaring vessel!

What is Recursion

A function is recursive when it:

Call itself.
Has a base case, some code that defines when the function should stop calling itself. Otherwise the function will keep calling itself infinitely.

Code Example

Let's say we have this array and we want the sum of its values.

const array = [1,2,3,4];

To get the sum, we need to add the first item of the array to next item of the array and so on.

function getSum(arr) { 
  return arr[0] + arr[1] + // etc.
}
// lol get some

But there are better ways to accomplish that besides manually listing each item of the array. One way is with recursion—having the function call itself.

To make the function recursive, we'll add the first item of the array to the remaining array after it's processed by the getSum function. We'll cover that in detail in the next section.

function getSum(arr) {
  return arr[0] + getSum(arr.slice(1)); // recursion
}

And when do we want to stop adding? In other words, what should our base case be? When we get to the last item of the array.

const array = [1,2,3,4];
function getSum(arr) {
  if (arr.length <= 1 ) return arr[0]; // base case
  return arr[0] + getSum(arr.slice(1)); // recursion
}
getSum(array);

So there's our recursive function. You can try a demo here.

It might seem like we don't need a base case since there is nothing to process after the end of the array, but you'll get a fun maximum call stack exceeded error if it's not included.

Now what exactly happens when the getSum function calls itself?

Illustrated Play-By-Play

The first time getSum runs, this line:

return arr[0] + getSum(arr.slice(1));

Evaluates into:

return 1 + getSum([2,3,4]);

The first item of the array added to getSum with the remaining array.

But we don't know the result of getSum([2,3,4]) yet, so what happens? The very first getSum function call, getSum([1,2,3,4]), is saved for later on the browser's Call Stack.

The Call stack is a data structure that keeps track of function calls that need to be run. Let's think of it as a ferry that will take cars, the functions, across a bay. It's a small ferry named HMS Call Stack that has a single, one way deck for cars.

So our first getSum function car backs into the ferry. It returns a value of 1 + getSum([2,3,4]) that will be processed later.

Then getSum([2,3,4] is called recursively. What will that function return? 2 + getSum([3,4]). Another car backs into HMS Call Stack.

This continues until we hit our base case, the last item of the array.

if (arr.length <= 1 ) return arr[0];

It returns the first and only remaining item of the array. So a getSum function car that returns 4 backs into HMS Call Stack.

Now that we've hit our base case, no more function cars will board the HMS Call Stack. Time for the ferry to cross the bay.

When the ferry docks, the last car to arrive (blue) has to disembark first. Similarly, Call Stack data structures are Last In, First Out (LIFO). The last function added to the stack will be called first.

If that last function car to board disembarks from the HMS Call Stack, what do we have next?

It returns 4 to the function that called getSum([4]). And when the next function is called:

It returns 3 + 4 to the function that called it. Notice how we're back to where we started? We're adding each item of the the array one at a time but in a more elegant way.

Finally, when the first getSum function car to board disembarks from the HMS Call Stack we have our total value. Ten!

And there we go. That's how a recursive function works as demonstrated by colorful automobiles and a seafaring vessel!

For Further Reading

Adding the values of an array together is a good introduction to recursion, but it isn't great for practical application. For more in-depth guides check out Algorithms in JavaScript or Recursion is not hard.

Cover photo by Zhang Fengsheng on Unsplash.