DEV Community: blindbat

Why Chakra-UI is your secret lover... Stop denying it

blindbat — Tue, 29 Mar 2022 14:38:21 +0000

Chakra-UI is a modern component library for react created by Segun adebayo. It comes with accessible, reusable, and composable React components that you need to build front-end applications.

Chakra-UI uses Emotion and Styled System. Style systems are great kinds of infrastructure that can be used to build a UI component library. They make so many things much easier.

A great note is that Chakra-UI is typescript friendly and ready for any react app.

CREATE-REACT-APP EXAMPLE


import React from 'react';
import {
  Button
} from '@chakra-ui/react';
import customTheme from "./customTheme";

const App = () => {
  return (
      <Button colorScheme="facebook" leftIcon={<FaFacebook />}>
    Facebook
  </Button>
  );
}

TYPESCRIPT EXAMPLE

import React from 'react';
import { Box } from 'react';

type props = {
   message: string;
};

const flexSettings = {
    flex: "1",
    minW: "300px",
    textAlign: "center",
    color: "white",
    mx: "6",
    mb: "6"
} as const; 

const Message = ({message}: props) => {

   return (
     <Box {...flexSettings}>
        {message}
     </Box>
   )
}

STYLED-COMPONENT EXAMPLE USING CHAKRA-UI

import {chakra} from '@chakra-ui/react';

const Card = chakra("div", {
   baseStyle: {
    h: '300px',
    w: '300px',
    rounded: "sm",
    shadow: "lg",
   }
})

...
<Card>
 hello there
</Card>

var let and CONST

blindbat — Tue, 29 Mar 2022 14:37:59 +0000

While this assumption might be partially true, it's still possible that some of these features remain a mystery to some devs.

One of the features that came with ES6 is the addition of let and const, which can be used for variable declaration. The question is, what makes them different from good ol' var which we've been using? If you are still not clear about this, then this article is for you.

In this article, we'll discuss var, let and const with respect to their scope, use, and hoisting. As you read, take note of the differences between them that I'll point out.

Var
Before the advent of ES6, var declarations ruled. There are issues associated with variables declared with var, though. That is why it was necessary for new ways to declare variables to emerge. First, let's get to understand var more before we discuss those issues.

Scope of var
Scope essentially means where these variables are available for use. var declarations are globally scoped or function/locally scoped.

The scope is global when a var variable is declared outside a function. This means that any variable that is declared with var outside a function block is available for use in the whole window.

var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.

To understand further, look at the example below.

var greeter = "hey hi";

function newFunction() {
    var hello = "hello";
}

Here, greeter is globally scoped because it exists outside a function while hello is function scoped. So we cannot access the variable hello outside of a function. So if we do this:

var tester = "hey hi";

function newFunction() {
    var hello = "hello";
}
console.log(hello); // error: hello is not defined

We'll get an error which is as a result of hello not being available outside the function.

var variables can be re-declared and updated
This means that we can do this within the same scope and won't get an error.

var greeter = "hey hi";
var greeter = "say Hello instead";

and this also

var greeter = "hey hi";
greeter = "say Hello instead";

Hoisting of var
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that if we do this:

console.log (greeter);
var greeter = "say hello"

it is interpreted as this:

var greeter;
console.log(greeter); // greeter is undefined
greeter = "say hello"

So var variables are hoisted to the top of their scope and initialized with a value of undefined.

Problem with var
There's a weakness that comes with var. I'll use the example below to explain:

var greeter = "hey hi";
var times = 4;

if (times > 3) {
    var greeter = "say Hello instead"; 
}

console.log(greeter) // "say Hello instead"

So, since times > 3 returns true, greeter is redefined to "say Hello instead". While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realize that a variable greeter has already been defined before.

If you have used greeter in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code. This is why let and const are necessary.

Let
let is now preferred for variable declaration. It's no surprise as it comes as an improvement to var declarations. It also solves the problem with var that we just covered. Let's consider why this is so.

let is block scoped
A block is a chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block.

So a variable declared in a block with let is only available for use within that block. Let me explain this with an example:

let greeting = "say Hi";
let times = 4;

if (times > 3) {
let hello = "say Hello instead";
console.log(hello);// "say Hello instead"
}
console.log(hello) // hello is not defined
We see that using hello outside its block (the curly braces where it was defined) returns an error. This is because let variables are block scoped .

let can be updated but not re-declared.
Just like var, a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So while this will work:

let greeting = "say Hi";
greeting = "say Hello instead";

this will return an error:

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

However, if the same variable is defined in different scopes, there will be no error:

let greeting = "say Hi";
if (true) {
    let greeting = "say Hello instead";
    console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

Why is there no error? This is because both instances are treated as different variables since they have different scopes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let
Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const
Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped
Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared
This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

const greeting = "say Hi";
greeting = "say Hello instead";// error: Assignment to constant variable.

nor this:

const greeting = "say Hi";
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

const greeting = {
    message: "say Hi",
    times: 4
}

while we cannot do this:

greeting = {
    words: "Hello",
    number: "five"
} // error:  Assignment to constant variable.

we can do this:

greeting.message = "say Hello instead";

This will update the value of greeting.message without returning errors.

Hoisting of const
Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

var declarations are globally scoped or function scoped while let and const are block scoped.
var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
While var and let can be declared without being initialized, const must be initialized during declaration.

Requesting data from an API with Rails

blindbat — Tue, 29 Mar 2022 14:37:47 +0000

I'll be using polygon.io API in the below examples.

Gem to Install

Gemfile:

gem 'faraday'
gem 'json', '~> 2.5', '>= 2.5.1'
gem 'dotenv-rails', groups: [:development, :test]

Execute:

bundle

Generate Controller & View for making API requests

rails g resource stock

Now open /config/routes.rb and add this:

We'll make API requests using this route and display responses on a browser on the same route.

Open /app/views/stocks/search and fill it with:

Which gives us a form to enter a ticker whose stock data we can pull from Polygon API. And in the if statement, we have a response variable set to response from API if we made a call in the controller.

if params['stock']
  @response = Searchstock::Search.by_stock(params['stock'])
end

Create API module

Now let's actually get into the process of making an API request to Searchstock.
Although we have Faraday installed, it can't be directly called from within the controller.
Add it inside /controller/concerns/searchstock.rb. Make sure not to change the name of the folder.

I'll create searchstock.rb inside /concerns/searchstock.rb

The class inside the module and the method inside the class can be named anything.

From the code above, we can make out that - by calling Searchstock::Search.by_stock method with a ticker parameter would make an API call to Searchstock, but what about ENV['API_KEY']?
We sure can replace ENV['API_KEY'] with Polygon's actual API key, but leaving an API key within the code is not right. So, we are going to place our API key as an Environment variable.
First, let's place the API key as an Environment variable in our local machine.
To do this, we'll be using dotenv gem.

Install Dotenv-rails

Add this line to the top of your application's Gemfile:
gem 'dotenv-rails', groups: [:development, :test]
And then execute:
bundle
Now add a file named .env to the root of your application. Make sure not to change the name of the file. Add your API key in the first line like so:
API_KEY=your_api_key
Replace your_api_key with your actual key provided by OpenWeather.
If you're going to commit your work, add the .env file to .gitignore so that git does not track it.

Call API from the controller

Now for the final part, add this to the search action of your controller /app/controllers/stock_controller.rb

if params['stock']
  @response = Searchstock::Search.by_stock(params['stock'])
end

Make sure to match the names of the module, class, and function that you named earlier.

Check the result

Now, open the server
rails server
And visit http://localhost:3000/stocks/search from your browser.
Search for a ticker to see the response.

Why CSS Frameworks might be a great choice for your next project

blindbat — Tue, 29 Mar 2022 14:36:19 +0000

What is CSS?

CSS stands for Cascading Style Sheets with emphasis on "style." At the same time, HTML is the structure of a webpage. CSS helps create the layout and designs of your project. Without CSS, websites would have trouble looking different from each other. However, using pure CSS is tedious and sometimes stressful to write.

<p> this is a paragraph</p>

How Does CSS Work?

CSS brings style to the webpage by interacting with HTML elements. Individual HTML tags can be considered small components of a more extensive application. CSS can take a p tag, for example, and change the element's color and size.

p { color: red; }

Why Use a CSS Framework?

Personally, developing a small to midsize application with pure CSS can get out of hand fairly quickly. That’s why it’s crucial to practice and get accustomed to the code. It is a struggle for those who want a beautiful and functional website with limited resources and time. Until recently, I started my journey exploring several CSS frameworks through trial and error. I found what works best for me; however, choose which one is the best for you. Many people will debate on the best CSS framework to use, from Bootstrap with jQuery to Ant Design for React. Choosing the way you design your next project is important and, based on your timeframe, it can make or break your deadline.

Pros

If you are a small team developing an application with a CSS Framework, you can significantly spend up the development. Pure CSS can take up much time to create midsize to large applications, so that CSS Framework would be your best bet.
CSS Framework compatibilities are usually far superior then writing pure CSS from scratch because of the excellent developers working on it and the amount of time and knowledge to work for all browsers.
As time goes on, CSS frameworks continue to become widely adopted by large and small companies for production use; one example is https://www.ny.gov

Cons

Not all CSS frameworks are created equal. Even though talented developers are working on the framework that adoption or community may be affected by the sheer complexity, it's not that great.
Back then, one famous CSS framework called Bootstrap was known for its excessive use of unused CSS during production, possibly contributing to slowing down performance on your platform.

How to not use Frameworks in Small Projects?

Flex
Since flexbox is a whole module and not a single property, it involves many things, including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”), whereas the others are meant to be placed on the children (said “flex items”). (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Grid
CSS Grid Layout (aka “Grid”) is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. (https://css-tricks.com/snippets/css/complete-guide-grid/)

Conclusion

In conclusion, if you're trying to run away from CSS, unfortunately, there is nowhere to go. Pure CSS is a fantastic thing to learn, and having the skills to turn an HTML website into a beautiful website is a must. CSS frameworks make CSS a little bit more enjoyable.