DEV Community: Tomide Oladipo

Import Javascript subfolder modules like a boss.

Tomide Oladipo — Sun, 17 May 2020 12:03:06 +0000

Have you worked on a project and find yourself writing code like this?

import { AddBank } from '../../../../pages/add-bank-account'

As projects get bigger, more folders get created, the deeper files are nested. Finding files can be a nightmare, and so does importing files. Having to import files like this might lead to some problems.

1. Inflexible code

At a glance from the example above, it might not seem like a pain to do this, but let's assume our folder structure changes, and we move add-bank-account.js to pages/bank/add-bank-account. We would have to update the import statement in every file it was imported, which can lead to problems, depending on how many people work on the project and how large it is.

2. Hard to build mental models.

While coding, we build mental models, that help us remember things faster. With this import structure, it's hard to figure out where this file is located at a glance, especially if we have multiple files with the same name add-bank-account.js in different parts of our project.

This problem becomes apparent when onboarding a new developer to the codebase. It would be a pain for the newbie to figure out the folder structure of the app and where things are located.

A better way.

What if we could import that function like this instead?

import { AddBank } from '@project/pages/add-bank-account'

If we change our file structure, all we have to do is change this to

import { AddBank } from '@project/pages/bank/add-bank-account'

you would agree with me that this is much cleaner and we wouldn't have the problems associated with the initial approach.

Ready to boss up?

Thanks to the beautiful brains behind Node and npm, we can install folders as node modules. This allow for interesting use cases, including solving our ... problem.

Boss up in 3, 2, 1:

Create a package.json in the folder you want to access, in our case /pages

{
"name" : "@project/pages",
"version" : "0.0.1",
"main": "index.js"
}

Install the folder as a dependency, by running npm install -S ./pages
The folder should be added to your dependencies in the root package.json

{
  "name": "boss-subfolder-import",
  "version": "1.0.0",
  "description": "Boss subfolder import",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "ayotomiiide@gmail.com",
  "license": "ISC",
  "dependencies": {
    "@project/pages": "file:pages",
    "express": "^4.17.1"
  }
}

Like and share this post if it was useful to you.

Let me know what you think about this approach in the comments below, whether you agree with it or not.

6 HTML tips you did not know.

Tomide Oladipo — Sun, 02 Feb 2020 18:16:36 +0000

Context

I build a lot of email templates, at work.

I wanted to be better, so I took a refresher course on HTML and CSS.

As I clicked on "Begin Course", I felt like a fraud.

"Bro, you have about 4 years experience building web apps, what the hell am I doing with learning HTML and CSS?", my inner voice said.

I felt the same way Shakespeare would feel if he was learning ABC,s after writing Macbeth.

If it's one thing every dev knows, it's that it's impossible to know everything. That's why we all read articles, do side projects, and Google search like crazy.

Half of all Google searches are devs trying to figure out how to center divs. Another 10%, are devs searching for differences between a left join and a right join.

Skipping the lamba, I learned a couple of things in my course that has improved my ability to write semantic HTML better, increasing accessibility in the web apps and email templates I build.

Since sharing is caring, below are the top 8 new things I learned.

1. Blockquote and Cite element

I never knew there were native elements for quotes, don't judge me. This group of elements is used to create quotes, the browser natively adds a margin to indent the content and styles the cite element.

2. Figure and Figcaption elements

I'll admit, I knew about the Figure element but never used it before. The Figure element is used for self-contained content, like code, images, videos, illustrations, etc. The figcaption tag is used to caption a figure and the browser loves it when you use captions.

"Tomide, abeg, all these one na yarns, why should I use the Figure element ?"

"You'd like for your web app to rank higher on search engines, right?"

"Yes"

"You'd like for your web app to rank higher on search engines, right?"

"You'd like disabled people to access content on your site with no problem, right?"

3. Create Detailed Emails with Anchor Links.

Alright, this is one I knew but totally forgot about, you could include the subject of an email in an anchor element using the mailto property.

4. Root relative paths

<img src="/path/to/image.jpg" />

This tells the browser, ignore the current path and start looking for the image from the root location of the website.

<img src="./path/to/image.jpg" />

This tells the browser, start from the current path and start looking for the image.

5. Embedding SVGs

There are many ways to embed SVGs, inline, img, object .

<!-- a inline embed -->
<svg width="212" height="224" viewBox="0 0 212 224" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M106 212C164.542 212 212 164.542 212 106C212 47.4578 164.542 0 106 0C47.4578 0 0 47.4578 0 106C0 164.542 47.4578 212 106 212Z" fill="#081928"/>
<path d="M211.5 106C211.5 164.266 164.266 211.5 106 211.5C47.734 211.5 0.5 164.266 0.5 106C0.5 47.734 47.734 0.5 106 0.5C164.266 0.5 211.5 47.734 211.5 106Z" stroke="#1B3554" stroke-opacity="0.0198992"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="212" height="212">
<path fill-rule="evenodd" clip-rule="evenodd" d="M106 212C164.542 212 212 164.542 212 106C212 47.4578 164.542 0 106 0C47.4578 0 0 47.4578 0 106C0 164.542 47.4578 212 106 212Z" fill="white"/>
<path d="M211.5 106C211.5 164.266 164.266 211.5 106 211.5C47.734 211.5 0.5 164.266 0.5 106C0.5 47.734 47.734 0.5 106 0.5C164.266 0.5 211.5 47.734 211.5 106Z" stroke="white"/>
</mask>
</svg>

<!-- img method -->
<img src="/path/dramon.svg" alt="Illustration of Dramon the Dog" Title="Dramon the dog"/>

<!-- object element -->
<object type="image/svg+xml" data="/path/dramon.svg">
    <!-- fallback embed -->
    <img src="/path/dramon.svg"/>
</object>

Which is the best way? Like many things in tech, it depends on your situation. To make this decision, there are 3 main factors to consider

Interactivity: The object and inline embed allows you to treat SVGs as HTML, animate, and manipulate SVG images with CSS and JS.
SEO: This is a little tricky, Google does not display inline SVG as part of the results in an image search, so if you want traffic from an image search, you should use <img title="image title" alt="SEO keyword"/> . To optimize inline SVG for a web search, you can use ARIA attributes and
Accessibility: Only <img /> support the alt and title attributes that are read aloud by screen readers.

6. Track element

The track element is used to embed text for Video content on a page.

It is best used for subtitles or closed captions but can be used for much more.

<video controls width="300" src="/path/to/your/video.mp4">
    <track default kind="subtitles" srclang="end" src="/path/to/track.vtt"> 
</video>

Thanks for reading, If you found this article useful, please share to your dev friends on socials.

Are there any other HTML tips you know about? Please share in the comments below.

Hi, I'm Tomide Oladipo

Tomide Oladipo — Mon, 15 May 2017 13:27:09 +0000

I have been coding for 2 years.

You can find me on GitHub as tomiiide

I live in Nigeria.

I work for Planet NEST

I mostly program in these languages: PHP & JS.

I am currently learning more about Javascript and React.

Nice to meet you.