DEV Community: Kehinde Adeleke

Use Precise types instead of String types

Kehinde Adeleke — Sat, 19 Aug 2023 19:26:26 +0000

Introduction

We have all been there. Throwing any at function parameters and object keys because we couldn't be bothered to type it precisely. I did that for a recent project and it was a cop out.

The problem is that with any, we lose many of the benefits typescript offers us. The compile time error checking that can catch hard to detect bugs and also the wonderful code completion.

Today, I am gonna be discussing precise types and how they can make our code better.

Precise Types

A bit of a background. I am currently on Item 33 of Dan Vanderkam's effective typescript.

Item 33 argues that string types are too broad and open up code to a lot of errors.

We should consider more precise alternatives that specifies the type of data we expect.

Example

The best way to illustrate this is with an example.

Suppose, we have a utility function pluck.

The function of pluck is to pull out all the values for a single field in an object. The objects are members of an array.

Properly typing the pluck function can help in making sure that we only use existing keys
that exist in the object.

To illustrate this properly, I am going to use 4 variants of the pluck utility function. It would range from untyped to typed.

Let's go:

The pluck function without any type is this:

Version 1:

  function pluck(records, key){
    return records.map(record => record[key])
  }

Here the function is untyped and while it works at runtime, it opens up a can of errors.

We aren't sure that the key we use actually exist, which means we might be trying to access a property not present. The return type is also an any[]. It is practically still valid TS code but without any benefits.

Version 2:

  function pluck(records: any[], key: string): any[]{
    return records.map(record => record[key])
  }

Here in the second version, it is slightly better but the string type is still too broad.
Remember that this string could also not exists on the object we need to access. The any type is also problematic.

Version 3:

  function pluck<T>(records: T[], key: string){
    return records.map(record => record[key])
  }

We make the function a generic so that it can infer the specific type of array it is. The type checker complains.

We cannot use a string key on an unknown type.

The problem here still persists and this is because string is still broad. It is stringly typed. The return type is also still any[]

Version 4:

  function pluck<T>(records: T[], key: keyof T){
    return records.map(record => record[key])
  }

We are making some progress here. We constrain the key so that it is only an existing key on the object. Typescript infers the return type is not specific enough.

If you mouse over the function, the return type is T[keyof T][]
In this case, if there are four keys with values of type number and string, the compiler infers the returned array as a string or number array.

It can be better.

Version 5:

  function pluck<T, K extends keyof T>(records: T[], key: K): T[K][]{
    return records.map(record => record[key])
  }

Perfecto. In this final function, we have a generic function with two parameters. T and K which denotes the object and a key of the object respectively. The second parameter K is a subset of keyof T.

We constrain key so that it is only a key that exists on the object.

Using this variant, we get straightforward autocomplete of the known properties in the object.

Here is a concrete example:

Using the TS playground, we see that we get nice autocomplete.

Check it out in the Live playground

Conclusion

Typescript offers a lot of quality of life improvement for DX. Even though it can be tempting to throw any all over the place, using precise types benefits far outweighs the trouble of thinking a bit more about our types.

The effective typescript book is great. Check it out as well here

Track your interests over time

Kehinde Adeleke — Tue, 18 Jul 2023 01:16:06 +0000

What I built

Interests tracker.

I built Interests in 8days with no prior knowledge of Refine or MaterialUI.

Category Submission:

Best Overall Project
Most Visually Pleasing
Best Project built using Supabase as the main data provider for the refine app.
Best Project built using Material UI as the main UI framework for the refine app.

App Link

Link

Screenshots

Description

Interests is an easy-to-use app for tracking your interests over time. If you have recently watched a fantastic movie, read an exciting book or listened to a lovely song you would like to remember, use Interests🎉.

Interests helps you save the memories that matter.

Link to Source Code

Source code

Permissive License

MIT

Background (What made you decide to build this particular app? What inspired you?)

MMy Go-to tracking app has always been my notes on my iPhone. Finding what I have saved on it takes time and effort. I wanted an easy way to find the interests I enjoyed at a particular time, which is how Interests was born.

After conducting user research with my friends, I realised that this is something people could find helpful.

The MVP is ready to use, but the possibilities for what Interests could be is limitless.

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

This hackathon is my at creating a product using Refine with materialUI.

Refine was used as the frontend framework, Material UI as a UI library and supabase for both auth and as a database

Refine provides a solid foundation for bootstrapping CRUD apps which I was able to utilize. The authProvider and dataProvider supplied by the swizzle CLI help abstract away the complexity of creating auth and database connection.

I have used Supabase in the past but have yet to be as integrated as this. Refine helps make working with supabase a breeze.

I also appreciate the React hooks provided by the team to interact with the supabase client and request the supabase database.

MaterialUI removed all the complexity of styling and overall layout. Initially, the theming feature was a bit hard to grasp, and I was overwhelmed by the complexity, but after reading through the docs for a couple of days, I got the hang of it.

The whole stack enabled me to realize this product's vision in 10 days.

Building this app in Refine has expanded my skillset and my proficiency in technology.

This is v1, I have started work on improving the design and the overall feel of the app.

I am also going to conduct more user research in order to add features as well as release a cross platform app in the future.

Your interests deserve to be remembered.

Additional Resources/Info

A couple of resources I found useful include:

How to add Emmet autocomplete for .js files in React

Kehinde Adeleke — Sun, 22 May 2022 15:36:31 +0000

I recently ran into a problem where Emmet autocomplete would work for files ending with the .jsx extension but break break for files with the .js extension.

To solve it, do the following

Click on the settings icon on the bottom left corner.
Click on the document icon to access the settings json file
Add the following lines to the end of the settings.json file

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true

and voila, Your autocomplete should work as expected.

React design patterns

Kehinde Adeleke — Thu, 19 May 2022 22:05:12 +0000

I am about to take a LinkedIn learning course on React design patterns.

This blog entry will serve as a public note for others. A lot of people can't access the course since it is tied to a premium subscription. I hope my notes at least help you understand the nitty gritty of writing design patterns in your react applications.

What are design patterns?
Shaun defines design patterns as effective solutions to common application development challenges.

Common Challenges in creating react apps which we would be applying design patterns to include:

Creating reusable layouts
Reusing complex logic between multiple components
Working with forms -- specifically why I have a gist on it
Incorporating functional concepts into our code -- I think this would include not mutating state and stuff.

First, we are gonna look at Layout Components.
Layout components are react components that have a primary function of arranging other components on the page.

Normally, when we create a component, we include the container div and the styles along with it.
an example of that is:

<div styles={...}>
   <h1>Component Code...</h1>
</div>

We could instead use a layout component that would have the structure and the styles of our app or a specific part of the app and then render children inside of it

<div styles={...}>
  {children}
</div>

-- split the layout styles into their own component
-- display the component itself inside the layout component

why do we do this?

It's in a bid to separate the component itself from where it's being displayed on the page.

In Summary:
The idea of layout components is that our components shouldn't know where they are being displayed.

Here's a sandbox illustrating it better:

Layout components should be written in such a way as to enhance developer experience. Remember, the goal of any software design pattern is not only to solve the problem but to also reduce complexity while doing it.

General thoughts: Apollo's GraphQL's Course

Kehinde Adeleke — Sun, 15 May 2022 22:39:05 +0000

This is a public journal that would include stuff I think are necessary for me to remember.

Previously I have been tweeting about it, but then Twitter is a private owned platform and anything could happen to my account.

Now onto the good stuff:

On the Client side, the useQuery hook returns an object with 3 useful properties. They are destructured. The first, loading, indicates whether the query has completed and results have been returned. The second, error is an object that contains any errors that the operation has thrown. The third, data contains the results of the query after it has completed.

To set variables in our Query, we declare them in the second parameter of the useQuery hook, inside the options object.

Code Example using React JS:

import { useQuery, gql } from '@apollo/client'

export const GET_TRACK = gql`
  query getTrack($trackId: ID!) {
    track(id: $trackId) {
      id
      title
      author {
        id
        name
        photo
      }
      thumbnail
      length
      modulesCount
      numberOfViews
      modules {
        id
        title
        length
      }
      description
    }
  }
`

const Track = (props) => {
   const {loading, error, data} = useQuery(GET_TRACK,{
       variables: {prop.id}
    })

return(
    //render UI
  )
}

I had to create a schema for the module type for a track, get the data from the dataSource and structure the resolver to return the required field.

I'd say the hardest part was the resolver but with some thinking, I was able to figure it out.

What I learned is that: Your resolver function should follow your schema defined. Not just willy nilly stuff.

First the schema:

  type Module {
    id: ID!
    "the title of the particular module"
    title: String!
    length: Int
    "the url of the particular module"
    videoUrl: String!
    "the content of the particular module"
    content: String!
  }

and then defining the Query that would return the required module when supplied with an argument

type Query {
    "Query to get tracks array for the homepage grid"
    tracksForHome: [Track!]!
    "a track id would return a details about a specific track"
    track(id: ID!): Track
    "a module would return details about a specific module"
    module(id: ID!): Module!
  }

the dataSource for the current application is a RESTAPI so I had to use a method to get the module from that.

I did that by writing:


getModule(moduleId) {
    return this.get(`module/${moduleId}`)
  }

and finally the resolver. This part got me so confused because of

the parent parameter
the args parameter

I still haven't gotten the grasp of the arguments resolver functions need so it took me a bit to think through my Schema and how the Query is going to be structured.

After that, I solved it and wrote the following resolver function

 module: (_, { id }, { dataSources }) => {
      return dataSources.trackAPI.getModule(id)
    }

//nested in a query parent

I just read about Mutations and how they can serve as entry points into our GraphQL Api especially if we need to write data to our server.

A fill in the gap exercise on the Apollo website resulted in this helpful paragraph.

"Queries and Mutations are both types of GraphQL operations. Queries are read operations that always retrieve data. Mutations are write operations that always modify data. Similar to Query fields, fields of the Mutation type are also entry points into a GraphQL API."

Mutations can be easy or complex depending on the return value required and the fields being modified.

For example, a simple mutation can just have one return value. Like this:


type Mutation{
   addSpaceCat(name: String!): SpaceCat
}

This is because once we call the addSpaceCat mutation, we want the client to get the updated value of the SpaceCat we just mutated.

Sometimes, though, one mutation should return multiple values.

type Mutation{
   assignMission(missionId: ID!, spaceCatId: ID!): ???
}
//what should we return

and so because we need to return both, we need to create a new type. This type would include

code: an Int that refers to the status of the response similar to an HTTP status code.
success: a Boolean flag that indicates whether all the updates the mutation was responsible for succedded.
message: a String to display information about the result of the mutation on the client side. This is useful for us if the mutation is only, well partially successful and a generic error message won't tell the whole story.

with that, we then create a new type for our mutation respose.

type AssignMissionResponse {
   code: Int!
   Success: Boolean!
   message: String!
   spacecat: Spacecat
   mission: Mission
}

Regarding GraphQL Mutation:

We use hooks to send requests to our GraphQL API from a React client. To send a mutation, we use the useMutation hook. This returns an array where the first element is the mutate function used to trigger the mutation. The second element is an object with more information about the mutation, such as loading, error and data. This hook takes in a GraphQL operation as the first parameter. It also takes in an options object as the second parameter, where properties like variables are set.

How to Fix error with openai in your nodeJS app

Kehinde Adeleke — Thu, 12 May 2022 00:04:53 +0000

I was trying out openAI's api when I came across this error.

It was quite annoying. To solve it, you add the "type": "module" to your package.json file.

If you don't have a package.json file, use npm init -y" to create one.

With that, you should have this:

which should solve it.

but...something else might come up. Since you need your API key in a .env file to access the api, you would need to import the dotenv package.

after installing with npm or yarn, I used the require keyword to import it:

require('dotenv').config();

For some reason, that seems to throw another error:

It was very frustrating and stack overflow didn't seem to have a direct answer.

To solve it, change require to a normal import statement,

in this case it would be, import dotenv from 'dotenv/config'

the final code looks like this:

with that, you are done.

Understand Metamask: the basics.

Kehinde Adeleke — Wed, 30 Mar 2022 00:33:01 +0000

The browser-based wallet Metamask is a gateway to exploring Dapps and the world of Crypto. You need a wallet to explore innovation which includes:

Yet, the web interface can be daunting to wrap one's head around. In addition, it can be confusing if you haven't used an extension before, especially for carrying out financial transactions.

In this article, I aim to simplify the Metamask web interface so that you can understand what is going on.

This tutorial is not an in-depth tutorial. It will only break down the main features of the Metamask Interface.

Let's get started.

Click the extension in the top bar of your browser. It reveals a mini-window similar to the image below:

Let's take a look at the key features.

1. Connected network

By default, the network Metamask shows is Ethereum Mainnet.

The Ethereum network is the leading network for smart contracts, Defi, NFTS, and DAOs. Therefore, if you plan on transacting on the Ethereum network, you do not need to change this.

A developer working on a project on a different network like Polygon will need to change this.

A regular user might or might not need to change it.

For the scope of this tutorial, we will leave it as is.

2. Account Information

Beneath the network section lies another section. The highlighted circle is the account Info.

Accounts can have custom names that you set during the initial setup. For example, I have it set as Account 1.

Look a bit closer. You can see a set of random characters. For example, it is "0xAB*...359b" in the image above.

The set of characters is your wallet address. The wallet address is helpful for several tasks. The tasks include the following:

Receiving Eth
Minting NFTs
Using Defi Protocols etc.

Hover and Click the account info box to copy your address to the clipboard. The account info helps receive funds from others.

3. Connection Status

The connection status sits to the left of the Account Info section. It verifies your connection to a Decentralized application.

Decentralized applications have a "Connect wallet" feature. Once connected, the icon changes from "Not connected" to "Connected."

In the image below, the user is unconnected. The icon is grey with the text "Not connected" next.

Once connected to a Dapp, the icon and text change. It changes to a green icon with the text "Connected" next.

4. Account Balance

It's a wallet, and a wallet should show much funds is present.

The account balance section gives the amount of Eth and the equivalent value in USD. In the settings, you can modify the type of currency it shows. By default, it shows the ETH balance as the principal balance. Beneath that is the equivalent value in USD.

5. Financial services

Metamask is a wallet that provides three essential services. The services include:

Buying Crypto.
Sending Crypto.
Swapping Crypto

The image below shows these services and the icons:

Buying Crypto: Let's explore what these features are: Click on the Buy icon to buy some Eth. Clicking the icon shows services that offer you ETH for fiat currency.

Get some Eth with Wyre. You can get Eth directly into your account with your debit card.

Transat is an alternative method. It comes with the added benefit of using a bank transfer if you do not have a card.

The last option is a direct deposit. If you've both some Eth on an exchange like Binance, Kucoin, FTX, Buy coins, e.t.c, you can copy your address from the account info and send the ETH to it.

The methods above for funding your wallet all have their pros and cons. However, it is not within the scope of this article to discuss that.

Use whatever means is convenient and intuitive to you.

Sending Crypto: The send crypto feature is for transferring tokens from one wallet to another. The address could be yours, a friend's, or an exchange.

Always endeavor to double-check the address. Transactions carried out on blockchain networks are immutable, so they cannot be reversed once carried out and confirmed.

Swap Crypto: You can swap one currency for the other. However, swapping a currency on the Ethereum network is only works if the coin is on the Ethereum network.

Note that: You will have to pay network fees which cost quite a bit on the Ethereum network.

6. Available Assets

Metamask provides the feature of interaction with other Crypto apart from the native Eth token.

The Process of adding this to display can be daunting. Yet, it is helpful to know that you can.

In the image below, I have added the Bzz token. I can give out my address and receive BZZ through it. Receiving BZZ works because the BZZ token utilizes the Ethereum blockchain.

There are cases where you need to switch to a different network for specific Dapps. One example of that is the Polygon network to use the MATIC token.

This section includes the added benefit of showing the amount of tokens present.

7. Activity

The last feature is the activity tab.

The activity tab shows all transactions you have carried out through your wallet.

Let's explore the two transactions in the image below.

The first is an NFT mint. It has the title Mint. On the 25th of March, it occurred on a website titled www.721.so. There, I minted an NFT free of charge.

I can recognize that it is free because it cost me 0ETH.

The second is a transfer. In this transfer of tokens, I am the recipient. The title Receive indicates that. On the 25th of March, it occurred from an address with the characters: "0x153...c170".

The section adjacent to that shows the amount of Eth I received.

The activity tab fills up as you engage with more apps built on the Ethereum network. However, it is not limited to apps. Any outflow or inflow of funds is also registered and documented.

It helps provide an accessible overview of what happens and where.

Conclusion

The following features explored above are all you need to start with Metamask.

There are more in-depth features of using the wallet. We will explore this in a different article.

Thanks for reading.

How to setup a Metamask account.

Kehinde Adeleke — Mon, 28 Mar 2022 01:15:55 +0000

Metamask is an application you probably have heard of, maybe from friends or family or twitter. It is a browser-based crypto wallet that provides a "gateway to blockchain apps." Metamask helps users send and receive cryptocurrencies and explore decentralized applications(Dapps).

The definition above is a simplified definition of it. If you want to learn more, visit this link

Metamask is very useful if you need to create an account to try out a decentralized application or mint an NFT.

Setting up a Metamask account

Follow the steps below to create a Metamask account to mint that favorite NFT you love.

1. Download Metamask:
Metamask is a browser based wallet. You get it by installing a browser extension to your browser of choice. The official Metamask website is located at https://metamask.io

The landing page shows this:

Click on the Download now button:

I am currently using Brave browser, which uses the same Chromium engine as Google chrome. Hence, the "Install Metamask for Chrome" button.

Once installed, the extension logo resides on the top bar, adjacent to the search field on most popular browsers. Here is where it sits in the brave browser.

2. Create a Metamask account:
Click on the browser extension. The screen below pops up:

click Get started.

I assume you are a new user. With that, click on create a wallet.

Read through the terms and conditions of the extensions. Then, click on "I agree." The next page shows two fields.

A password and confirm password fields. The password you create helps to keep your account secured from unauthorized access.

You can make secure passwords for your apps with a password manager. A free, open-source example is Bitwarden

Once that is set up. Metamask shows a helpful video for keeping your account secure. Watching the video is the most crucial step in creating your account. Please, pay attention to this detail.

After reading through, click next. If you just skimmed through the content, here is a summary. Your secret phrase is a master key to all of your funds.

It would help if you did not give it to anyone unless people you trust very much. It would be best to keep it secure in either a piece of paper in multiple places or a password manager. I use the latter as it is more flexible.

Click Next.
The seed phrase sits hidden behind a lock button. Once you are sure no one is peeking behind your shoulders, click the button to unhide your seed phrase.

Next, you must take note of it and store it in a self place. Remember, you are in charge of the security of your wallet.

Save your seed phrase somewhere and follow the required steps. That should do it.

Voila! Congratulations. You are ready for the next stage of the internet.

An Appreciation of ReactJS

Kehinde Adeleke — Tue, 08 Mar 2022 13:23:38 +0000

Web technologies evolve quickly. Before you say: Jack and Jill went... boom, three new JS frameworks have been released. For the web developer, it means that we are currently flooded with options for building web applications. Sometimes, this leads to fatigue. Yes, framework fatigue is a real thing.

The amount of choice a developer has to make is used as an argument against the JS ecosystem. There is some merit in that. I do believe though that Frameworks have considerable improved the Developer experience.

I will be discussing ReactJS and its ecosystem and how it has made building JS applications easier.

N.B: I am a beginner to ReactJS. I have built a couple of landing pages with it. Right now, I'm working on a fun little country facts app with APIs. I don't purport to know all there is to know about the workings of the framework. Everything I share here is from my personal experiences from using both React and vanilla JS to build apps.

ReactJS component-based architecture isn't unique. Every other framework from Vue and Angular both uses that same type. I am not as experienced in either of those so I won't be talking about them.

I appreciate React. I enjoy using React. That would shock a lot of beginners because the narrative in the JS community is that, React isn't the best for newbies. There is JSX to grapple with, CSS-in-JS, how exactly state and props work, etc. I did face these issues when I first got started but now I recognize why I did.

My Javascript was very low level. I knew what ES6 was but never used it in building. I just couldn't think in React. That therein lied the problem.

You see, thinking in React requires a departure from vanilla JS imperative mode of DOM manipulation. Sure you can write declarative code in vanillaJS but I never tried it, probably because it just seemed unnecessarily complicated. What React offered though was something radically fun. Building and updating the DOM had never been easier.

Let's take one example: I tried building a form for user feedback collection. I generated the HTML elements and CSS both all in JS and well...it was a mess. In my defense, I did leave enough comments to guide whoever was gonna use the codebase later on. It is not an effective way to build apps.

A single change in a property declaration for a button element, caused the whole page to refresh. I can't sufficiently explain my frustration every time it happened. This is where React's shadow DOM spoiled me.

A single change in one section -- say a component -- needn't rerender the whole app. The shadow DOM just updates the parts of the DOM necessary to see changes. "This is...magic" I uttered. Sure, I could be overreacting. But the thing is, I had never experienced such ease in building apps. It increased my workflow and made sure I spent more time thinking in React.

Let's explore that a bit as well. I think the component-based structure of the react is a major plus. It forces you:
to think of reusable components,
what data would be required in my case
how it all fits into the whole-- the app itself.

When I got started with a Tweet component I was making, I had to let others know of this joy.

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

It was pretty exciting to make.

The final result of that was this:

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

I am still learning a lot about ReactJS. I recently just learned about the useState and useEffect hook. They are pretty nifty features react provides to manage state and side effects.

I like React. Sometimes, I get frustrated when stuff doesn't work as I expect it to, I believe it's a web technology I will enjoy as I keep building and using it.

Interested, check out the. They are amazing.new React docs

How to show Image Preview from Input element.

Kehinde Adeleke — Sat, 12 Feb 2022 18:34:34 +0000

Ever wanted to style the input with type="file" form control, and have a mini image preview in addition to that, you are in the right place.

Today, we will walk through how to make that specific input element accessible and beautiful.

Before that, a brief introduction:

Introduction: Forms Ubiquity

Forms are one of the key components of the web. They are everywhere. If you want to login or sign up for a service, you interact with a form. If you need to provide feedback for a product, your data is collected with a form.

It is therefore paramount that as users and designers of forms, we should work towards making sure, they aren't a hassle to fill in. They are easy to understand, and the user leaves with the reassurance that they have filled in the appropriate details.

If you need a deep dive into how to create accessible forms, web.dev by Google developers has a wonderful module on forms. You can access it by clicking here

For today, we are going to be working with the input element. Specifically, the input element of type="file". This input element is used to help users select and upload files from their devices. It could be mobile or desktop.

One issue with this input form control though is: it is very difficult to style. The default look of it when you create an input element is this:



<input type="file></input>

It is easy to understand. Yet, not exactly how we want it to be.

We want the label styles to look like a button and also show an image Preview. Let's get right on to it.

The whole project can be found on JSFiddle. If you are interested in seeing the final result, click the Link to JSFiddle playground

If you do want to code along from scratch, let's get started.

This project is going to be divided into three sections:

The Markup
The Styling
Interactivity with JavaScript

The Markup

The Markup is the HTML we have to work with. The required elements we need are:



<div class="container">
  <label for="file" id="file-upload">Select an Image</label>
  <input type="file" name="file-upload" 
  id="file" accepts=".jpg, .jpeg, .png">

  <div class="preview">
    <img id="file-preview">
  </div>
</div>

Let's look at what this markup is all about. We create a div with a class of Container. This div is going to contain both our form control -- the input of type="file" -- and the image element we need to display as a preview.

Next is the label for the input element. For accessibility, input fields should always have a label that describes the form control. Here the label has a for attribute of file which corresponds to the id of the input element.

Just think of it this way, the label for attribute tells us what form it is linked to. The form it is linked to will have the same value in its id.

so label for="file" tells screen readers that it is related to the input id="file". Remember that attributes values are case sensitive. file is not the same as File. that could potentially trip you up so be wary of it.

Next we have our form control with a name and an id. We add the accepts attribute that tells us what can be uploaded. Here it is delimited to files that have the .jpg, .jpeg or .png extension. That attribute is optional and you can safely take it out.

The next line of code is our container with the class of preview. This container will hold our image element inside of it. The image element doesn't have a src nor alt attribute...yet. It has an id. We are going to insert the src and alt attribute with the help of JavaScript.

Once you have all that done, you should have this:

We have our basic form control. Next, onto styling.

The Styling

CSS is always fun to write. We are going to be doing quite a lot to transform our meh input form control to an attractive button.
Let's get started:

First, we give our body element, a height of 100vh



body{
  height: 100vh;
}

Next, we style our container.



.container {
  width: 100vh;
  height: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

We give the container, a height and width property. Next we add the display: flex property to align the children of the container to the center of it. The flex-direction changes the orientation of the children from row to column

With that, we should have this:

The next step is to style the form control. Input fields of type file are not exactly easy to style so we are going to style the label element instead. Remember, the for attribute we added before. Now it is going to come in handy. Because we set a for attribute on the label element, we can visually hide the input element from the screen and yet still trigger the corresponding action. Let's see that in code



label {
  background: hotpink;
  padding: 15px 20px;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: 11px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition: box-shadow ease 0.25s;
}

label:active {
  box-shadow:none;
}

We have basic button styles. We give it a background of hotpink -- because hotpink is the best color -- padding, border-radius etc.

The box-shadow is to make our button have this push down effect. We would get to that soon. the active pseudo-class is added to the label element in order to remove the box-shadow when it is active.

Quick Info on the active pseudoclass by MDN:

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

With all that added, we should have this:

The input element is still present. We can style this by either using the opacity property or making it non-visible. The opacity property is recommended because, according to MDN:

Note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.

We still want assistive technologies to know that we can interact with the form control. The way I did it was to just make the input element miniscule. Here's the code:



input#file {
  width: 0;
  height: 0;
}

which gives us:

Here it is in motion:

We have that nice click effect.

For the image element, we can hide it for now. You can do that by using the line of code below:



img{
  width: 50px;
  height: 50px;
  display: none;
}

.preview{
  margin-top: 20px;
  position: relative;
  left: -50px;
  width: 50px;
  height: 50px;
}

That is all for our button styles and our image element.
We are going to style the container with the class of preview for a couple of reasons. First, we want a margin to separate our image from the button. We also wouldn't want any jarring layout shift so we set an extrinsic size with the width and height property.

The position property is to align it along the left margin of the button.

All that's left to add is JavaScript to display the image.

Interactivity with JavaScript.

The first thing to do is to get the input element from the DOM tree and assigning it to a variable. We do that by typing this:



const uploadButton = document.querySelector('input[type="file"]')

Next, we add an EventListener to the input element, we listen for a change event because a change event signifies that a file has been added, followed by an arrow function with the event object.



uploadButton.addEventListener('change', (e)=>{
   const currFiles = e.target.files
})

After that, we get the current files in the object



uploadButton.addEventListener('change', (e)=>{
   const currFiles = e.target.files
})

We then check to see if the currFiles array is not empty, get the first file in the array, and append that to our image element. We use the getElementById method to get the image element with an id of file-preview.

After that, we add the image src to the src attribute of our image element and change the display of the image element from display:none to display:block.



uploadButton.addEventListener('change', (e)=>{
const currFiles = e.target.files
if(currFiles.length > 0){
      let src = URL.createObjectURL(currFiles[0])
      let imagePreview = document.getElementById('file-preview')
      imagePreview.src = src
      imagePreview.style.display = "block"
    }
})

Your final JS code should look like this:



let uploadButton = document.querySelector('input[type="file"]')
uploadButton.addEventListener('change', (e)=>{
const currFiles = e.target.files
if(currFiles.length > 0){
      let src = URL.createObjectURL(currFiles[0])
      let imagePreview = document.getElementById('file-preview')
    imagePreview.src = src
      imagePreview.style.display = "block"
    }
})

That is all for the code. The final output should look like this:

It's a small image but it does the work of letting the user know that they have selected an image.

Thanks for reading this.

One interesting thing you could try to implement is zoom on click. When the user clicks on the preview image, they are able to see the image pop up like a modal and with more clarity.

Recommended Resources:

Banner Image source: https://web.dev/learn/forms/fields/

Fixing Font issue with Parcel

Kehinde Adeleke — Mon, 07 Feb 2022 01:44:06 +0000

I just recently started using the parcel bundler for a project I was working on. I set up the dev and build commands, and set my path to src/index.html. Unfortunately, all my fonts file in the src/ folder wouldn't show up in the compiled html file in the dist folder.

how I solved it

I googled around a bit but there weren't that many issues as specific as mine. I read up on github and found out that, one way was to copy the fonts folder from the src into the dist folder.

If you want to try this out, make sure the server isn't running by pressing ctrl c in your terminal. After that, copy the fonts folder to the dist folder and then run your build command again. In my case it was npx parcel this is because I had specified my source to be src/index.html in my package.json

{
 "source": "src/index.html",
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  },
}

And Voila! it worked quite alright.