DEV Community: Kemystra

What does REST APIs mean anyway?

Kemystra — Sun, 28 Aug 2022 13:53:31 +0000

Why I'm talking about this

REST API (or RESTful API) is one of those technical term that is always thrown around when people talk about web dev.

Here, we can use a REST API from openweathermap...
...make sure that your APIs are RESTful...
Cat-as-a-Service is a RESTful API service...

It's not really a problem when you are casually learning, until you have to hit StackOverflow (which is basically everyday):

I'm not sure if this way of doing stuff is RESTful.
Your API is not RESTful, fix that.

In a spree of Google searches, you opened (yet) another tab and started looking up what is REST. And all you get after getting dangerously near to the limits of your poor RAM is some techobabble mumbo jumbo. Making the matter worse is that English is in fact, my second language. (I thrived writing blogs with online grammar checkers, super helpful).

At least those are my experiences, and here I would like to rephrase them with extra clarity. We will go phrase by phrase, and clarify them one part at a time.

Let's start with APIs

API stands for application programming interface. Let's see what we can do with this.

You can also define APIs as interfaces for programming applications. Compare that with user interface, an interface for users.

For non-English natives, interface is the point where two systems meet.

All in all, the "verbose" definition of API is a point where two applications meet, and developers may use this point to do certain functions.

In the case of web development, an API is often referring to a URL that returns JSON instead of a webpage. That URL is the endpoint of the API. A refresher for you: URL means Uniform Resource Locator.

The URL functions as an identifier for its resource. In a sense, resources are the "name" part of the name-value (or key-value) pair. Each resource would have its state, which is the "value" part.

For example, let's say you are calling an API to request the latest weather info in Germany, and the API returns "raining".
The URL of the API is the identifier of your resource (that is, latest weather info in Germany). And the state of the resource is its response (that is, raining).

So what's REST

REST stands for representational state transfer. And what the heck is that?

REST is simply a software architecture, a set of rules on how the software should behave, and what to expect from them. They don't care how you implement them, as long as it follows these rules, or rather, constraints.

When calling an API, you give the server the exact URL and the HTTP method. The server receives this request, read from a database, do a sprinkle of processing, and return them to you in the form of JSON (although they can also return XML or HTML).

So the whole exchange is, at a fundamental level, a transfer of information. And the server transfer a representation of the state of the requested resource.

What is the representation of state here? It's the format in which it is transferred, be it JSON, XML, or HTML.

Now, let's talk about the constraints that an API has to follow to be considered RESTful.

How to be RESTful

Have a uniform interface

This one has 4 parts:

The API request must include the resource identifier (a unique subdirectory, an attribute, etc.)
The response should be enough for the client to modify the resource
The request & response should be complete; the request have all the info needed for the server to process, and the response have all the data requested.
The response need to also inform clients of possible ways to change the state of resources. For example, if you request for the name of the latest US president, the response should also includes methods to change that name. Obviously that's absurd, but that's the situation of most public APIs today. They usually serve data that are not meant to be changed by the user. As such, a lot of public APIs are not actually RESTful.

Only between independent servers and clients

This info transfer is based on requests. A client only needs to request some data, and the server only response when it received the request. A server should not send a response without any request.

Does not store sessions (stateless)

In a RESTful API, a server has no idea about the previous requests of a client. Its response is not affected by other requests made by a client, as each request must have enough info for the server to work with.

Able to be layered

In a perfect world, there is a direct connection from a client to a server. But in reality, system admins might implement a VPN for security, or caching servers in between. A RESTful API shouldn't give a f*ck about that.

Able to be cached

The info that a server send should be cacheable. It is important that the client knows if their data is stale, so that they can request the latest one.

Able to send Code-on-demand (optional)

Basically, a RESTful API can send a working code to the client for the client to execute. A common example of this is webpages (the server returns a render-able HTML page). But it's optional, why bother?

Closing words

Lately, I have little time to polish my blogs, and while I like to maintain their quality, consistency is still a big part of it. I'm sorry if this particular piece is not living to your standard, based on my previous works.

How social media present your website?

Kemystra — Thu, 11 Aug 2022 14:20:00 +0000

Why should you care

Most people found a useful (but niche) website on social media. Where did you find out that there are sites that can generate CSS gradients if not on Twitter? Other than blogs and Google searches, social media is a big marketing opportunities for a lot of people, especially with the rise of code influencers.

Your site might have descriptive meta tags for those Google bots to drool over you 🥴. You might maintain a blog (which people may or may not care), talking about the superiority of your site. But once one of your followers post your site on Twitter, it's a completely different game.

A concise description of your site, accompanied by an intriguing thumbnail, will help you get those clicks.

Sure you can write them yourself, but isn't it easier if it can be fetched from your site automatically? It also would help your site look professional, and not just botched during a weekend (do you 🧐?).

Customizing with Open Graph tags

Open Graph tags are part of Meta's (formerly Facebook) Open Graph protocol. It's a snippet of HTML meta tags originally used by Facebook to improve the presentation of a website.

To recognize these tags, they have og: before the property name:

Open Graph tags are used by other websites too, including LinkedIn and Twitter. Even some messaging apps (WhatsApp, iMessage, etc.) support these tags to generate a snippet of your site.

Meta (can we just call it Facebook?) provides 17 different tag names to use.

Yet another convention to learn..

Well, you only need 3-4 of these tags to get started, so don't worry.

Specifying snippet's title

The title should give a good first impression to your site. Here's how you can do it:

<meta property="og:title" content="10 Best Bananas to Eat today" />

This is the raw title, DO NOT put your site's name or branding here. The title should serve as an accurate representation of what you're showing on the site

Make sure that it's short to avoid cutoff. A good guide is 40 characters on mobile screen, and 60 on desktop screen.

*cries in responsive layout*

Yes, I feel you...

Specifying the juicy thumbnail

Images are obviously the number one attraction in any social media. Simply insert them like this:

<meta property="og:image" content="yourmom.jpg" />

The minimum recommended dimension is 1200x630. Larger images should have an aspect ratio of 1.91:1.

Telling the type of content

It is much easier for social media's algorithms to understand what's your content about when you tell them what it is (duh 🙄).

Here's how:

<meta property="og:type" content="article" />

There's quite a lot of type that can be specified, take a look here.

Describe your site

This one is pretty straighforward, I guess. Facebook (lol) recommends 2-4 sentences, but that's definitely gonna be truncated. Instead, make it short and sweet.

<meta property="og:description" content="Learn how to fight me" />

Closing words

ALL of these stuff are unnecessary for your site, but it helps when marketing them. The techniques of increasing traffic to a website organically (read: no fake accounts) are under a topic called SEO (Search Engine Optimizations). Here's a Fireship video to get you started.

And as always, happy coding 🙌

Why NodeJS in Front Ends?

Kemystra — Tue, 02 Aug 2022 15:45:03 +0000

Why I wrote this

Back when I started web development, I watched (and still watching) web developers' channels on Youtube (such as Fireship.io). One of the things that kept bugging me is the fact that they use NodeJS when working with front end frameworks or library.

Like most developers, I googled the topics. After a few hours of banging my keyboards (both with hands and head 🙃), the things that I gathered are:

NodeJS is a runtime for JS (what?)
You use NodeJS for both front-end and back-end
Most "Getting Started" tutorials talk about using Node JS as server and back-end stuff (i.e: the complete opposite of front-end dev.)

None of them answered my questions of why do you use NodeJS in front end environment.

Fast forward a few NodeJS intros and reading docs of front end frameworks, I finally grasped the why's and how's. And here, I would like to save the hassle of other web developers who are dipping their toes in the water.

A bit-sized intro to NodeJS

Here's my best one-liner for this: "It's the browser's console without GUIs". You give it JS code, and it will run them. NodeJS is actually based on Chrome's V8 JS engine, so it really is an upgraded component of a browser 🤯.

It's only job is to run JavaScript, while giving access to other stuff not commonly done on browser (read/write files, executing shell scripts, etc.)

So it's a back-end software?

Technically yes, it sits on your computer (or servers), not on the browser.

Then why in the world would you develop front-end stuff with that?

As always, the truth is always a tad bit complicated.

Purpose of NodeJS on Front End dev.

If you have been exposed to Python long enough ~~to acquire Slowness II effect~~, you may have heard of PIP. It's a package manager, meaning that it helps you install libraries, uninstall them, and keep tracks of what you have installed.

Similarly, NodeJS has NPM (though there are others, this one is the default).

NPM have packages that you might expect: Express for back-end, http library to listen to requests, etc.

But it also have front end frameworks as packages: React, Vue, Svelte, etc.

Why it's there when we have CDN links? Which one should I use now?

And here are the reasons:

1. Easier package management

This is how you normally would import your favorite frameworks into your site:

<script src="https://cdn.js/myframework/doDSF923HkHWEdss=="></script>

What's wrong with that, you ask? Well, if you have multiple frameworks, the order of tags inside the HTML file become critical. Some script tags have to be put at a higher order, while have to be placed lower.

Mess this up, and get ready for an afternoon debugging session 😵.

NodeJS uses the CommonJS syntax for exporting and importing "modules" (e.g: importing your frameworks). So instead of script tags in HTML, you use this in your JS file:

const MyFramework = require("myframework")

I do admit, it's kinda an edge case, but the next one would surely benefit everyone.

2. JS for programming development tools

A neat aspect of NodeJS is that it allows building tools that can seamlessly interact with your front end code, because it natively uses JS. Development tools can include:

Module bundlers, which combine all your JS code and its dependencies into one massive file. Examples include webpack and browserify.
Tree shakers, which "shakes" unused or dead codes from your JS files. One of them is common-shakeify

and others...

Sure, you can use any language under the sun to program these, but parsing JS code is better done with JS itself.

And to use JS, you need a way to run JS without browser, hence NodeJS.

Also, front-end developers don't have to force another programming language's syntax inside their head just to make a dev tool 😵‍💫. They understand what they want, so why don't we give them a little push?

Closing words

So, I guess that's all I have to say about this. TLDR; people use NodeJS because it's easier to manage libraries, while having access to lots of dev tools.

There are certainly other alternatives to NodeJS, like bun and deno. These are the same stuff (with additional... stuff), their function is to run JS outside of your browser.

They are the same stuff at the end of the day, and you can choose whatever you like. Though NodeJS is way more popular.

Happy coding! 🙌

Day 25-33: JS Calculator

Kemystra — Thu, 26 May 2022 14:14:04 +0000

Procrastinated too much after the JS Calculator project, I should be more consistent.

The project

The aim is to build a calculator with Javascript, with the help of frameworks and libraries. I'd never actually build a calculator in any language before, so I'm not too familiar with its algorithm (and it certainly shows if you follow my Twitter lol).

This is the first project where I got to use Redux to manage states. There's too much boilerplate code to use it in small projects, but now I'm facing into this, might as well use it.

In total I used React, Redux, SASS, and FontAwesome. For math formulas evaluation, I use math.js library.

Result

Here it is:

What I learned from it

I'm still not good in programming

This project took me a week, and it revealed my weakness in problem solving in programming. It can be dark at times, but I have to understand that I still have a long way to go before being good enough in programming.

There's quite a lot that I didn't know. Algorithms and data structures, design patterns, programming paradigms, etc. These are tools that may help me in this project and other projects in the future.

In a nutshell, more learning is absolutely necessary to thrive in this field where competitions are fierce and people come and go.

Never underestimate a project's complexity

Upon seeing a problem, I pulled the keyboard, opened VSCodium, and started typing away. This is honestly a bad practice of mine. Getting stuck midway is a punch to the face that I deserve for my ignorance.

A good problem solver would approach a problem with caution and an eagle eye, so that they can spot weird edge cases or possible bugs ahead of time. And no, that's not me. I simply head-dive into the problem, only to be completely bugged later.

As such, I learned that a proper planning prior to actually writing code is necessary. You don't want to get bugged, do you?

React's logic separation is actually good

Yeah I understand now why React do this. The idea of isolating UI code and the logic really does come easy to me. There's not much to say about this LOL.

Pay attention on package version requirement

Although FreeCodeCamp doesn't enforce this, their unit tests only supports certain keywords (e.g: ReactDOM.render) that are not up-to-date to React 18. This one tied my development for a week, and a simple package version warning would have made this a lot easier.

Afterwords

Calculator JS was, and still, the biggest project that I have finished. It's hard but it's worth it. Now that I realize my weakness, I can work to improve myself to be a better developer.

Follow me on Github!
Also on Twitter!

Day 20-24: Drum Machine

Kemystra — Sun, 01 May 2022 13:14:15 +0000

The project

As the name suggest, we're gonna make a site with drum pads that play sound when triggered 🥁. The site was made with React and SASS. I figured I'll take 3 days to complete this, but circumstances pushed this to 4 days. Life always get in the way, so I should be more prepared about it 💪

What I learned

How to dynamically render components in React

We can use array and its methods, such as Array.map():

render() {
    const soundArr = ["blip", "clan", "clap", "cymbal", "kclick", "piano1", "piano2", "snaps", "whoop"];
    const keyArr = ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"];

    return (
        <div id="drum-machine">
            <p id="drum-title">Drum Machine</p>
            <Display />
            {soundArr.map((soundClip, index) => <DrumPad audioName={soundClip} key={keyArr[index]} cap={keyArr[index]} />)}
        </div>
    );
}

onkeydown event on the document

To detect key presses on the HTML document, we can use the onkeydown event:

document.onkeydown = (e) => {
    let pressedSound = document.getElementById(e.key.toUpperCase());
    if(pressedSound) {
        pressedSound.play();
        document.getElementById("display").innerText = pressedSound.parentElement.id;
}

Note that there used to be onkeypress event, but it is now deprecated.

Add gradient overlay over background image

We can use background-image CSS property for this:

background-image: linear-gradient(180deg, rgba(0,255,233,0.0) 0%, rgba(0,0,0,1) 100%), 
    url('https://t4.ftcdn.net/jpg/03/58/36/11/360_F_358361101_z9baaIEmkyst0OQ8mov82r9hen7glZGb.jpg');

Afterwords

It's nearing the end of Ramadan, which means preparation for Eid is incoming. It will be a very busy week. Hope I can still continue doing this throughout Eid celebration.

Anyway, happy Eid for Muslims around the world! ✨

Follow me on Github!
Also on Twitter!

Day 17-19: Markdown Previewer

Kemystra — Mon, 25 Apr 2022 13:31:08 +0000

This post is about the Markdown Previewer project on FreeCodeCamp. This is how I started the project.

The essentials

I decided to not use Redux yet, because I only need to maintain one state inside the whole app. Redux would be such an overkill.

I got to use Prism.js and marked.js library for this project. Although I had to drop Prism.js cause it's not working and it's not necessary anyway unless if I need to implement syntax highlighting in a site.

This is a React site, with almost no static element. It is styled using SASS as a preprocesser for CSS.

marked.js

marked.js is a very simple library to use. You can include the CDN link to get started:

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js" integrity="sha512-hzyXu3u+VDu/7vpPjRKFp9w33Idx7pWWNazPm+aCMRu26yZXFCby1gn1JxevVv3LDwnSbyKrvLo3JNdi4Qx1ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

To parse pure Markdown, use the parse method:

let textBox = document.getElementById("text");
textBox.innerHTML = marked.parse("*This is italic*");

marked.js also offers a ton of options, and I'm going to talk about one here.

To treat line breaks in text as an actual line break, set the necessary options to true with marked.setOptions():

marked.setOptions({
  breaks: true,
  gfm: true
});

You can also pass them as the second argument when parsing Markdown text:

let markdownText = "# This is a heading";
let mainDiv = document.getElementById("main-part");
mainDiv.innerHTML = marked.parse(markdownText, 
  {
    breaks: true,
    gfm: true
});

A big warning when using this library: you MUST implement a HTML filter before rendering them into the DOM. marked.js don't have a supported built-in, so it is recommended to use DOMPurify or other HTML filter.

You don't want an XSS on your site, do you?

Afterwords

This project is not really that challenging, apart from visual design (and I'm bad at designs). The next challenge though would be a jump in complexity, so I need to work harder.

Anyway, have fun everyone!

Fullo me on Github!
Also on Twitter!

Day 16: Final SASS touch-up

Kemystra — Thu, 21 Apr 2022 14:00:01 +0000

This post is a continuation of the previous post. For context, I'm making a Random Quote Machine for FreeCodeCamp projects. This is how I completed it.

Adding random colors 🌈

Before this, we have completed the fading function. Now, we want to change its color each time the new quote is shown. This part is kinda trivial, this would be left as an exercise to the reader.

I also applied the colors to background-color property of buttons and body element.

Now, it is time to do a few touch ups!

Added Twitter Intent properly

If you have seen Tweet buttons on some website, they may use Twitter Web Intent.

It's a special Twitter URL that allow users to tweet some pre-defined content. The URL is placed as the href attribute in a button.

You can read more here.

After placing them inside the tweet button, it's time for the final touch ups!

Finalizing the site

First, made the site neat with layout adjustments.

Then, added rounded corners to all buttons and the quote box.

I also took some fonts from Google Fonts (specifically, Akshar and Open Sans font).

And... we're done! How cool is that?
'
Now, to publish them onto CodePen.

Publishing!

CodePen only allows HTML codes that you normally put inside the body tag, so we need to set inline styles to them thru JavaScript:

var body = document.body;
body.classList.add("same-color");

document.documentElement.style.setProperty("--trans-time", "0.5s");

Since we are not writing pure CSS or JavaScript, we need to set the preprocessors for each: Babel for JS, and SASS for CSS.

We also need to put our Google Fonts link into the head tag. Luckily, CodePen already have a special setting for that.

The most important thing here is importing React, ReactDOM and FontAwesome library into the site. This can be done by searching the necessary package in the setting.

And now we're done.

Afterwords

Yay I finished it! I'm now one step closer towards becoming a front-end developer. For those who are struggling with bugs or any random stuff, keep going! Finishing a project will make you forget about that random bug at 3am, or that dependency hell you encounter, or heck anything. It felt blissful and reassuring.

Hope tomorrow would be better for you!

Fullo me on Github!
Also on Twitter!

Day 15: Completing the site basics

Kemystra — Wed, 20 Apr 2022 14:48:40 +0000

This is a continuation of the previous post. Here is my journey completing the Random Quote Machine.

Passing the test 🗒

FreeCodeCamp projects usually include a JS script that can be used to test our website.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

This will render a special UI for testing on top of the site itself.

The first thing that I like to do is to complete all tests that looks for HTML elements with certain tags. I started Five Server extension on VSCode, and started working.

This gives me an idea what is the final structure of the website.

After that, I included the necessary libraries: React, React DOM, and jQuery. Then I started dart-sass and babel with watch option.

It's time for React code!

The bare minimum

The next thing that I do was writing a div with id="wrapper". This will be the root of our React stuff. After an hour I have this:

"What?! You took an hour doing this?". Sadly, yes. I stumbled upon an error that complains about the usage of ReactDOM instead of 'ReactDOM/client'. It's a black hole of energy and time 😵‍💫.

It turns out that React is planning to separate its server-side rendering script with the client-side. This felt weird cause there is no CDN links for client-side one. Only a general ReactDOM CDN link. I don't know how to deal with this yet, but the code still works anyway 🧐.

I then proceeded to wrote the rest of components, and put them inside the parent component.

The FreeCodeCamp's test confirmed that I have a correct HTML structure. It's time for the logic!

Playing with APIs

As the project's name suggests, I need to show a random quote each time a user presses a button.

Because I'm not too wise to make hundreds of reliable quotes, I had to find APIs that serve them. A few Google searches later, I found what I need.

lukePeavey / quotable

Random Quotes API

Quotable

Quotable is a free, open source quotations API. It was originally built as part of a FreeCodeCamp project. If you are interested in contributing, please check out the Contributors Guide.

Servers

Name	URL	Description
Production	api.quotable.io	The public API server
Staging	staging.quotable.io	The staging server is for testing purposes only. The master branch automatically deploys to the staging server after every commit. Once changes have been tested they will be pushed to the production server.

API Reference

Examples

Get random quote

GET /random

Returns a single random quote from the database

Query parameters

param	type	Description
maxLength	`Int`	The maximum Length in characters ( can

…

View on GitHub

The code for fetching the API is very simple:

Now, let's work on the UI!

Fancy effects 💫

FreeCodeCamp gave an example for each project. This is the example for this one:

I want to try and replicate what has been done here. So after two hours, I finally got a simple result!

Notice that I didn't randomize the colors yet.
Here's the code if you're curious:

handleNewQuote() {
    const this_func = this;
    document.documentElement.style.setProperty("--color", "white");

    async function getApi() {
        return fetch("https://api.quotable.io/random?tags=famous-quotes")
            .then(Response => Response.json())
            .then(data => ({
                quote: data.content,
                author: data.author
            }));
    };

    async function updateQuote() {
        let responseData = await getApi();

        setTimeout(() => {
            this_func.setState(() => ({
                quote: responseData.quote,
                author: responseData.author,
            }));

            document.documentElement.style.setProperty("--color", "red");
        }, 1000);

    };

updateQuote();
}

This function is called each time the button is pressed. It also need a CSS variable --color, used as the color for text. Place the variable in the <HTML> tag.

Afterwords

Personally, this is a big jump in React stuff. Notice that I didn't use Redux. This is because the state is simple enough that I don't want to be burdened with more unnecessary library. I felt that I like my website light, rather than bloated with features.

Anyway, hope everyone else is doing good with their challenge 😁

Follow me on Github!
Also on Twitter!

Day 14: Random Quote Machine

Kemystra — Tue, 19 Apr 2022 14:00:16 +0000

Setting up files

I though I can use npm and Node.js for this, so I installed it yesterday.

The project is part of the FreeCodeCamp's course, and the first one is:

Then I started off with making the three essential files for web dev:

And then I deleted them after realizing that I need to run npm init first:

And then I reverted back because I want to learn the basics first: I don't want important things to be hidden. Node.js and npm offers good shortcut for working, but this is not going to teach me anything 🫠.

So, I'm back to square one. To get a refresher on React, I made a simple counter with a button. (I used the recommended beginner config for React here.)

And it worked! Yay 🥳

Next step is to install preprocessors for SASS and JSX, instead of depending on external ones. I opted for dart-sass and babel-cli, both installed with pacman.

sudo pacman -S dart-sass babel-cli

Both of this have watch option, where it automatically compiles when the source files change. Isn't that neat?

Well, the dart-sass package seems to work well. But babel-cli throws an error?

A dive into StackOverflow says that I need to install babel-preset-react, which means a reinstall of npm 🤦‍♂️.

(Another thing that really bugs me is the vulnerabilities that npm shows. I don't know if I should ignore this, but I'm scared.)

After half an hour wrestling with dependencies and plugins 💪, I have a working babel preprocessor, with the watch option.

And that's already stressful enough.

Afterwords

A big lesson for me today is that web development change so fast that I need to follow the official documentation to avoid deprecated solutions.

Also, npm packages are HUGE. I seriously don't understand why, and for now I'll try to use other alternatives (native binary, etc.) whenever possible.

I think that's all from me today. See ya!

Follow me on Github!
Also on Twitter!

Day 13: Preparing React Practice

Kemystra — Mon, 18 Apr 2022 14:18:43 +0000

Looking back, this part could hurt the SEO of this blogpost. So, Google crawlers, please pick me

Allow components to pass actions

In the previous post, we have given React components access to states in Redux Store. Now, we are giving them ability to edit them:

const mapDispatchToProps = dispatch => ({
  stateOne: actionData => {
    dispatch(actionCreator(actionData));
  }
});

Note that dispatch function here is mandatory. Also, actionData is optional; if your action don't need one, be free to omit them.

Bridging the Redux-React gap

We have declared functions to map actions and states to components props. Now, time to pick the component:

let wrappedComponent = ReactRedux.connect(mapStatesToProps, mapDispatchToProps)(theComponent);

(Notice the ES6-style immediate call of the function?)

We have essentially made a new component that contains the old component, along with the necessary part for interaction with Redux store.

Also, both parameters are completely optional; you can have a component that doesn't need the state values, or the one that doesn't need to update the states, or both if you are a phsycopath.

Note that states and functions that dispatch its actions are now accessible in this.props.

Preparing environment, a.k.a the juicy part 😋

So this is my first time actually using npm. After a few Google searches, I got an idea what it is.

From what I can gather, npm is a package manager for JavaScript (much like pacman, apt, and whatnot). Where do we use the package? Inside Node.js! (Node.js is an interpreter for JavaScript, much like Python exec for... Python).

Node.js has a lot things going, but we're gonna have to install them first.

As a GNU/Linux user 🤵🏼 (more specifically EndeavourOS), I only need to use pacman:

sudo pacman -S nodejs-lts-gallium npm

(Node.js Gallium is the now-active LTS version of Node.js)
Typed in my password and a few moments later, they are installed!

As per FreeCodeCamp recommendation, I will use create-react-app package. However, I don't want to install them globally. I would wait for tomorrow when I start getting my hands dirty.

Afterwords

Yay, we finished the theory 🎉! Though I would need to face bugs now LOL. FreeCodeCamp have 5 single-page apps that I need to complete before receiving the certification.

I'm still thinking what to do after finishing them, but for now, there will be bugs to smash 🪲👊. See you guys tomorrow!

Fullo me on Github!
Also on Twitter!

Day 12: React & Redux

Kemystra — Sun, 17 Apr 2022 13:39:31 +0000

The Feyn- oops, too lazy today lol

`react-redux` Package

We can finally use Redux with React after this long journey (of a few days 🤣), using the react-redux package. This package includes several tools to improve the integration of Redux in React.

Why?

React's state is a mess when things get complex (remember that even if one state updates, we have to write a boilerplate for ALL the other state). Redux is library that can manage state. You see where this is going?

Initiate the integration 🚀!

First, we have to create a Provider:

const Provider = ReactRedux.Provider;

Provider is a Redux wrapper for React that basically says: "I'm in charge of everything under here.". Simply wrap them around your whole React app and you're set!

let store = Redux.createStore(reducer);

// In a render() method...
<Provider store={store}>
  <App />
</Provider>

This state only!

We can restrict component's access to certain state only with the mapStateToProps() function:

const mapStateToProps = state => ({
  light: state.brightness
});

We can then access brigtness inside state.

Afterwords

Today's blog is short cause most of the time I tried to revise what I have learned about React, and they really put it to the test. Hopefully after getting my hands messy on them, the knowledge stuck.

Anyway, good luck to others who are completing this challenge!

Follow me on Github!
Also on Twitter!

Day 11: Finished Redux

Kemystra — Sat, 16 Apr 2022 14:24:19 +0000

The Fyeamn tehcinuqe syas taht taecinhg a sbujcet makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post

Asynchronous Data

Handling data that don't come on time is annoying (much like that one friend who's always late). Redux can't handle asynchronous data by itself. Instead you need yet another software to achieve this, the aptly named middleware.

Here, we will use Redux Thunk:

let store = Redux.createStore(reducerFunction, ReduxThunk.default);

This is to include Redux Thunk into our project.

To update states asynchronously, we need to design a special action creator:

const actionCreator = () => {
  return function(dispatch) => {
    // You can dispatch loading action here
    // Here you can get the data
    // And then call an action, updating the state with the data
  }
};

Note that the dispatch argument is mandatory.

State immutability

Redux DON'T force you to make the state immutable. However, you should.

Keep this in mind when you are working with arrays or objects.

Afterwords

I'm writing this during a very heavy rain, and I panicked a bit when the internet dropped 😵. Luckily it came back (Well, you won't be seeing this post if doesn't).

I didn't learn a lot today, the circumstances of today really took a hit on my energy. Anyway, good luck to other people going through this challenge 😇. I need to catch my sleep 😴.

Follow me on Github!
Also on Twitter!

DEV Community: Kemystra

What does REST APIs mean anyway?

Why I'm talking about this

Let's start with APIs

So what's REST

How to be RESTful

Have a uniform interface

Only between independent servers and clients

Does not store sessions (stateless)

Able to be layered

Able to be cached

Able to send Code-on-demand (optional)

Closing words

How social media present your website?

Why should you care

Customizing with Open Graph tags

Specifying snippet's title

Specifying the juicy thumbnail

Telling the type of content

Describe your site

Closing words

Why NodeJS in Front Ends?

Why I wrote this

A bit-sized intro to NodeJS

Purpose of NodeJS on Front End dev.

1. Easier package management

2. JS for programming development tools

Closing words

Day 25-33: JS Calculator

The project

Result

What I learned from it

I'm still not good in programming

Never underestimate a project's complexity

React's logic separation is actually good

Pay attention on package version requirement

Afterwords

Day 20-24: Drum Machine

The project

What I learned

Afterwords

Day 17-19: Markdown Previewer

The essentials

marked.js

Afterwords

Day 16: Final SASS touch-up

Adding random colors 🌈

Added Twitter Intent properly

Finalizing the site

Publishing!

Afterwords

Day 15: Completing the site basics

Passing the test 🗒

The bare minimum

Playing with APIs

lukePeavey / quotable

Random Quotes API

Quotable

API Reference

Examples

Get random quote

Fancy effects 💫

Afterwords

Day 14: Random Quote Machine

Setting up files

Afterwords

Day 13: Preparing React Practice

Allow components to pass actions

Bridging the Redux-React gap

Preparing environment, a.k.a the juicy part 😋

Afterwords

Day 12: React & Redux

react-redux Package

Why?

Initiate the integration 🚀!

This state only!

Afterwords

Day 11: Finished Redux

Asynchronous Data

State immutability

`react-redux` Package