Forem: Wonuola

Using downloaded custom fonts in Vue.

Wonuola — Tue, 02 Apr 2024 16:43:58 +0000

This is a breakdown of how to use downloaded fonts in Vue.
Step 1: Download your fonts.
You can check out befont for downloadable fonts.
Step 2: Add the downloaded fonts files 📄 to your assets folder 📂 in Vue.
Step 3: In App.vue, write out this code

@font-face {
  font-family: 'Aeonik';   /* Name of the font */
  src: url('./assets/AeonikTRIAL-Regular.otf');   /* Link to access your downloaded fonts */

}

#app {
  font-family: 'Aeonik', Helvetica, Arial, sans-serif;}

You can also use these fonts generally in other components you've created.
Cheers 🥂

React Interview Questions

Wonuola — Mon, 25 Mar 2024 12:45:12 +0000

Question 1: Why should you not copy the values of props into a component's state?

Answer: It will create two instances of the same state that can become out of sync.

Question 2: What is not a rule for React Hooks?

Answer: Hooks can be called in Class or Function components

Question 3: What is a common use case for ref?

Answer: To access the DOM node.

Question 4: How can you optimize performance for a function component that always renders the same way?

Answer: Wrap it in a React.memo higher order component

Question 5: A copy of the 'real' DOM that is kept in memory is called what?

Answer: Virtual DOM

BONUS
Question: What is the children prop?

Answer: A property that lets you nest components in other components

Let me know if this helped ;)

JavaScript Interview Questions For Entry Level Developers

Wonuola — Mon, 25 Mar 2024 12:24:12 +0000

Question 1: How does a while loop start?
Answer: while (i <= 10; i++)

Question 2: How do you insert a comment that has more than one line?
Answer: /* This comment has
more than one line */

Question 3: How do you find the number with the highest value of a and c?
Answer: Math.max(a,c)

Question 4: What is the correct JavaScript syntax for opening a new window called "Tutors"
Answer: Tutors = window.open("http://tutor.com")

Question 5: How can you detect the client's browser name
Answer: navigator.appName

Let me know if this helped ;)

Creating a link shortener using Bitly's API (In simple steps)

Wonuola — Mon, 11 Mar 2024 10:55:46 +0000

Step 1: Create a Bitly account using this link Bitly sign up

Step 2: Just by the side bar, head over to settings.

Step 3: Head over to developer settings to generate an
API token.

Step 4: Fill in your password to generate this token.

Step 5: Head over to VS Code.
Step 6: Install axios using

npm i axios --save

Step 7:Create form component

<form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Enter a long URL"
          value=''
        />
        <button type="submit">Shorten</button>
      </form>

Step 8: Create a state function for your URL values.
urlInput: This is the long URL the user wants to shorten.
urlOutput: This is the new shortened URL.

  const [urlInput, setUrlInput] = useState('');
  const [urlOutput, setUrlOutput] = useState('');

Step 9: Create an asynchronous submit function

//(e) is an event handler that  
const handleSubmit = async (e) => {

    e.preventDefault(); // To prevent the button from submitting before the function runs, we add e.preventDefault.

//The try-catch function is to run the function smoothly and help us identify errors along the way
    try {
      const res = await axios.post(
        'https://api-ssl.bitly.com/v4/shorten', // the api link
        {
          long_url: urlInput // your url input state value
        },
        {
          headers: {
            'Content-Type': 'application/json',
            Authorization: 'YOUR_API_KEY/TOKEN'
          }
        }
      );
      setUrlOutput(res.data.link);
    } catch (error) {
      console.error(error);
    }
  };

Step 10
a. Create a

for the newly generated API

{urlOutput && (
        <div>
          <p>Shortened URL:</p>
          <a href={urlOuput} target="_blank" rel="noopener noreferrer">
            {urlOutput}
          </a>
        </div>
      )}

b. Update the values of the form

<form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Enter a long URL"
          value={urlInput}
          onChange={(e) => setUrlInput(e.target.value)}
        />
        <button type="submit">Shorten</button>
      </form>

That's it!
You've created your url shortener with Bitly's API! Let me know what you think in the comments. Contributions and feedbacks are obviously welcome. Cheers ;)

Argument of type 'HTMLInputElement' is not assignable to parameter of type 'SetStateAction' TypeScript Error

Wonuola — Sat, 09 Mar 2024 14:08:01 +0000

How to fix it

It is a change event (ChangeEvent) not a mouse event. Therefore it should be

function handleEmailChange(e: React.ChangeEvent)

There is no need for the target as HTMLInputElement. Rather, it should be

function handleEmailChange(e: React.ChangeEvent<HTMLInputElememt>)

How to fix 'Type 'MouseEvent' is not generic.' TypeScript error.

Wonuola — Sat, 09 Mar 2024 13:07:04 +0000

A sample image of the TypeScript error.
This could be because you're using DOM events.

Here is the solution:

 const onSubmit = async (e: 
React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
}

Let me know if it works. Cheers ;)

Accessibility

Wonuola — Wed, 02 Aug 2023 17:47:36 +0000

It’s funny how many people think that web accessibility is mainly for the disabled.

But that’s not the case 👎

🔸The whole point of accessibility is to make sure everyone has a smooth experience on the web - whether disabled or not.

🔸Take, for instance, the alt attribute.

Most developers link images to their web pages rather than downloading the images to their local folder.

Quite often, these images disappear when the sites they were linked from are down.

So in this case, if there's no alt attribute, Users won’t know what the absent image represents.

🚨 This affects us all, disabled or not.

🔸Adding alt attributes for images is just one way to improve your web accessibility.

There are others, like rel and target attributes for links and title attributes for a selected menu, to mention but a few.

🚀 The fact still remains that accessibility is not an option when building but a requirement, according to the W3C (World Wide Web Consortium).

🔊To understand more about accessibility and other web standards, listen to this episode with Bolaji Ayodeji on Tech with Wonuola 🎙, the podcast.

Just a suggestion you can leave it as is if you think it’s great already (👉🏽 By the way, I had an amazing discussion about accessibility and other web standards on my podcast, Tech with Wonuola. You can learn more about it in the episode featuring Bolaji Ayodeji. Tune in! 🎧😊) #softwaredevelopment #accessibility #a11y #websitedevelopment

Website cookies 🍪

Wonuola — Sat, 29 Jul 2023 13:38:09 +0000

Hi there,
My name is Wonuola; I’m a front-end developer, a podcaster, and a writer.
I want to start something here.
I want to share useful information on technologies and the internet with you.
So today, I’ll be writing about cookies.
I’m pretty sure most of us wonder what this ‘cookies’ thing is about.
Cookies are small text files collected by your computer on every website you visit. It helps keep track of your information and preferences when visiting web pages. These preferences include font size, language, preferred ad, etc.
This helps to improve the user’s experience and saves you the stress of reselecting your preferences on your next visit. It also helps the host website keep track of their traffic.
Many may not like the idea of these ‘cookies’ due to privacy reasons; that’s why there’s an option to accept or disable cookies.

We’ve come to the end of this short article.
Let me know what you think in the comments.
Also, I own a podcast named Tech with Wonuola, where I and amazing guests talk about everything in the software space.

Still confused on how to get started in open source?

Wonuola — Sat, 29 Jul 2023 09:32:58 +0000

Listen to this insightful episode with Toby_solutions on Tech with Wonuola the podcast.

Tailwind isn't working on my Typescript React

Wonuola — Mon, 05 Jun 2023 17:40:00 +0000

I installed tailwind css, with craco for my react app (following tailwind docs) but it's results doesn't show on my browser. Please help out on what I can do.

New Podcast Episode Up 🎉

Wonuola — Mon, 14 Nov 2022 06:18:00 +0000

Let me know what you think about it in the comments!
Listen on Spotify

Dev buddy

Wonuola — Wed, 09 Nov 2022 15:50:29 +0000

Hi everyone! Coding alone can be really boring, especially on days you lack motivation and zeal to code. With this said i'm looking for a coding buddy. (Someone in the React Js front-end stack would be nice) Thanks guys