Forem: Tadea Simunovic

Discover Bulma - CSS Framework

Tadea Simunovic — Sun, 19 Jul 2020 18:03:35 +0000

Bulma is a free, open-source CSS framework. The modern design and layout features that Bulma offers are very easy and simple to use.

Examples from Bulma.io.

Several ways to get started with Bulma

Use npm to install the Bulma package

npm install bulma

Use the cdnjs CDN to link to the Bulma stylesheet

https://cdnjs.com/libraries/bulma

Use the GitHub repository to get the latest development version

https://github.com/jgthms/bulma/tree/master/css

If you want to use icons with Bulma, don't forget to include Font Awesome 5

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

Bulma provides many great features like:

Flexbox based: Makes creating grid items and vertically aligned things really easy.
Responsive: Mobile first framework similar to Bootstrap
Solid looking foundation: All the typography, buttons, tables, forms, and basic CSS
Lot of components: Comes with layouts, a vertical alignment level, and media objects.

Bulma is well documented which is very important.

Modifiers

Modifiers classes allow you to set alternative styles to almost all of the Bulma elements. The Bulma syntax uses the is- keyword to identify modifiers on the base class. For buttons, button is the base class and there are modifiers like is-primary, is-small, and more.

Here's some example form Bulma.io for buttons

Check out more on the buttons at Bulma.io.

Columns

Bulma is based on Flexbox, so it’s really simple to create columns. First, we’re creating a container <div> with a class of columns, and then we give each of the children a class of column. Each column will have equal width, no matter the number of columns.

Hero

The hero component allows you to add a full-width banner to your webpage, which can optionally cover the full height of the page as well. To create a hero in Bulma. We’ll use the semantic <section>, and give it a class of hero. We also need to add a <div> child with the class hero-body.

Bulma is a great flexbox based CSS framework that has proven itself with the constant updates and new features. The modifier is- keyword is simple to use and also very readable.

Give Bulma a try and definitely read through the docs to see all the offerings.

Add React Icons To Your Projects

Tadea Simunovic — Mon, 13 Jul 2020 20:52:12 +0000

In this post, you will learn how to use icons from popular icons sets in your React applications. React Icons provides thousands of free, open-source icons. It includes ten popular open-source icon libraries, including Font Awesome, Bootstrap Icons, Devicons, Game Icons, Material Design, ect. It utilizes ES6 imports that allow you to include only the icons that your project is using.

Add icons to your project

#add with npm
npm install react-icons --save

#add with yarn
yarn add react-icons

If you open React Icons documenation, you will see on left-hand side open-source libraries you can use with React Icons.

Also, you can search icons by name in a search bar. For example...

Once you click on the icon you will be able to copy/paste into your project. In your code editor, you will import icons. In this case I will be using Font Awesome Icon.

import { FaBalanceScale } from "react-icons/fa";

Withing div tag in your component you will simply invoke it.

<div>
   <FaBalanceScale />
</div>

How simple is that! Here is how does it look in a browser.

5 websites for practicing algorithms

Tadea Simunovic — Tue, 07 Jul 2020 20:49:35 +0000

1. HackerRank

If you are a beginner and want to develop a basic concept then I will suggest you go with HackerRank because they have some good problems for beginners which is sorted level wise i.e. you will get problems in increasing difficulty level. And by applying some basic logic you will able to crack them.

2. LeetCode

LeetCode has straight to the point problem statements. Once your solution has been approved, it lists it against all approved solutions in the same programming language and the percentage of how many solutions you beat out for speed.
There are 3 main difficulty levels are Easy/Medium/Hard.

Aside from the coding problems itself, the LeetCode community is its most valuable asset. It’s the #1 thing users talk about, and it’s a great resource for getting insight into how others are solving problems and learning from others’ mistakes.

3.CodeWars

Codewars has a captivating interface with unique ways of presenting the challenges, naming them as Katas, where coders gain skills and challenge other coders in Kumite. It’s one of the best places to learn to code and to have fun at the same time. Master your current language of choice, or expand your understanding of a new one. The challenges provide discussion boards as well as the ability to view user solutions.

4.HackerEarth

HackerEarth features over 8000 questions, 2000 challenges, and 1000 hackathons. This platform has a thriving community of 3 million developers. There is also a remote interview feature plus analytics for companies to see your statistics.

5.CoderBryte

Coderbyte is an online collection of algorithms and full-stack coding challenges and interview kits, which can be solved in 15+ languages including React, Python, and SQL directly in their online editor. The challenges come with official solutions and tens of thousands of user solutions and discussions. There are also tutorials on topics like advanced JavaScript features, data structures, and algorithm interview questions.

I hope you will found these websites helpful.

Deploy with GitHub Pages

Tadea Simunovic — Fri, 03 Jul 2020 14:52:37 +0000

GitHub is a great tool to deploy your projects. Using GitHub Pages you can easily share your projects on the World Wide Web.

GitHub Pages are very easy to set up and it's live updating with your GitHub flow.

To start I will assume you have your project set up with GitHub repo. If you don't here is GitHub documentation to follow.

In GitHub navigate to your repository and in the right corner, you will click on the Settings.

Within Settings, navigate to the Source section within the Github Pages section. From the dropdown menu, select master branch and then click Save.

You will get a notification that your site is ready to be published. When you first navigate to your newly deployed site it is possible that you will receive a 404 error. Sometimes it takes a few minutes to be deployed if you still having an issue try to follow steps again to make sure everything is set up correctly.

Now, all of your repositories can be found at http://<username>.github.io/<repository-name>

Hide and secure API key

Tadea Simunovic — Sat, 27 Jun 2020 17:14:17 +0000

Let's say you are working on a project and pulling some data from external API, for security reasons you want to hide that API key before pushing it to GitHub or any other source.

What is an API key and why you need it?

It's a way for websites to know that you are trying to access the data from their database. When you make a call, that website will use your unique key to see who you are and what kind of data you need to access.

How to hide?

You want to store your API key as variable in your environment. I will show you how to do it with a node package called dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.

Open up your terminal and type:
npm install dotenv

Make sure you successfully installed it in package.json.
To tell your server to load dotenv you will add this line of code to your file(index.js)

require('dotenv').config()

You will create a new file inside of your project, called .env and add your API key.

API_KEY=1233y7wt6ef5dfw8hw

To make sure you did everything right, you can call
console.log(process.env)

Now you can change your variable from this,

const api_key = '1233y7wt6ef5dfw8hw'

to this:

const api_key = process.env.API_KEY

Your fetch request will look like this api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${Api_Key}

Before deploying your project you will need to do a few more step to secure your API Key.

Create a .gitignorefile inside your project. A gitignore file specifies intentionally untracked files that Git should ignore.
Inside .gitignore type:

.env

Now make sure you save all changes and you can safely deploy your project and be sure that your API key will not be floating around.

Sequencing Fibonacci numbers

Tadea Simunovic — Sat, 20 Jun 2020 16:01:39 +0000

By definition, the first two numbers in the Fibonacci sequence are either 1 and 1, or 0 and 1, depending on the chosen starting point of the sequence, and each subsequent number is the sum of the previous two.

The Fibonacci series is an ordering of numbers where
each number is the sum of the preceding two.

Here is an example of the Fibonacci Sequence

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ….

Challenge

Print out the n-th entry in the Fibonacci series.
For example, the sequence [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] forms the first ten entries of the Fibonacci series.
Example:
fib(4) === 3

How Fibonacci works is to look at two previous numbers and add them together. Since we know we are starting with zero and one, the best way would be to just manually insert 0 and 1 into the result set.

function fibonacci(n) {
  const result = [0,1];
}

Now we will use a for loop to start from a number that is on [2] and iterate all the way to the n number.

function fibonacci(n) {
  const result = [0,1];
 for (let i = 2; i <= n; i++) {
  }
}

In the for loop, we will need to pull previous two number that is in const result and we will add them together and push back to const result.

function fibonacci(n) {
  const result = [0,1];
 for (let i = 2; i <= n; i++) {
   const a = result[i - 1];
   const b = result[i - 2];
  }
}

We will add these two numbers together and push it to const result and return entry (n) from result.

function fibonacci(n) {
  const result = [0,1];
 for (let i = 2; i <= n; i++) {
   const a = result[i - 1];
   const b = result[i - 2];

   result.push(a + b);
  }
  return result[n];
}

Let's solve this problem using a recursive solution.

function fibonacci(n) {
  if (n < 2) {
     return n
   }
  return fib(n - 1) + fib(n - 2);
}

This would be exponential runtime, the fibonnaci function is being called multiple times with the same exact arguments.

To improve the runtime, we can use memoization.
Memoization - store the arguments of each function call along with the result. If the function is called again with the same arguments, return the precomputed result, rather than running the function again.

var cache = {};

function fibonacci(number) {

    if (number < 1)
        return 0;

    if (number <= 2)
        return 1;

    if (number in cache)
        return cache[number];

    var value = fibonacci(number- 1) + fibonacci(number - 2);

    cache[number] = value;

    return value;
}

Using a variable var cache will remember function execution result and if the arguments for the future function execution are already in the cache we will simply return this value.

Memoization will assure us that for each number Fibonacci function will only be executed once.

Fake REST API with JSON and POSTMAN

Tadea Simunovic — Sun, 14 Jun 2020 14:51:43 +0000

You need back end data to connect with your front end? I will show you how to create fake JSON data with json-server and Postman.

I assume you have your project open, let's type this command to your terminal npm install -g json-server

After installation is done create a db.json file with some data.
Example:

{
  "groceries": [
    {
      "id": 1,
      "item": "bread",
      "amount": "1"
    },
    {
      "id": 2,
      "item": "milk",
      "amount": "3"
    }
   ]
}

Start JSON Server json-server --watch db.json It should look like this in the browser.

I assume you have Postman installed, we will make a GET request.

Let's add one item with POST request.

Pros:

The dummy data is in your version control system
The simplest setup you can imagine
It supports the most used http verbs
It saves changes to your JSON source for POST, PUT, PATCH or DELETE requests.

Cons:

The payload requires a strict format (JSON)

If you are more for a video on how to do it, I highly recommend to watch this video

This is helpful to filter your data.

GET ALL GROCERIES
http://localhost:3000/groceries

GET SINGLE GROCERY
http://localhost:3000/grocery/1

PAGINATION & LIMIT
http://localhost:3000/groceries?_page=1&_limit=2

SORTING
http://localhost:3000/groceries?_sort=name&_order=asc

FULL TEXT SEARCH
http://localhost:3000/groceries?q=milk

Dummy data generators

https://github.com/Marak/faker.js
https://github.com/boo1ean/casual
https://github.com/chancejs/chancejs

I hope you will find this article helpful for your future projects.

Runtime Complexity - Big-O

Tadea Simunovic — Wed, 03 Jun 2020 20:36:05 +0000

Runtime complexity is a term that we use to describe how performant an algorithm is.

We use runtime complexity to compare different solutions to a given problem or different algorithms for solving a given problem in the context of an interview.

So in the context of interviewing you are going to be asked very frequently what the runtime complexity of a given solution is.

In other words, runtime complexity in mathematical notation is called Big-O.

Let’s see some common time complexities described in the Big-O notation.

Time Complexities

O(1) - Constant Time

The fastest possible running time for any algorithm. An algorithm is said to run in constant time if it requires the same amount of time regardless of the input size. This is the ideal runtime for an algorithm.

O(n) - Linear Time

Describes an algorithm whose performance will grow linearly and in direct proportion to the size of the input data set. So a set twice the size will take twice the time. You probably don't want to put a million objects into one of these.

O(log n) - Logarithmic Time

It basically means time goes up linearly while then goes up exponentially. So if it takes 1 second to compute 10 elements, it will take 2 seconds to compute 100 elements, 3 seconds to compute 1000 elements, and so on.

O(n²) - Quadratic Time

Represents an algorithm whose performance is directly proportional to the squared size of the input data set. This is common with algorithms that involve nested iterations over the data set. As the input increases, the time to run the algorithm grows at the rate of its square.

O(2n) - Quasilinear Time

An algorithm is said to have an exponential time or O(2^n) if its runtime doubles with each addition to the input data set, starting off very shallow, then rising meteorically.

Take a look at Array Sorting Algorithms cheatsheet!

I hope you will find this article helpful.

Find The Vowels used in a String with JavaScript

Tadea Simunovic — Wed, 27 May 2020 00:51:16 +0000

Count the vowels in a string with JavaScript. Short and simple!

Challenge

---Directions
Write a function that returns the number of vowels used in a string. To confirm, vowels are the characters 'a', 'e', 'i', 'o' and 'u'.
---Example
vowels('Hello') ---> 2
vowels('Javascript') ---> 3
vowels('crypt') ---> 0

We will start with creating a counter variable starting with 0, and then we will iterate through our string and make sure we will lowerCase our vowels.

function vowels(str) {
  let counter = 0;

   for (let char of str.toLowerCase()){

   }
 }

We could of do a bunch of IF statements, but our code would look messy. Instead, we will use the helper method includes() that determines whether an array includes a certain value among its entries, returning true or false as appropriate. Read more about it here.

Let's create an array that will hold all of our vowels.

const check = ['a','e','i','o','u']

Now we have to use some logic in our loop. If the char that we are looking for is included in an array we will increment the counter. We'll iterate through all of our characters and then return them.

function vowels(str) {
  let counter = 0;
  const check = ['a','e','i','o','u']

   for (let char of str.toLowerCase()){
    if (check.includes(char)) {
      counter++
     }
   }
   return counter
 }

Output in console.

// vowels("Today is a rainy day!") --> 7

// vowels("Shy gypsy slyly spryly tryst by my crypt") --> 0

Printing Staircase in JavaScript

Tadea Simunovic — Sat, 23 May 2020 12:53:15 +0000

For today's challenge we will create a function staircase, visual stairs made of pound symbol(#).
Let's take a look at the challenge description.

Challenge

Write a function that accepts a positive number N.
The function should console log a step shape
with N levels using the # character. Make sure the
the step has spaces on the right-hand side!
--- Examples
staircase(2)
'# '
'##'
staircase(3)
'#  '
'## '
'###'
staircase(4)
'#   '
'##  '
'### '
'####'

This challenge supposed to form visual stairs made of # symbol. An argument number is a number of lines we want to pass in. If we have one step, we need to add a space (' ') after #.
We will reflect the current row with "i" and column with "j". To start we will for loop through rows from 0 to n.

function staircase(n) {
  for (let i = 0; i < n; i++)
}

For each row, we are considering we will create an empty string step

function staircase(n) {
  for (let i = 0; i < n; i++) {
      let step = ' ';
  }
}

Then we will iterate from 0 to n, through columns with for loop.

function staircase(n) {
  for (let i = 0; i < n; i++) {
      let step = ' ';

   for (let j = 0; j < n; j++) {
   }
  }
}

Then inside of the inner loop, we will say, if the current column that we are looking at is equal to or less than the current row we want to add a pound(#) to step, else, we will add space (' ').

function staircase(n) {
  for (let i = 0; i < n; i++) {
      let step = ' ';

   for (let j = 0; j < n; j++) {
      if (j <= i) {
        step += '#'
     } else {
        step += ' ';
     }
   }
  }
}

We will console.log(step) inside of our for loop, because we want to console.log n number of times.

function staircase(n) {
  for (let i = 0; i < n; i++) {
      let step = ' ';

   for (let j = 0; j < n; j++) {
      if (j <= i) {
        step += '#'
     } else {
        step += ' ';
     }
   }
   console.log(step)
  }
}

staircase(6)
#
##
###
####
#####
######

I hope you will find this helpful practicing data structure and algorithms.

Uppercase the first letter of a string in JavaScript

Tadea Simunovic — Sun, 17 May 2020 03:06:37 +0000

Take a look at two ways how to uppercase the first letter of a string.

Challenge

capitalize('hello there') --> 'Hello There'
capitalize('i love to learn') --> 'I Love To Learn'
capitalize('today is a beautiful day') --> 'Today Is A Beautiful Day'

Solution 1

Let's look at pseudo-code.

Starting with creating an empty array 'words' that will store end result of the final capitalized words.

  const words = []

We will then take the original string that was passed into our function and split it by space character to get an array of words.

 for (let word of str.split(' ')) {
  }

We will loop through that array and uppercase the first letter of each word, then we will join that first letter that is now capitalized with the rest of the word by using the slice() function.

 for ( let word of str.split(' ')) {
   word[0].toUpperCase() + word.slice(1)
  }

And then we will push the result into words array that we created at the very beginning.

for (let word of str.split(' ')) {
   words.push(word[0].toUpperCase() + word.slice(1))
  }

After we loop through each word, we will then join the words array together into a string, and then we'll return it from the function.

function capitalize(str) {
  const words = []

 for (let word of str.split(' ')) {
   words.push(word[0].toUpperCase() + word.slice(1))
  }
 return words.join(' ')
}

capitalize('hello there') // 'Hello There'

Solution 2

In this solution, we will check each character and if the character has a space on left then we will capitalize that character and store to a new string, if there is no space we will leave it as it is. The only problem here would be that this solution doesn't work very well with the very first character. So if we try to look to the left of the first character well there's nothing to the left and so we will never attempt to capitalize it even though it absolutely should.
So an easy way to solve this is to say that when we create this initial string result rather than creating it as an empty string we should create a result which is the first character of the input string capitalized.

Let's declare starting string that will take the first character of a string we passing and capitalize it.

let result = str[0].toUpperCase() // H

Now we can iterate from index 1 to the length of the string and for every character will look to the left of it and decide whether or not we need to capitalize on the current character.

for (let i = 1; i <str.length; i++) {

}

Now we'll look to the left of the current character, if that char is a space then I want to take the current character that we're looking at and I want to uppercase it and add it to results string.

for (let i = 1; i <str.length; i++) {
  if(str[i-1] === ' ') {
    result += str[i].toUpperCase()
  }
}

Else, If the character to the left of the current character is not a space well, in that case, we want to just add it on to the results string.

for (let i = 1; i <str.length; i++) {
  if(str[i-1] === ' ') {
    result += str[i].toUpperCase()
  } else {
  result += str[i]
  }
}

Don't forget to add a return at the bottom.

function capitalize(str) {
  let result = str[0].toUpperCase()

  for (let i = 1; i <str.length; i++) {
      if(str[i-1] === ' ') {
      result += str[i].toUpperCase()
      } else {
       result += str[i]
      }
    }
   return result
  }

capitalize('hello there how are you') // Hello There How Are You

Anagrams in JavaScript(simple)

Tadea Simunovic — Sun, 10 May 2020 18:05:03 +0000

An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

Challenge
Given two strings, write an algorithm to check if they are anagrams of each other. Return true if they pass the test and false if they don't. E.g

anagrams('rail safety', 'fairy tales') --> True
anagrams('Cat', 'Act') --> True
anagrams('Save!', 'vase') --> True
anagrams('Hi there', 'Bye there') --> False

We need to create a function that will take two strings as an argument and compare them to see if they contain the same characters that are used the same number of times.

I will create a helper function to avoid errors, removing extra spaces, punctuation marks if any, and lower case both strings.

function cleanString(str) {
return str.replace(/[^\w]/g,'').toLowerCase().split('').sort().join('')
}

In this function I'm using RegExp.

Since we use sort() method that belongs to arrays we will need to temporarily turn a string to an array with split() method, sort() it and turn back to a string with join()

Let's call this helper method to compare two strings, like so:

function anagrams(stringA, stringB) {
 return cleanString(stringA) === cleanString(stringB)
}
function cleanString(str) {
return str.replace(/[^\w]/g,'').toLowerCase().split('').sort().join('')
}

console.log(anagrams("Hello","!@#ElLoH")) // true
console.log(anagrams("Helo","!@#ElLoH")) // false