teleren/devto huggingface dataset:
Considerations of Building a Web-Component
Published: 2021-10-10 23:55:57

# Introduction

Before we dive into how my group will deal with this web-component I want to shed some light on the subject so that any reader can understand the basics that go into creating it.

1.) Characteristics

Simply put what does this web-component have to it? Things like color, size, text, icons, placement, etc... anything that describes the component and gives it meaning.

2.) Accessibility

Can a regular use it? How about someone who is color-blind? What about someone who is blind? Can you use the keyboard to navigate the page? When it comes to creating something you have to consider anyone who might come across it.

3.) Security Concerns

This is more back end but you cannot have your webpage being manipulated by anyone online. You want to make sure that icons are secure and data related to the page are secure. How can this be done?

4.) State

When it comes to the state of the component each element must blend and cater to the topics covered on the webpage. States relate to things like math, science, and history or even lesson 1, lesson 2, and lesson 3. Each state covers different information.

## Approach to Web-Component

The web-component in discussion will be a card. My team will be sectioning this component into individual tasks and then regrouping to collaborate and critique and improve each others work. Some of the the tasks will be regarding the major elements such as the icon, banner, scaffold, and card.

### Managing Inconsistency

Since the work will be divided the code might seem inconsistent due to each persons coding preference. In order to maintain consistency each member will include notes within their portion of the code so that it can be followed regardless of how it is written. If someone writes something and the group decides there is a better way to write it then it will be updates but otherwise it will be left alone.

### Difficulties

Generally communication and production of the cards on schedule will be hard. This is from my point of view due to the lack of coding strength from myself. The project as a whole will require exponentially more effort and collaboration in order to maintain integrity. As stated above there is also the concern of inconsistency which can be negated as long as each member documents their code and what it does.

#### What is more manageable due to last project

What should be more manageable is the documentation of code and the storybook which addresses the content of the project to anyone who decides to run it.
Be Carefull With rm!
Tags: linux
Published: 2021-10-10 23:26:51

📣 The world is amazing ,but Not so ideal as we think!🤔

💡 Unix-like operating systems such as Linux do not have an **undelete** command.

When we delete something with rm , it's gone.Linux assumes we're smart and we know what we're doing.

![Giff](https://media.giphy.com/media/de5bARu0SsXiU/giphy.gif)

One of the big problem can cause wildcards. so be particularly with them.

**For Example** : if we want to delete just the JS files in directory we type:
`rm *.js`
Of course this is correct , but if we accidentally place a space between the __*__ and the **.js** like so:
`rm * .js`
what happens? 🤔🧐
the rm command will delete al the files in the directory and only then complain that there is no file called **.js**

There is many ways to avoid this problem, here is 2 useful tip: 
1 - use **-i** (interactive) option, which prompt the user for confirmation  ,before deleting an existing file.
  
  `rm i *.js`
  asks -> `rm: remove regular empty file 'mk.js'?`
2 - whenever we use wildcards with rm, test the wildcard first with ls. This will let we see the files that will be deleted. Then we can press the up arrow ☝️ to recall the command and replace ls with rm.
Web Component Design Considerations
Tags: devjournal
Published: 2021-10-10 23:18:25

While building a web component, our project team considered various features and use cases that would be necessary for the design. When developing a card, we will have better control on the design of each particular area by sectioning off multiple elements. For example, we plan to work on the header and footer as two of the elements, which will be useful for information that is consistently on the top and bottom margins of the page. In addition to the header and footer, one element will be for navigation. A top navigation bar is one part of the user interface that is also consistent in its content, and provides users steady access to practical functions. We also plan to have an element to preview content which could be helpful for increasing the overall readability.

We expect the header, navigation, and content preview to be the most challenging to implement. The header and navigation bar will need to be synchronized in a way that keeps the two elements from becoming redundant. To address this, we need to make a decision on which information is included within the header, and which content should instead be placed elsewhere in the card or in the navigation bar. The glaring challenge for a preview element is determining what content is in the preview compared to what is hidden by default. The element needs enough content to be indicative of what is being previewed, and still be useful enough that it is worth having the preview element in the first place. After making the button, I feel much more confident collaborating using GitHub. I also think that designing this component will be easier now that we have had experience with the development process for a web component. We hope to keep it simple, and achieve a component that is functional and reusable.
HTML: Then & Now
Tags: html, webdev, javascript, beginners
Published: 2021-10-10 22:57:09

"HTML
/ˌāCH ˌtē ˌem ˈel/
noun
Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
"an HTML file"
Definitions from Oxford Languages"

Each new version of HTML is designed to improve the prior version. To add new elements and attributes. To write new code and remove old code. What we have today with HTML5 is very different from where we started.

HTML4 was release way back in 1997. HTML4 had some elements used to present the appearance of webpages. Some of the elements used back then are not recommended to be used today. Such as, `<center>`, `<font>` and `<strike>`. There are better elements in todays version. 

XHTML 1.0 was released in 2000. In 1998 a new language called XML was created. It would allow users to write their own markup languages. So HTML partnered with XML to form XHTML. This came with stricter rules for writing markup. Elements now needed a closing tag (example: `<p> </p>`). Attribute names had to be in lowercase, etc... 

To help authors to move into this new syntax, other versions of XHTML were created: Strict XHTML 1.0 where you had to follow the rules exactly. Then there was Transitional XHTML 1.0 where authors could still use some of the old elements, making it more lax and to implement some of the new syntax as well. 

HTML5 was released in 2008. In this current version, authors do not need closing tags on all elements. It also  came with new elements and attributes. Major web browsers adopted this version. And as of 2021 we are still using HTML5!

Happy Coding!
Redux Thunk For Dummies
Tags: react, redux, javascript
Published: 2021-10-10 22:37:52

When you're going through a coding bootcamp, sometimes the material comes at you so quickly that it can be difficult for all the concepts to sink in. When certain concepts are building on top of other ones, if you don't get something right away you can quickly become lost.

Most recently, I found that tricky concept to be redux-thunk. However, I'm here today to explain what I've learned in hopes of helping anyone else who might be struggling to see it in a new light!

When working in regular React without Redux, making asynchronous calls is fairly straightforward. You can, for example, put a GET request with `fetch()` in `componentDidMount()` and update state with the response, which will in turn re-render the component with the new state.

The problem in Redux, however, comes down to dispatching actions to reducers. The benefit of async is that your program can keep running and doesn't get held up waiting for a request response, but the downside is this can lead to things happening in an order that you don't expect. Because of the asynchronous nature of `fetch()`, if you make a request inside an action creator function like normal, the action creator will return an action before the promise from `fetch` is resolved, meaning when your reducer goes to update state, it probably won't have the information you were expecting.

This is why we need redux-thunk: we need a way to delay the dispatch of the action, otherwise state will get updated before the promise from our `fetch()` call is resolved and we won't have the correct information.

As you might have heard, redux-thunk is a very small package. You can see the entirety of the behavior in the following code (reproduced here from the [redux-thunk github repo](https://github.com/reduxjs/redux-thunk/blob/master/src/index.js)):
```javascript
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;
```
That's basically all there is to it! If you're confused about what's going on here, the important thing to look at to start getting a handle on it is the `if` statement. As stated in the [redux-thunk documentation](https://github.com/reduxjs/redux-thunk), "Redux Thunk middleware allows you to write action creators that return a function instead of an action". So, looking at the conditional logic inside the thunk code, you can see that we're creating a queue of sorts. While the action it receives is a function, it will return that function with dispatch as an argument. It will do this until the action's type is just a plain Javascript object, rather than a function. In this way, we can queue up our actions, and make sure our reducer doesn't return a new state until we have the resolved response from our `fetch()` call.

And that's about it!
Creating a custom context-menu in JS
Tags: javascript, tutorial, beginners, css
Published: 2021-10-10 21:35:31

# Intro

Hey everyone! Have you ever right clicked on a website and were given a nice "right click menu"? Well today I will be showing you how to make one WITH custom CSS!

***
# How do I make this?

To make the menu work, you add in:

```
 oncontextmenu = (e) => {
  e.preventDefault()
  let menu = document.createElement("div")
  menu.id = "ctxmenu"
  menu.style = `top:${e.pageY-10}px;left:${e.pageX-40}px`
  menu.onmouseleave = () => ctxmenu.outerHTML = ''
  menu.innerHTML = "<p>CTX Menu (with css)</p><p onclick='location.reload()'>Reload</p><p onclick='alert(`Server Status: Running`)'>ServerInfo</p><p onclick=(window.open(`https://patreon.com/masspopcorn`,`_blank`))>💸Donations</p><p onclick='alert(`EVERYBODY DO THE FLOP *flop*`)'>Flop?</p>"
  document.body.appendChild(menu)

```

To make the design work, you add:

```
 #ctxmenu {
  border-radius: 4px;
  position: fixed;
  background-color:#39403f;
  color: #FFF;
  cursor: pointer;
  border: 0px black solid
  -webkit-box-shadow: 8px 5px 23px 5px rgba(26,50,71,0.76); 
box-shadow: 8px 5px 23px 5px rgba(26,50,71,0.76);
}

#ctxmenu > p {
  padding: 0 1rem;
  margin: 0
}

#ctxmenu > p:hover {
  background: grey;
  color: ghostwhite
  cursor: crosshair;
}

```

***
# Outro

Thanks for reading! Here are some links.

Repl Profile: [dudeactualdev](https://replit.com/@dudeactualdev)

Github Profile: [dudeactual](https://github.com/dudeactual)

Github Repository: [CTX-Menu](https://github.com/dudeactual/jsctxmenu/)

#### DEMO: [Demo](https://jsctxmenu.dudeactualdev.repl.co)
Considerations of Building a Web Component
Published: 2021-10-10 21:32:59

#Details

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

For this project the web component that my group and I are making is a card. Shown above is the comp for the project. There are many different elements can go into a card, but for this project we are just going to focus on:
- Icon
- Banner
- Scaffold
- Card


#Difficulties
Some obstacles that my team and I might face could   be getting the slotting of the content to work, since I have never done that before. I also am not 100% sure how my team and I are going to keep the style feeling consistent between all of the elements of the card since that is a little bit different that styling a button.


#Manageabilities
Since I now have more experience creating a web component, from my last group project of creating a button. I believe I will be able to use the knowledge I gained from that towards the creation of a card. For example I learned how to use css to   make the design of the different elements look better and less like a button from the 90's.

**Group Repo:** https://github.com/runtimeErrorsMadeEasy/project2
Web Component Considerations
Published: 2021-10-10 21:05:12

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhy3j61t2wf87aj6d6hk.png)
 
**Web Component Details:**

 The project we are focusing on for project two is creating a learning card. Some elements of the card include:
 1) banner
 2) icon
 3) header
 4) body
The banner of the card includes a color background for the header, subheader, and icon. The bottom part of the card contains the body right under the header.

**Anticipated Difficulties/Past Experience:**
I don't have any experience with web development prior to coming to this class, so I have a lot to learn before each project. Luckily, completing the button project has helped me understand more about web development and how web components work. Now that we have project one under our belt, my group can use the code criticism to learn from our mistakes and ensure we don't make them again on project two.
Considerations for Building a Web Component and Its API
Published: 2021-10-10 20:53:54

##Class Project
The web component we are beginning to work on is a card (shown below).  Some things to consider when creating a card are: What elements can it be broken into? What "states" does the card have? What accessibility concerns should we consider? What flexible content should we consider? And more.
![Card Example](https://res.cloudinary.com/practicaldev/image/fetch/s--3CX2UwhN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqxpv6z4nhyv0nlf471y.png)
For our project, we will be breaking the card down into 4 main elements:
- icon
- header/banner
- body
- card scaffolding

##Potential Difficulties
A potential difficulty I anticipate is determining how exactly we want the user to be able to interact with the card and making it happen. My group has discussed the concept of a card that slides to the side or up and down to allow for more information or icons. This is not a state that we handled with the button we built, so I expect new challenges with it.
##What's Manageable
Having already made a web component that was a button, there are a few aspects to this card that I hope to be more manageable. One of these is the ability to apply basic states to the card. These include hovering and focusing. I also hope that getting started with the card will be more manageable than with the button as we are beginning with a template to follow and expand from.
My Programming journey
Tags: webdev, nokiabitscholarship
Published: 2021-10-10 20:25:49

Hi! I'm Adebukola Omowole from Nigeria, covid-19 was really and eye opener for me and it made me join the tech world. I started with UI/UX design but curiosity made me look into coding and I must say it's being fun having learnt HTML, CSS and JavaScript to an extent it being an amazing journey all the way. Looking forward to open source project to show my expertise,learn and collaborate with seniors here. In my quest to be better I applied for the Udacity Nokia & Bit scholarship and alas! I was selected.
Spring Boot CRUD - Mongo DB + Docker
Tags: docker, java, programming, beginners
Published: 2021-10-10 20:23:46

![Alt Mongo DB + Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igvgik6fdo6f72dkz6aw.png)

CRUD Operations using Spring Boot and Mongo DB Database using docker-compose.

Docker is required to be install on the machine. Install Docker from [here](https://docs.docker.com/engine/install/)

## Installation
1) Clone the Repo from here [Click Here](https://github.com/atharvasiddhabhatti/Springboot-Playground/tree/main/springboot-demo-mongodb-crud) & run the following commands.

```bash
docker-compose up
```

## Output

| Endpoint | Method | Body | Description |
|:---:|:---:|:---:|:---:|
| http://localhost:8080/products | GET | - | Fetch all products |
| http://localhost:8080/products/{id} | GET | - | Find Product by Id |
| http://localhost:8080/products | POST | { "id":"1", "name":"Mobile", "Description":"Samsung Mobile." } | To Add product to the DB |
| http://localhost:8080/products | PUT | { "id":"1", "name":"Apple Iphone", "Description":"Apple" } | To update existing record. |
| http://localhost:8080/products/{id} | DELETE | - | Delete the record be Id |

## Usage
### ProductRepository.java
```java
@Repository
public interface ProductRepository extends MongoRepository<Product, Integer> {

}
```

## Configuration

### application.properties

```c
spring.data.mongodb.host=mongo_db
spring.data.mongodb.port=27017
spring.data.mongodb.database=mydb
```

### docker-compose.yml

```c
version: '3.3'

services:
    #service 1: definition of mongo database
    mongo_db:
      image: mongo
      container_name: mongoDB  
      restart: always
      ports:
        - 27017:27017
     
    
    #service 2: definition of your spring-boot app 
    productservice:                        #it is just a name, which will be used only in this file.
      image: product-service               #name of the image after dockerfile executes
      container_name: product-service-app  #name of the container created from docker image
      build:
        context: .                          #docker file path (. means root directory)
        dockerfile: Dockerfile              #docker file name
      ports:
        - "8080:8080"                       #docker containter port with your os port
      restart: always  
      depends_on:                           #define dependencies of this app
        - mongo_db                                #dependency name (which is defined with this name 'db' in this file earlier)
```

### Dockerfile
```c
FROM openjdk:11 as mysqldoc
EXPOSE 8084
WORKDIR /app

# Copy maven executable to the image
COPY mvnw .
COPY .mvn .mvn

# Copy the pom.xml file
COPY pom.xml .

# Copy the project source
COPY ./src ./src
COPY ./pom.xml ./pom.xml

RUN chmod 755 /app/mvnw

RUN ./mvnw dependency:go-offline -B

RUN ./mvnw package -DskipTests
RUN ls -al
ENTRYPOINT ["java","-jar","target/springboot-demo-mysql-0.0.1-SNAPSHOT.jar"]
```
Considerations of building a web component
Published: 2021-10-10 19:52:12

For an assignment, my team and I were tasked to build a reusable card to be used for websites. The card would consist of a heading with an icon,title, and a body that can support any html content. 

Our team will take an approach of breaking down the element into four sub elements:

-The icon
-The heading which will contain the icon element, as well as a title and sub title
-The body which we be an element that can contain other html content.
-The card as a whole, will be formed by the previous elements coming together.


### Difficulties:
The difficult part about this task will be creating the sub elements in such a way that they will seamlessly come together to form the car as a whole


### After the easy-button component:
After finishing with our initial task, the easy-button custom web component, we are expecting this to go smoother as we have learned to utilize css attributes and conditional rendering.
Making the most boring website ever with TypeScript, NestJs, React and others. Part 3. 
Tags: react, typescript, node, webdev
Published: 2021-10-10 19:34:58

_This series is about making a generic website for a local business with TypeScript, NodeJs, NestJs, Prisma, React and NextJs. I'm trying to make my videos quite short, about 10 minutes each (except for the first one), while putting as much content there as I can. [Here](https://www.youtube.com/playlist?list=PL7b0cPjh8z6K_4qLNu_QdE3RpiU6omViC) is the full playlist._

In this video we will implement file uploading on our server. Then we will add picture setting for the barbers in the admin panel. And finally we'll create a new page for barbers on the client website.

Enjoy :).

 {% youtube 8xuyTxvBQcg %}
3 Resources for Remote Jobs
Tags: remote, jobs, career, metaverse
Published: 2021-10-10 19:31:40

If you're searching for a remote job, or looking for a career change, there are some great resources available right now. The world is increasingly becoming more and more digital and virtual and more and more companies are now shifting to remote offices and hiring for remote positions. Remote jobs in tech, encompassing engineering, design, product, marketing, operations and many more are so prevalent it's important to get organized in your job search.

![we work remotely](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azfmy2j4ce29w67cf0ge.png)

1) [We Work Remotely](https://weworkremotely.com)

The largest remote work community in the world, We Work Remotely (WWR) has over 3 million visitors and companies like Google, Amazon, and GitHub have all hired for remote positions on the site.

![metaverse jobs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yla158uqp216yj6czexc.png)

2) [The Metaverse Jobs](https://themetaversejobs.com)

TheMetaverseJobs.com is a site dedicated to showcasing open positions in the metaverse, encompassing augmented reality, virtual reality, NFTs, crypto, gaming, entertainment, fashion, & more. You can expect to find positions from companies like OpenSea, Roblox, & Facebook. You can easily filter for remote-only jobs by selecting the "Remote" button.

![flex job](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uz0r4lgtbkfr7xnjqfq.png)

3) [Flex Jobs](https://flexjobs.com)

FlexJobs might be the original site to search for remote flexible jobs. They've been a resource for remote jobs since 2007 and offer filters for part-time and full-time work. They've been featured in CNN, Good Morning America, & The Wall Street Journal.
VS Code Knowledge Pill: Profiles switching using Workspaces
Tags: vscode
Published: 2021-10-10 19:15:10

I've longed for a profile/settings switcher in VS Code that loads specific settings or extensions depending on a specific project or what programming language I'm using.

We can use VS Code's workspaces to act as a profile switcher.

1. Create an empty workspace
2. Enable extensions for the workspace
3. Configure workspace specific settings
4. Add project to workspace


![Screenshot 2021-10-10 at 20.11.48](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l2ygqtu6gn2izaqbddh.png)
 
This workspace is now configured with all the extensions and settings that I need for working on a Rust project.