DEV Community: Muse'

Auth in your react app!

Muse' — Sun, 28 Jun 2020 21:37:09 +0000

When starting a new project, it takes some effort to implement Login / Sign-up screens. We often have to repeat the same implementation again and again.

Authentication should be simple to remove friction to build an MVP (Most Viable Product) or get users started. Authentication logic should be reused to save development time.

There are a few online services that let you integrate your application with their Authentication APIs. But it doesn't really save much time when we have to go through long documentation to understand it, then spend more time learning and integrating.

An Authentication Service should be simple to integrate with. Below is an example:

Step 1 - Import and use Login Component

Step 2 - Handle response
After user submitted the form (Sign up or Log in), the "afterSubmit" callback function will be called. Here you can handle the response (full User object) by redirecting user to the home page, dashboard, etc.

jwtData is the user object which has properties like: user uuid, accessToken, email, name, picUrl, etc. which can be used in the app (or store in localStorage).

That's it!
There is no Step 3. In the next article, I will write more about how it works. In the meantime, there is more information in the link below:

AuthUI Repo - (https://github.com/authui/authui)

Happy Coding!

3 simple JS tricks to make life easier..

Muse' — Mon, 22 Jun 2020 03:07:51 +0000

I'm sure we all have our styles of writing code and are comfortable with but change and learning new ways to write code is essential as software engineers...

Here are some of the simple and clear tricks you can use to code faster!

Format your JsonData:

Many developers when using JSON.Stringify, use the first(required param) = value but in reality, there is 2 other optional params: replacer & space

Let me show you how it works and you'll understand exactly what i mean!

1st Step: Construct your JSON Data

2nd Step: Format it
We want to format it by first name and last name for each reader, and we want to add a tab to each level.
This how you'd write that:

3rd Step: console.log/render that formatted JSON!

Drop the Array.Filter() and rely on Set():

Make use of the native Set() object rather than filtering through the array to get unique values.

Incorporate some spread operating in your code:

Sometimes we all need to merge classes or objects together, spread operator can easily get the job done.

The code above will combine all those objects into one object!

Conclusion

ES6 has not only made JavaScript more efficient but also more fun, So if you haven’t taken the time to play around, you definitely should.
Let me know below in the comments if you have any favorite code tricks that you'd like to share :)

Understanding types of Errors and how to handle them!

Muse' — Sun, 14 Jun 2020 23:29:07 +0000

As Programmers, we all want to that works. And no one really enjoys getting errors, or the anxiety that comes from dealing with them. The best way around this would be to set up error detection and figure out the best way to handle them. My goal with this brief blog is to show you how to properly handle JavaScript and avoid shipping code that's messy and full of bugs.

First, we must understand that errors have different types.

1) Syntax errors: when your code is compiling.
2) Runtime errors: that are caused when executing/running your code.
3) Logic errors: that are caused by you as a programmer during your coding and writing functional logic.

Example of Syntax Error:

This code: will cause a syntax error because it is missing a closing parenthesis, even though the code below it might run if it doesn't depend on it all.

Example of Runtime Error:

This code: will cause a runtime error because openObject is not a method in javascript nor does it even exist.

Example of Logic Error:

if the inputs were (5, 2.5) this code will also cause a error, because it can’t handle fractional exponents, even though mathematically we can raise a number to the halfth power but in javascript this can be done with Math.pow()..

So how can one avoid these errors and what are the best methods for error handling?

These are two of the many ways:

Try & Catch:
try statements are statements that will execute.
If an exception occurs, the exception is placed in e and the catch clause is executed otherwise, the catch clause is skipped. The last clause executes after the try statement is finished,
it executes regardless of whether or not an exception was thrown or caught.

The onError():

This error handling was the first event handler to facilitate and handle errors in JavaScript, it can be used in many different ways, below is example of how to use to to make sure pictures load properly!

As Programmers, we all knew there many rooms to improve and master our skillsets and coding functionality, there’s no harm in trying, and no shame in admitting failure. There will always be mistakes, it’s what we do about them that matters in the end. I hope that you learned from this blog as much i did reviewing and writing up this content! Happy coding!

Naming Conventions Cheatsheet: Rails

Muse' — Wed, 12 Feb 2020 23:57:38 +0000

We all suffer from the stress that comes with realizing that you named something correctly but didn't follow the right convention... its 2020.. Let's put that stress to an end!
Below ill give you a summary for ruby/rails naming conventions..

We'll start with general ones than go into filesystem related conventions!

Ruby

(Class names) are CamelCase.

(Methods) and (variables) are snake_case.

Database

+--------------------------+
| top_food_spots |
+------------+-------------+
| id | ID |
| sighted_at | DATETIME |
| location | STRING |
+------------+-------------+

+------------------------------+
| Users |
+---------------------+--------+
| id | ID |
| name | STRING |
+---------------------+--------+

(Database tables) = snake_case.
(Table names) = plural.
(Column names) in the database = snake_case (but are generally singular.)

Model

(Model class names) = CamelCase.
These are singular, and will be writting automatically to the plural database table name.

(Model attributes and methods) = snake_case
and match the column names in the database.

**
app/models/bigfoot_sighting.rb

class TopFoodSpots < ActiveRecord::Base
# This class will have these attributes: id, sighted_at, location
end
**

Controllers

(Controller class names) = CamelCase
but (The Controller suffix) is always singular. The name of the resource is usually plural.

(Controller actions) = snake_case
and usually match the standard route names Rails defines
(index, show, new, create, edit, update, delete).

app/controllers/profiles_controller.rb

ProfilesController < ApplicationController
def show
# ...
end
# etc
end

Different Types of Pagination

Muse' — Wed, 12 Feb 2020 23:38:35 +0000

We all know that nothing makes us leave and abandon a site,
than a site having a slow load time…

To the simple site user, consumer.. api and api loading data is not their concern or even something they are aware of.. but as developers we must take into consideration all possible issues that may involve a user’s experience..

One of the many ways, this can be accomplished… is by “optimizing api’s for peak efficiency”…. and this can be done with api pagination!

So what is pagination?

Have you ever been on commerce store and went through many products, and was able to flip through the products pages and view a certain amount of them per page…
or scrolled through a gallery of images, only to be click next so that you may browse through another section.
this is essentially pagination!

Let's have a look at the most common pagination methods today!

Keyset Pagination:

it uses filtered values of a pages to determine the next group of items…

for example:

Client wants to see the most recent 20 products GET /items?limit=20
Upon clicking next, the query finds the minimum created date of 2019–01–20T00:00:00. That’s then used to create a “query filter” for the next page. GET /items?limit=20&created:lte:2020-01-20

The benefit to this approach, is this can be done without requiring more backend logic, other than that initial URL parameter!

Offset Pagination

this is done using two main commands: “Limit” & ”Offset”, these are mostly popular with apps that hooked with SQL databases

GET /items?limit=20&offset=50

the benefit to this approach is, it requires almost no programming, its stateless server-side wise but it also comes with the cons of offsetting large values, because the api would be forced to scan through a 100,000 database entries before discarding them.

Seek Pagination:

this is done using the queries..”after_id” & “before_id”, because unique ID’s are more reliable than field names such as Category name or product name..

Consider this example:

Client requests a list of the most recent items GET items?limit=20
Client requests a list of the next 20 items, using the results of the first query GET /items?limit=20&after_id=20
Client requests the next/scroll page, using the final entry from the second page as the starting point GET /items?limit=20&after_id=40

think of seek pagination as searching through a database using “WHERE”
in the case where you are sorting items by id:

And what if you were searching by usernames:

this would require two rounds of queries in the backend:
the first would search the database for those usernames and then translate them into an ID

and then a second query would use the id’s as “Where” value..

the benefits of this method: it works really well and efficiently with large offsets.
it consistently orders items and sorts the newly added ones as well.

the biggest con is when there’s items deleted from the database … “start_id” may no longer be valid.

I hope this was a nice intro to pagination, please make sure you continue to learn and try new logic with every new project :) Happy Coding!

Arrow Functions: What you should know.....

Muse' — Fri, 07 Feb 2020 22:14:31 +0000

ES5 to ES6
One of the biggest differences we all know of, is how functions have changed.
With ES5 the function keyword syntax was popular, then in 2015 with the intro of ES6, there was no longer the need for the keyword nor a return statement.
Functions have never been more clear and concise.
think of arrow functions as how functions were before, both accept arguments and run a specific set of statements every-time their called.

So what is the difference then?

Syntax: arrow functions don't need the keywords anymore!
Value: Arrow functions always inherited from the enclosing scope. and don't have their own value.
Arguments: with ES5 theres an object that can be used to get all the arguments passed to the function. But with arrow functions, they are bound to arguments of enclosing scope.
This: The value of this inside an arrow function remains the same throughout and its value is connected to the closest non-arrow parent function only..

Here's an example below:

I hope this might have gave you a very simple example of how arrow functions work! Please make sure you refer to the docs for further reading! Happy coding

Javascript Scopes Types .. Simplified!

Muse' — Thu, 02 Jan 2020 21:35:52 +0000

Just like with many programming languages, there’s fundamental concepts that might seem confusing even though they are essential to mastering the target language. We can all agree that Scope and Scope is one of them.

Hopefully by the end of this blog post, you’ll be able to find it less confusing and you’ll be on your way to writing better, more efficient and cleaner code.

What is Scope?

Scope is the accessibility of variables. It refers to where and which part of your program can your variables be accessed/utilized.

How Many types?

Global Scope, Function Scope and Block Scope

Is Scope even that important?

Yes! And the main benefit is security and preventing changes to our variables through out our code and to also make sure we don’t end up with same variables.

Global Scope:

-> Not inside a function or block {}

-> Can be accessed anywhere.

Local Scope:

-> Variable declared inside a function

-> Only accessed in that function and no where else outside..

Block scope:

-> They can be accessed within the nearest pair of curly braves,
but not outside of it.

-> Unlike var, it doesn’t have that block scope limitation.

*Quick tip:

Scopes can be nested on top of each other..

The let variable that’s a block scope, is inside of the local scope, which is nested inside the global scope.

*Quick tip:

Most modern day browsers support "Strict Mode"
which basically means, undeclared variables are not automatically global.
so if you were to assign a variable without const or var, this would throw an error.

Scopes might seem very confusing at first, but with the more practice and detail you give to how you initially write out your code, the less errors and debugging your code will experience..!

Happy coding!

The tough choice: Ruby or Javascript

Muse' — Thu, 03 Oct 2019 20:26:46 +0000

JavaScript versus Ruby.
Which one do I like more and which one is better for me?
When I first got interested in coding, I sought out to teach myself the basics without any help.
I spent a long time deciding on which language I should start off with. And I went ahead with a language called Javascript and here’s why:

JavaScript has a huge community: The JavaScript community continue to grow the language supports and library creations with every passing year. With that comes a huge pool of working professionals that you can work with. 
JavaScript can easily be setup: simply from launching google chrome and accessing the developer mode. A couple of clicks and you are ready to code away and build!

JavaScript with the addition of Node: makes it a full stack platform to build pretty much any program you’d like, especially with how scalable the JavaScript language is in itself.

And for that and many other reasons, I set my path of self teaching geared at focusing on JavaScript and utilizing the online resources I could. Till I realized that without proper instruction/mentorship, I wouldn’t truly be maximizing my learning potential and even more with how sophisticated JavaScript can get at time. So I went on to compare languages till I realized that ruby might be a language that might be a better choice for me at the same that I am, a beginner. And no matter how much I do enjoy JavaScript..

Ruby in my opinion is a better choice for a beginner and this is due:

To the simplicity of the syntax, and how easily variables can be declared and having to not worry about curly braces and semi colons unlike with JavaScript.

Also Because it truly lives us to the philosophy it was built on, “The Principle of Least astonishment”, its creator Mats, believed that computers are the slaves and we are the masters not the other way around. We should be in control!
So he set out to make ruby as easily as possible, to ensure that with every build you are least surprised by your code because of user friendly and simple the language is.
And lasty, we all know that with languages, your first new language that you try to pick up is the hardest on you. But as soon as you get familiar with one language, you realize that there’s always similarities between vocabularies and word roots but it’s the grammar and the structure that’s difficult, same goes with ruby and JavaScript, yes the syntax is different and yes JavaScript might seem more cool and popular but as a beginner I opened up to the idea of taking it slow and deciding to learn to code rather than coding in the language I love, that can always be done later on in life.