teleren/devto huggingface dataset:
How I build my Resume with React, Tailwind and Strapi.io
Tags: react, javascript, webdev, tailwindcss
Published: 2022-09-13 19:45:05

First of all, you can visit my previous web resume [here](https://cv.mr-webdev.com/), for this one, I've used a template that I adapted to my needs

But I want to develop a project from A to Z, using my beloved ReactJS, and here it is [my brand new Web Resume](https://cv2dot0.netlify.app/)

**Front-end** is host on Netlify and **Back-end** on Heroku (until november ^^)

### Here is a brief summary of the technologies I used : 
##### Front-End:
- ReactJS
- Tailwind.css
- Webpack
- Axios

##### Back-End:
- Strapi.io (and that's all folk's !)
- Oh you right and GitHub API

### What's Inside ?
- Hero Section
- Who Am I
- Experiences
- Projects

##### I loved if you would take time to look over my resume and give me your feedback.
##### Feel free to share with us your comments

##### Tell me also if you want me to make the project public, with maybe a tutorial for front and back part

Peace
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2022-09-13 19:35:06

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## 5 Years of React in 15 Minutes

Take a look at @valeriavg’s five-year journey through React in this quick fifteen minute read!

{% embed https://dev.to/valeriavg/me-react-5-years-in-15-minutes-58od %}


## Building a Web Paint App

Isn’t it exciting to build something you grew up using? @anshika_gautam_ rebuilds Windows’ classic paint app in web format!

{% embed https://dev.to/anshika_gautam_/build-a-web-paint-application-5f55 %}


## Rewrite your Git History in 4 Steps

Use these four commands with help from @whitep4nth3r and enjoy a clean and tidy ship!

{% embed https://dev.to/whitep4nth3r/rewrite-your-git-history-in-4-friendly-commands-an9 %}


## Bring your GitHub Profile to the Next Level

A friend asked @adiatiayu how to make a GitHub profile, so here’s the complete guide for you to follow along!

{% embed https://dev.to/adiatiayu/mini-portfolio-bring-your-github-profile-to-the-next-level-5c8n %}


## Learn these CSS Basics to Boost your Skills

People treat Frontend development like some mythical beast that only a few can tame. But the truth is, it's not that hard. Here are tips from @ruppysuppy on how to boost your CSS skills!

{% embed https://dev.to/ruppysuppy/mastering-these-7-basics-css-skills-will-make-you-a-frontend-wizard-2khn %}

## Making a React Component Library

A component library is one of the coolest things a web developer can make. If you don't know how to make one, let @aviavinav guide you!

{% embed https://dev.to/aviavinav/the-making-of-a-react-component-librabry-cep %}


## Let's Talk About Coding in Containers

In this article, @blackgirlbytes explains what containers are, how they benefit engineers, and how to setup devcontainers in GitHub Codespaces. 

{% embed https://dev.to/github/why-are-people-developing-inside-containers-38o6 %}


_That's it for our weekly Top 7 for this Tuesday! Keep an eye on dev.to this week for daily content and discussions...and be sure to keep an eye on this series in the future. You might just be in it!_
Using Private GitHub NPM repositories in CodeBuild
Tags: aws, github, npm, cdk
Published: 2022-09-13 19:32:56

I use GitHub instead of CodeCommit for many reasons, and I also use GitHub Npm Registry, for private packages. It took me some time to understand how I can use them in CodeBuild, so I want to share it with you. 

_Disclaimer, this is maybe not the best (or even correct way) to do this, but this how I managed to solve the problem for me._

---

To do this, the secure way I will have to use some magic :) I am using SecretsManager to store a GitHub Personal Token securely, for later using it in the pipelines as an environment variable. We will accomplish this in four easy steps.

## 1. GitHub - Create token
First, we have to to create a private personal token in Github, you will do that under your settings and Developer Settings. The key needs only access to read:packages.
![Create Token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddo62q3o7byurssnpsac.png)

Save it and make sure to copy the key that is generated for next step. 

## 2. AWS Secrets Manager - Add token 
Now we have to add the key to Secrets Manager in AWS.

![Stage 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqfejzef11nt2otph1wj.png)

![Stage 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlmnb5jlqaew2b773epd.png)

![Stage 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv7208l94ncqdblvklve.png)

Review the details and save. It will result in a key looking like this:

![Token Saved](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwyebg6xv4logzsq1uls.png)

## 3. Configure NPM
This was the tricky part for me, because I want to use npm login when I am developing on my personal machine, and do not want to share the key with other people. so i had to create two .npmrc files, on for local development (.npmrc) and one for CodeBuild (.npmrc_ci). 

_Make sure to change @loupeen to your account/organisation._

{% embed https://gist.github.com/kronis/7caf7e451d0b6d2bcc2009b4e6ca9b62 %}

{% embed https://gist.github.com/kronis/42715a93da3a4c11eb54d0ee9c56c983 %}

## 4. Pipeline
Last thing is to configure our pipelines synth and build step. 
First we are getting the secret at line 1, after that we are using it in synth (line 10–17) and build (line 20–27) steps, and last thing we have to do is to use the correct .npmrc file, and that is on line 32. 

CodePipeline example
{% embed https://gist.github.com/kronis/7e9ea920799d688de5cfda5ea7f65982 %}
And that is it, hoping it makes some sense.
What is an API?
Tags: api, beginners, webdev, programming
Published: 2022-09-13 19:29:36

An API (Application Programming Interface) is the mechanism used to allow the client and server to communicate. The API takes the clients request brings it to the server receives the data from the server and returns it to the client in a way they can read.


#Real life example:
 If you are the client when you walk into a bank then the teller who takes your request and returns you money or information is the API. The API allows the user to communicate with the banks data.
Link a controller to a model Laravel.
Tags: laravel, php, mvc, controller
Published: 2022-09-13 18:52:16

Let's say, you want to create a resources controller and a model by a single command. Most of us know that command. Suppose the model is 'User'. So the command will be

> php artisan make:model User -mcr

But, when you want to connect a resources controller with an existing model, well, there is option here....

You need to write the following command. 

> php artisan make:controller UserController -m User

Thank you. Happy coding!
Video: Add a live-updating stock badge to your web (in 5 min)
Tags: tutorial, webdev, lowcode, webcomponents
Published: 2022-09-13 18:46:47

Steve explains how to do it using a streaming UI component from 🍋[Yuzu API](https://yuzu.dev)

📺 [Watch our step-by-step tutorial on YouTube](https://www.youtube.com/watch?v=dysUZlh33JM)

Let us know what you think! 🤓
Make code tutorials in seconds with explanations from AI.
Tags: tutorial, showdev, writing, programming
Published: 2022-09-13 18:43:57

_We're using explanations from ExplainDev to help you make and share beautiful, useful images that explain code._

[app.explain.dev](https://app.explain.dev) is an image creation tool that uses ExplainDev to provide explanations to the code that's entered. Users bring their own code, then have full rein on customizations.

Here I am making the image used in the banner:
{% embed https://youtu.be/qBKxyo1LP3A %}

How it works:

- Head to [app.explain.dev](https://app.explain.dev) and start typing your code into the box provided. (You can choose the language in the side-bar for improved syntax highlighting, etc.)
- As soon as you stop typing, an explanation will appear at the top of the image. 
- All elements in the image are editable including the text that was generated by AI. Resize and/or drag the snippet to wherever you'd like it placed.
- Select portions of the code to get specific explanations for what you have selected. Click the "explain code" button to generate the new explanation.
- Use the side bar to customize text, background, arrow positioning/style/color, and more!
- Add any additional code or text boxes using the options at the top banner.

Download the image and SHARE!!

The technology behind the images is [ExplainDev](https://explain.dev), an AI powered programmer's assistant. You can think of it as an expert that's always available to answer your technical questions and explain code. This nifty app idea came while working on our API in preparation for a big move to VS Code. 

Content that is useful and teaches me stuff is the best kind of content. So we decided to try and enable more of it. I hope that this tool might also unlock some folks who don't share much about their new programming discoveries to go for it!

Let me know what you think! Or better, tag me in your creations!!
React Components
Tags: react, component, beginners
Published: 2022-09-13 18:40:36

In this article you will learn about Components in React.

**_What are Components_**

- Components helps us in dividing our react application into smaller pieces of code and also reusable.Create a component once and reuse multiple times when needed. All the components may or may not be related to each other but they are operated independently.

- It is easy to maintain code and debug while working with Components, lets say we did not have these individual components then the number of lines of code would reach in thousands and when adding any of the feature or working on any of the issues it would be challenging to find that particular part of code.

- Components basically serves the same purpose as JavaScript functions and also return HTML using JSX functionality



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt49s8j7p5728q93mow3.png)

- As you see in the diagram above components have a tree like structure where each component can have its own functions, states, external api calls. Components will have a Parent-Child relationship between them so that's where we need to pass the data from one component to another and Props and callback functions comes into picture.





There are two types of components, Functional components and Class components.

**Functional component example**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayq1794lw7k4j0ors7ol.jpeg)

- A functional component is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX).

- There is no render method used in functional components.

**Class component example**: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qaexbnbkgkaetz2vyzn.jpeg)

- A class component requires you to extend from React. Component and create a render function which returns a React element.

- It must have the render() method returning JSX (which is syntactically similar to HTML)
About binary numbers
Published: 2022-09-13 18:39:51

Binary, or base 2, describes the two states- 1 and 0, which are widely used in computer programming from ASCII to truth tables.

In ASCII (American Standard Code for Information Interchange) the binary language is used to express every number computable. This is done by translating our understanding of modern numbers, Base 10 (numbers 0–9) into Base 2 (0–1) through quick computation (2^n*a+…+2²*z+2¹*y+2⁰*x). This way, computers can understand what human numbers mean, and perform addition, multiplication and other transformations using these two numbers. Other bases like Base 16 use letters as an addition to Base 10, ranging from 0–9 to A-F, which are known as hexadecimal numbers, and are handy for operations that require more computing capacity.

Binary numbers can be added, subtracted, divided and multiplied the same as 0-9 numbers, just with a slightly different method. For example, by our understanding, 1+1=2, but because there is no '2' symbol in binary code, it's 1+1=10, as 10 = 2 = (2¹*1+0*2⁰). 1-1 would obviously be 0. 1*1 would remain 1 as multipliers are simply scalars of the original number given, and dividers are reverse multipliers.

Each number (1 or 0) takes up the space of one bit, and a string of 8 bits measure up to one byte. Therefore, computers with less computational capacity usually have less storage in them (but the upside is that they usually work faster).

Binary is also used to compute Boolean statements like: If x is true (1), then execute y, or if x is false (0), don’t execute y. Boolean values are also used in truth tables where more specific situations in the computer must be identified, using AND, OR, nAND, nOR, xAND etc. These two values can be stacked up to check the presence of three or more variables, and other cool stuff, which shows how much you can achieve with just two numbers.
Repo that shares Leetcode solutions
Tags: leetcode, python, github, thinkoutloud
Published: 2022-09-13 18:35:13

[LeetCode Solutions](https://github.com/yluo3421/Leetcode-Solutions)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6eezenfrg5wv8r3aclw.png)
After finishing more than 200 questions on leetcode. I realize there are so many questions that I have done and I thought I understood later turned out I cannot solve them the second time.
I realized there might be a lot of other people who has similar situation with me. I decided to make some changes on how I do leetcode problems.
1. Do not look at answers!
2. Treat it like an interview, take 10 min to start basic thoughts.
3. If the pseudo code can be generated, check logic and corner cases
4. If pseudo code cannot be found, check hints. Sometimes it's an algorithm or data structure should be utilized to solve the problem.
5. If no progress in 10 min after hint, watch video explanations and then work it out without looking at answers.

After taking the strategy above I can feel the progress I made and also gain more confidence. This leads me to share my thoughts during solving the problems, I think these might become a hint for whoever doing the same questions.
So I started the repo following the same pattern of Neetcode (The author is so good!).
The repo started about 2 weeks ago and I realize it might be more helpful if I can provide some video explanations. But this is an area I have never touched. The idea of video meeting with whoever interested rises. 
I started to give video meeting link in my Flatiron cohorts. At first two sessions I gave out more easy questions cause I don't want to scare whoever didn't start leetcode. But on the contrast, the speed of my explanation of my thoughts are still fast that makes my classmates not interested in solving this. 
Until recently I found one classmate who can follow my thoughts. That we solved a hard level leetcode question in two hours gave me lots of boosts. Even though the second day he told me about the same issue that I went too fast. 
I will keep sharing the leetcode questions I have worked on and try to start video explanation in about two weeks. Have to remind me that I shall try to explain questions like explaining to someone never touched programming.
Feel free to check my GitHub and the repo. All comments welcomed.
Software development trends: What's flourishing and what's fading
Published: 2022-09-13 17:58:39

Software development is eternally evolving. It’s right there in the name of the discipline: development.
Today, the adage “every company is a software company” is truer than ever. As organizations pursue their digital transformation efforts to keep up with customer demand and compete for the brightest talent, IT leaders must stay attuned to the trends.
What better way to dig into software development trends than to go straight to the source? We asked our friends over on Opensource.com to share the answer to this question:
Software development: What trends are flourishing and what trends are fading?
Don’t Miss – [Find Best Software Development Companies](https://suggestron.com/services/software-development/)
Here are their answers.
Flourishing: Containers
“Clearly, the latest trend is containerization. Kubernetes, Podman, and all the other technologies related to containerization are here to stay and evolve. Any software developer needs to take the train and learn those technologies if they want to keep up.
Fading: Java
“Don’t get me wrong, I loved Java. It’s the main programming language I learned at university and it served me well for a long time. For a while, it was the only programming language on the market that was cross-compatible without pain.
Flourishing: Low-code development
“Low-code development is definitely growing. Since the start of the pandemic, IT leaders have been accelerating their digital transformation programs. But there’s only so much change that can be delivered by central IT. The next level of transformation is about enabling the business units to streamline their own workflows and add new functionality on their own. And that’s where low-code development comes in.
Don’t Miss – List of [Custom Software Development Companies](https://suggestron.com/services/custom-software-development/)
Software Development Outsourcing Companies
Fading: Software engineering seen as a cost center
“As a trend, organizations that had viewed software engineers as cost centers are now rightfully viewing their engineers as innovators. Software engineering and business goals align more seamlessly than ever before. Organizational structures, team dynamics, technology stacks, and paths toward expertise now similarly align to support engineers as they better their craft. On a cultural level, engineers are granted the latitude necessary to engage in trial and error, make mistakes, and ultimately succeed in introducing valuable software innovation.”
Flourishing: Software engineering seen as an innovation center
“In the same vein, organizations are increasingly keen to support engineers in their desire to learn new skill sets. This trend is giving rise to the Spotify Model, in which engineers can shift roles and autonomously engage with (and learn from) tribes and guilds across their networks and industries.
This article found on [Software development trends](https://enterprisersproject.com/article/2022/8/software-development-trends)
Understanding React Context
Tags: react, javascript, webdev, beginners
Published: 2022-09-13 17:54:42

If you think about it, the top-down data flow is what gave react superpowers. 

- You have more control over your data. No more early JS days where you sweep through heaps & loads of JS files and figure out what mutated your state. 
- It’s easier to debug, as you know what is coming from where

But what if we are building a deeply nested app?


```
const App = () => {
  return (
    <div>
      App Contents
      <Toolbar theme={store.theme} />
    </div>
  );
};

const Toolbar = ({ theme }) => {
  return (
    <div>
      <Button theme={theme} label="Button 1" />
      <Button theme={theme} label="Button 2" />
    </div>
  );
};

const Button = ({ theme, label }) => {
  return (
    <button style={{ backgroundColor: theme === "dark" ? "black" : "white" }}>
      {label}
    </button>
  );
};

```

This is called prop-drilling, and this gets even worse if you have more layers of components between the data source and user. How to solve this? React Context to the rescue!!

**Solving prop drilling by using the Context API**

The Context API lets you broadcast your state/data to multiple components by wrapping them with a context provider. Pass your state as value attribute to the contextProvider, the children components can then tap into this provider using a context consumer or the useContext Hook.

Step 1: Create Context

```
// ThemeContext.jsx
import React from "react";
const ThemeContext = React.createContext();
export default ThemeContext;
```

Step 2: Context Provider: <ThemeContext.Provider>
Now we can wrap all the context users with the Context Provider, and pass the value that we want to 'broadcast'.

```
const App = () => {
  return (
    <ThemeContext.Provider value={{ theme: store.theme }}>
      App Contents
      <Toolbar />
    </ThemeContext.Provider>
  );
};
```
Now, how do we access the theme from its descendants Toolbar, Button?

Step 3: Context Consumer: useContext
To access the context, we use useContext hook from any descendant of Component `App`.

```
import React from "react";
import { ThemeContext } from "./ThemeContext";

const Button = ({ theme, label }) => {
  const { theme } = React.useContext(ThemeContext);
  return (
    <button style={{ backgroundColor: theme === "dark" ? "black" : "white" }}>
      {label}
    </button>
  );
};
```
Here, Our rendered output remains the same, but the code underneath is a bit leaner and cleaner.

That's all! I hope that I helped clarify why you need context and how to implement it. Feel free to post any questions, comments or any suggestions.