Forem: Ifeoma

FreeCodeCamp: Find the longest word in a string. Basic Algorithm 4

Ifeoma — Fri, 26 May 2023 10:28:43 +0000

In the words of Prof. Jelani Nelson of Harvard University, "An algorithm is a well-defined procedure for carrying out some computational task. Typically the task is given, and the job of the algorithmist is to find such an efficient procedure, for example in terms of processing time and/or memory consumption"

A more straightforward definition in my words is that "an algorithm is a set of step-by-step instructions that indicate a process or processes and describe how a certain task should be carried out"

In this series, I will share solutions and my thought process for arriving at these solutions to the FreeCodeCamp algorithm challenges from the Javascript Algorithm and Data Structures section: Basic Algorithm

Starting with Challenge 4: Find the longest word in a string

/* Return the length of the longest word in the provided sentence. Your response should be a number. */

function findLongestWordLength(str) {
  return str.length;
}

findLongestWordLength("The quick brown fox jumped over the lazy dog");

Given the algorithm above, we will return the longest word in the given sentence.

To find the longest word in a sentence, we will iterate over the sentence and compare the length of each word to the length of the longest word found so far. To iterate through the given string "The quick brown fox jumped over the lazy dog", we have to split the words up into substrings.

Javascript has inbuilt methods provided to carry out several functions. For this string value, we will use the javascript split method. The split method takes a string value, divides it into substrings based on the separator we specify, and returns an array that can be iterated upon.

For this algorithm, we will be making use of a separator and then storing the result in a variable wordsArray, like so:

function findLongestWordLength(str) {
  let wordsArray = str.split(' ');

  // console.log (wordsArray)
  //(9) ['The', 'quick', 'brown', 'fox', 'jumped', 'over', 'the', 'lazy', 'dog']
}

findLongestWordLength("The quick brown fox jumped over the lazy dog");

when we log the value of wordsArray to our console, it returns an array with 9 substrings, it is these substrings that will be iterated upon.

We will store the current longest word in a variable named currentLongestWord

function findLongestWordLength(str) {
  let wordsArray = str.split(' ');
  let currentLongestWord = "";
}

findLongestWordLength("The quick brown fox jumped over the lazy dog");

Of course, it is stored as a string because the value, that is, the words from the argument given is a string value.

The next step will be to iterate through our given array wordsArray to iterate over an array we will be using the for...loop

function findLongestWordLength(str) {
  let wordsArray = str.split(' ');
  let currentLongestWord = "";

  for ( let i = 0; i < wordsArray.length; i++ ){

  }
}
 findLongestWordLength("The quick brown fox jumped over the lazy dog");

n the code above, we have written a for...loop that iterates through all the items in the area stored in wordsArray and because we do not know the actual length of the elements in the array, we make use of the method length

Every time the loop runs, it iterates through each substring which becomes the current value of wordsArray[i] we can log the current value of wordsArray[i] to gain a clearer picture of how the value changes on every iteration:

function findLongestWordLength(str) {
 let wordsArray = str.split(' ');
 let currentLongestWord = "";

  for ( let i = 0; i < wordsArray.length; i++ ){
     console.log (wordsArray[i]);
//returns => 
// The
//quick
//brown
//fox
//jumped
//over
//the
//lazy
//dog
  }
}
 findLongestWordLength("The quick brown fox jumped over the lazy dog");

This value needs to be stored in a variable so that it can be compared to the currentLongestWord so, we will be storing it in the currentWord variable. For us to compare we will make use of an if... statement so that if length of (characters) in currentWord is greater than the length of (characters) in currentLongestWord, the value of currentWord gets updated to the currentLongestWord by using the assignment symbol.

function findLongestWordLength(str) {
  let wordsArray = str.split(' ');
  let currentLongestWord = "";

  for ( let i = 0; i < wordsArray.length; i++ ){
       let currentWord = wordsArray[i];
       if (currentWord.length >   currentLongestWord.length){
           currentLongestWord = currentWord
       }
  }
return currentLongestWord.length;
}
 findLongestWordLength("The quick brown fox jumped over the lazy dog");

The next step will be to return the length of the currentLongestWord as we have done above, we are making use of the length method because the algorithm requests that a number should be returned.

Now, log in the given argument or any other value of your choice and the number that will be returned will be the length of the longest word in the sentence.

function findLongestWordLength(str) {
let wordsArray = str.split(' ');
  let currentLongestWord = "";

  for ( let i = 0; i < wordsArray.length; i++ ){
       let currentWord = wordsArray[i];
       if (currentWord.length >   currentLongestWord.length){
           currentLongestWord = currentWord
       }
  }
return currentLongestWord.length;
}
 console.log (findLongestWordLength("The quick brown fox jumped over the lazy dog"));
//returns => 6

console.log (findLongestWordLength("Javascript is a high-level language"))
//returns => 10

Remember, there are different ways to solve an algorithm in Javascript, solve yours in the way you understand and maybe share in the comments.

Netlify Deployment error Fix: 'Treating warnings as errors because process.env.CI=true'

Ifeoma — Thu, 02 Feb 2023 22:38:17 +0000

Netlify is a cloud platform in which software developers can easily host their websites and web applications and it gets deployed instantly.

In this article, I will share how to fix Treating warnings as errors because process.env.CI=true the error message I recently encountered while trying to deploy a React application I am currently working on as a personal project.

The Problem:

I tried to deploy an application built using react and chose Netlify as the platform in which it was to be hosted. I chose the option to Import an existing project from a Git repository. Netlify displays the deployment log terminal when an application is being deployed and from this section, messages can be seen on the progress of the project being deployed. Upon getting the application deployed, these error messages were displayed as a report on the progress of the deployment.

The reason for this error is that Netlify automatically sets the build environment variable to true, in doing so certain features in an application that were previously seen as warnings (in the terminal in of a local environment) and did not alter the build of the application in a local environment will now be detected while in the new environment. By the default setting by Netlify, your application due to the library being used will interpret this environment variable CI being set to true that is, CI=true where CI stands for Continuous Integration and then interprets warnings as errors hence the warning: "Treating warnings as errors because process.env.CI=true" and this interrupts the deployment of the application.

What are Environment Variables?

Environment variables are values that help in setting up and controlling the environment in which your application gets deployed to.

The Solution:

To fix this error, the first step is to set the build command of your application.

Navigate to the Site Settings of the application you intend to deploy.
Under the Build and Deploy section select Continuous Deployment and scroll down to the Build Settings section, Click on Edit Settings.
Set the Build Command to CI= npm run build .

The next step will be to set the environment variable, which controls the environment to which your application gets deployed, to do that follow these instructions:

Under the Build and Deploy section, select Environment.
Click on Edit Variables and in the key input type in CI, in the value input type in false .

This unsets Netlify's default environment setting from CI=true to CI=false, when this is set, warnings during continuous integration or deployment will no longer be seen as errors that can halt the deployment of the web application.

Following these instructions will result in a successful build and deployment of your application, just as it did for me. You will see these messages in the deployment logs:

Note: These settings can also be applied when deploying an application to Vercel.

The Unofficial Official Beginner's Guide to starting out in Developer Relations.

Ifeoma — Mon, 09 Jan 2023 11:36:24 +0000

So you have done your research on Developer relations and confirmed that it is the next step you would like to take in your career. Now you will want to be sure about the actions you can take in developing a career in Developer Relations

In this post, I will share details on how you can build a career in Developer Relations starting where you are, with what you have.

Identify a role in Developer Relations and be enthusiastic about it:

Developer relations consists of various roles that require different skill sets such as Technical Writing, Public speaking, Community management, and Developer education. It is important to try one of these skills using your strengths and being consistent with these skill sets. For instance, through past experiences, I identified Public speaking and Writing as the skills related to Developer relations which I thrive at and I later grew these skills by managing developer communities, speaking at technical conferences, developer education, writing and participating in local technical events.

Develop Interpersonal skills:

As a developer relations engineer, you will be interacting with people a lot, now I know this can seem daunting for those of us who are introverts but the hack to this is making sure that the interaction is organic. When you meet participants or fellow speakers from a conference you will be speaking at, try to start organic conversations with them for example: try to know why they attended the conference, who they will be looking forward to speaking and what their favorite session was, don not get offended or displeased if you were not their best speaker instead try to find out why they enjoyed that speaker's session. Interact with other speakers and do it organically no because you are aiming to gain a sort of connection to the other speakers for certain beneficial reasons, people have a way of telling if you are walking up to them just for your own sake. Always remember that you will interact with people a lot, either through speaking or community management which is direct, or writing technical articles which people will use which is indirect.

Educate your audience:

The main purpose of being a developer relations engineer is to educate the audience and this can be done by learning the goals of your audience, your readers, your listeners, and whatever medium or tools you use when creating content. Make sure you are able to relate to the enthusiasts. Always ensure your audience has a takeaway from the content you create, the event you speak at, or the article you have published. A way to make sure of this is by asking the audience themselves, and get in touch with your target audience, there is no one in a better position to give you feedback than your target audience, the people you intend to reach.

Enjoy what you do:

The only way to give your best at something is to show up and totally enjoy what you are doing and that includes being a Developer Relations Engineer. Whether you are writing, teaching, speaking at a conference or managing a community make sure to give it your best and completely enjoy it, you can achieve this by doing more research on whatever you are ought to deliver on and its in turn will make you confident.

This article was inspired by a session taken by Tejas Kumar at the DX Mentorship programme. He has a youtube channel where he shares insights on Developer Relations and a video I have enjoyed watching is this:

How to Set up Tailwind with Vue 3

Ifeoma — Sat, 17 Jul 2021 16:16:52 +0000

This blog post addresses adding the Tailwind CSS framework to a Vue project.

According to the official Tailwind CSS documentation Tailwind CSS is a utility first framework for rapidly building custom user interfaces. Simply put, its a quick way to creating visually pleasing interfaces without having to write your own custom CSS and now we will be adding it to our Vue 3 project.

If you aren't already in the project directory, you can navigate to it with the command :

cd my-vue-project

where my-vue-project is the name of your project's folder

then install Tailwind and its peer-dependencies :

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

when you check the package.json file in your project you should see this added to your dependencies

@tailwindcss/postcss7-compat": "^2.2.4"

it confirms that tailwind has now been added to your project, but that is not all with the set up.

Next, we have to generate the configuration files for Tailwind and PostCSS :

npx tailwindcss init -p

when you check your project files you'll notice two files have been added -
tailwind.config.js and postcss.config.js.

The config file tailwind.config.js contains paths to components and pages of our application and it is in this file we also add customizations

//tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, we will update the purge property :

// tailwind.config.js

module.exports = {
 purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

What is happening here?

The purge property just as the name denotes purges unused css styles which was generated by tailwind on installation, this does not in any way affect the styles by third party CSS used in your project. Check here to read up more about this.

Next, Inside the src folder we are going to create a subfolder called styles and inside the styles folder we create a file tailwind.css, note that this file can be named however you deem fit, I use tailwind.css here as it is more descriptive and you should also give it a descriptive name. Type this in your terminal :

mkdir src/styles && touch src/styles/tailwind.css

Another alternative to creating the subfolder is to create it in your code editor.

Inside tailwind.css add this :

/* ./src/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

What is happening here ?

We made use of the directive @tailwindto import tailwind's styles. Now we have to import tailwind.css into the main.js file.

import { createApp } from 'vue';
import App from './App.vue';
import './styles/tailwind.css'; //Here

createApp(App).mount('#app');

Now, let us create something simple using Tailwind. In the App.vue file add this :

<template>
  <div class="justify-center flex items-center bg-blue-500 h-screen">
    <div class="text-4xl text-white">
      This is Tailwind 🙂
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

This is what should show up on your screen :

Nevertheless, Ifeoma Coded.

Ifeoma — Tue, 03 Mar 2020 17:59:08 +0000

What Equality in tech means to me is ...

Equality in tech is attending meetups without wondering if you would be the only woman in a room filled a hundred men, wondering if you would have to put up with a male speaker's sexist joke and the laughter from other men that follow after, then there is you looking around and wondering if no other person finds what the speaker said is wrong.

Equality in tech is a colleague or a senior not looking down on you or doubting your capabilities mainly because your gender differs from his.

Equality in tech is tech companies, offices and workspaces respecting the women in those spaces and making the environment feel like a safe space so that women can progress professionally.

Equality in tech is women being in spaces where they feel confident enough to express themselves without doubt.

Equality in tech is women speakers being given the same opportunity to speak as their male counterparts.

This is what Equality in tech means to me as a young woman who works in tech.

Happy International Women's Day! You are Awesome! 🎉