markdown

A collection of 32 post

Normalize your complex JS objects

Data normalization The process of normalization its havily used in every software design because normalizing data has a big impact on reducing data redunancy. When to normalize your data? Suppose we received the following data from an api: Now, you get a task to find the item with id of 1. How will…

What is a Spring Bean?

A “Spring Bean” is simply a Java object. When Java objects are created by the Spring Container, then Spring refers to them as “Spring Beans”. Spring Beans are created from normal Java classes just like Java objects. Two ways of creating Spring Beans: 1. By using an xml file: 2. By using java code…

Custom react hooks using useEffect

Here is the working example. Ever wonder how to create a custom react hook using useEffect? In the following steps we will discuss more about this subject. First, let’s start by creating our custom hook: In the code above we are creating an effect which will be called when either counter or maxValue…

How to generate ssh key using putty-tools

How to generate ssh key using putty-tools? Simple, just follow the tutorial bellow. Why it’s better to have a ssh key and just use it? Better security and safer files transfer. Let’s start: First we need to install putty-tools, on ubuntu you do this by using apt-get command: After you’ve…

Using Set in JavaScript

What is Set in JavaScript? Set lets you store unique object references or primitive values. Let’s start with an example: 1. Using primitive values What we illustrated above is just a simple usecase where we have primitive values and we need those values to be unique, creating a set is the simplest…

Pure functions

What is a pure function? You can say about a function that is pure when for the same arguments it returns the same result every time. Examples: Pure The function that we will describe below will return the same result for any given 2 numbers. Impure Impure function means that we will not get the…

Higher order functions in javascript

What is a higher order function in Javascript? A higher order function is a function that can accept another function as argument or it returns another function as a result. Examples: pass a function as a parameter to another function fn(fn1); //will log ‘fn1’ Above example is going to return a…

Spread and rest operator(...) in javascript

These in javascript were first introduced in ES2015(ES6) and it allows us to spread and rest multiple elements. Both rest operator and spread operator refer to the same operator. Why and how to use … in javascript and what it does? There are two ways of using the in javascript: Spread operator…

Differences between var let and const in javascript

What are those var let and const keywords in javascript? Well, they are use to define variables. Lets take every one of them and discuss more: 1. Var This keyword was used from the beginnings of javascript, but it had some weird behaviour. Example: What do you think about the code above? If you are…

Array.map() function in javascript

What does map() function of Array in javascript do? Simple, the map function creates a new array with the results of calling a callback for every element in the array. Example: //mulyiply every element by 2 and create a new array with the newly created elements //Result? multipliedArrayBy2 will have…

Mocking NGRX store for easy testing your angular components

If you want to test your angular components and you are using redux with some selectors, then you’ll surely need @reibo/ngrx-mock-test How to use it? First, install as a development depenancy with Second, initialize the package and import it in your tests: Final step, get the store and dispatch and…

CSS Scan or an easiest way to inspect and copy CSS

CSS Scan or how you can easily copy any css by the speed of light Get it here. What is CSS Scan? Just as the name suggest, it’s an tool which can be used to copy CSS from other websites so you don’t need to open the inspector to learn how something it’s actually coded. Just click and element and…

Backend part with ExpressJS, GraphQL and MongoDB for a basic Todo app

Backend is here Here is the live version on codesandbox Table of Contents Table of Contents What is graphql? Intro Install prerequisites Remove boilerplate code Code Entry point (index.js) Queries Components TodoList.js TodoCreate.js TodoLike.js Conclusion What is GraphQL ? Simple, a query language…

React and ApolloGraphQL for a basic TodoApp

Here is the live version on codesandbox Table of Contents Table of Contents What is graphql? Intro Install prerequisites Remove boilerplate code Code Entry point (index.js) Queries Components TodoList.js TodoCreate.js TodoLike.js Conclusion What is GraphQL? Simple, a query language used to define an…

Superb angular particle effect for Angular 7

Particle effects on buttons for Angular 7 I’ve been developing this nice directive with particle effects that is mostly used on buttons Angular 7. Here is the link to npm package. So, basically you just need to add the selector to your desired DOM element that needs to be animated with particle…

Password strength visualization for Angular 7.

lib-psv Super awesome password strength visualization for Angular 7 now has an npm package. Here is the link: https://www.npmjs.com/package/lib-psv Basic usage: https://codesandbox.io/s/035l7v1zmn Github https://github.com/danielpdev/lib-psv How to use this npm package: Just add to your desired…

Remove subfolder with specific name in linux

Remove specific subfolder in linux Sometimes it happens that you just have to delete a subfolder that is duplicated in multiple folders. You can also go folder by folder and try  or you can just use find, exec and then rm, like so: find -type d -name node_modules -exec rm -rf {} \; I’ve used…

Registering Providers in Angular 6

Now, in angular 6 there is no need to do that and you can use the new providedIn property of @Injectable decorator:

First steps after MongoDB install

After you’ve completed the mongo database installation then you can start using it. First, create a database after you log in to database terminal using command: That’s it, now you can use it an do whatever you what with your database because you are in full control. https://docs.mongodb.com/manual…

Get rid of long paths

Get rid of long paths If you are using paths and the project it’s getting bigger you might want to consider using absolute paths: create a .env file under the root directory of your node app: This way you’ll not have to worry again about ugly paths and you can move files within src folder freerly.

Final vs effectively final in java 8

Final and effectively final in java 8 The main difference between this two keywords is that when you use final, you explicitly write it before the name of the variable and you can’t change the value overtime. Wereas with effectively final, you declare as a normal variable and if you don’t change…

Async/await in javascript

Async/await in javascript First added in ES2017 and maybe in the near future they will become the most used keywords for handling promises. What is async and await? Let’s start with async and then move on with await. Async It’s placed before any function definition that returns a promise, if there…

Angular directive basics [2] - Adding styles

Directive with styles There are time when you want to build a directive but you also require to add some minor CSS styles for it, unfortunately this is not possible with the current implementation of @Directive in Angular. But there is a chance to do just that by adding into play the @Component…

Angular directive basics

Angular Directives basics Angular directives allow you to attach new behavior to DOM elements by using metadata properties: Metadata Properties: exportAs - actual name that is used by other components inside their templates. host - js object of class property to host element properties inputs - list…

Fixed bar with animated social icons

Fixed bar with animated social icons Have you ever wondered how some of the websites that you visit have a fixed bar with social icons on the left of the page and it just sits there? Have no fear because this post will cover that! How to make an element fixed: .div{ position: fixed; } Done! Yes…

Sum of two numbers using preprocessor directives

Build a simple preprocessor directive for getting the sum of two numbers Sum of two numbers using a simple macro: Why use a macro instead of a function? The first and main reason is portability in different architectures or compilers because all the preprocessor directives are processed before the…

CSS Animations

CSS Animations When building a css animation you’ll need to know to essential keywords: @keyframes animation The first one is used to define how an animation behaves over time and the second one is used to reference the keyframes that we create. Let’s assume that we have a box and we need to shift…

Get started with RabbitMQ using ReactJS

Achieve an easy app that sums up two numbers using a RabbitMQ queue. Before starting this post I advise that you should have already complete the RabbitMQ starting tutorial. 1. Complete the task using only javascript: That’s all it takes to complete an easy task like adding up two numbers.…

How to create centered and responsive FlexBox items

How to create centered and responsive FlexBox items The Flexbox layout gives you great power when it comes to aligning items horizontally and vertically in a container. If you’ve used float’s before, you know that they only allow items to flow horizontally to  right or to left. How to center items…

How to create a user and give sudo privileges on Ubuntu

Creating user First you need to login as root: If you don’t want to be logged in as root, you need to write before executing that command: Assigning sudo privileges First you need to login as root: Now, our user can use sudo command.

RabbitMQ default user 'guest' not working

Issue ( not really an issue :) ) After you install RabbitMQ and enable his plugin management console  you can connect to that management console by visiting: http://[your droplet’s IP]:15672/.However there is a problem if you don’t connect to it from localhost: http://localhost:15672/. Because as…

Why use rems over ems units in CSS?

What is em measurement unit? I assume you already know the basics of CSS and what ems measurement unit means because this post will cover just the differences between ems and rems. Let’s get started… When it comes to using font-size property in CSS some of the most common used are pixels and ems but…

Get The Best Of All Posts Delivered To Your Inbox

Subscribe to our newsletter and stay updated.