teleren/devto huggingface dataset:
Event Badge Final Project
Published: 2021-12-13 03:36:45

## Summary
This is the final project in the semester long class about learning web components and web development. This was a issue queue and project to wire to HAX for other people to use. The goal is a robust event badge that anyone can easily edit for their own event.

## Beginning Stages
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlznzjuhueg77azptvse.png)
 
We were asked to build ff the image above and to make it changeable like it is on the website. There are many different elements to consider when trying to make this so my group and I decided on the following:

- Event-Badge

- Event-Header

- Event-Photo

- Event-Name

- Event-Logo

## Current State
This is what our project looks like now. We decided to take some creative liberties and change the theme to Hockey. This will still be able to be changed if the user has their own images.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpgty3s3ojnkzj3kspq4.png)

We know that there is some progress to be made, but we have discussed what has to be done to make sure the team is on the same page. To finish it, we have to edit the slots to have the bottom header and image fit on the same line, add another slot for information, that element would be `Event-Name`. 

This project requires a lot of slot and div classes to be used to properly format and make the card look like a usable event pass. For example, or render function for the header is shown below:

```html
 render() {
    return html` <div class="container">
      <img src="${this.icon}" alt="" />
      <div class="centered">
        <h2><slot id="main-header" name="main-header">main header</slot></h2>
      </div>
    </div>`;
  }
```
Our other render functions also look similar to this.

##Hax and NPM
Touched upon earlier, this project was a part of a issue that was on Hax GitHub account. WE decided to tackle this issue and make it our own. With just limited experience on the team and just 4 months experience myself, it has been a good learning experience attempting the projects. This will also be published to NPM for an easy download for anyone that would want to use this event badge.

#Links
NPM: Added when project is complete
GitHub Repo:https://github.com/runtimeErrorsMadeEasy/Project3
Final Project
Published: 2021-12-13 04:34:42

#Overview
The final project for our class was based on issues within HaxtheWeb. The issues were introduced by our professor and my group was given "mark-the-words". The projects goal is to be able to select words from within a paragraph and have the system count which ones are correct and which ones are wrong based on the prompt. All the user has to do is select words within the paragraph that meet the parameters and they will be marked with a "+1" however any that are considered incorrect based on the words in the system will be marked "-1". You cannot change your answers once you submit them but you can retry the task meaning all selections will be wiped and you will reselect what you believe is right. An example is provide below:


https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqwecl6yr6fvwrzrtsy0.gif

##Code
The compilation of code includes NodeJS, HTML, and CSS. Using imported elements from LitElement, HTML, and CSS libraries allows us to complete this project using simplistic standards. The combination of code allows us to manipulate the aesthetics of the project while making sure that there are set parameters for the user which returns correct or incorrect selections.

Using spans within the paragraph we needed to make it so when the user hit submit the code scanned their selections and related those selections to the included words field. 

###Final Steps
There are some small bugs that need cleaned up and some aesthetics that need tweaked in order to compliment the subject matter. The code will need to be published to NPM as well but other than that the project is coming along well.

####GitHub Link
https://github.com/IST402-Group-F/proj3-haxtheweb
NextJS - Form validations
Published: 2021-12-13 04:34:28

We are using react-hook-form: [](https://www.npmjs.com/package/react-hook-form)

Open Your NextJS profile inside IDE - VsCode 

Create validate.js file inside pages folder, open it and use shortcut rfce for create basic reactjs function.

(You can change ext of validate.js file to validate.jsx if you want to use html shortcuts like div.row for row class to div.)

create couples of html divs with classes such card, card-body and form-group to display your UI of form

> full name UI with error display
`<div className="form-group p-4">
       <label htmlFor="fullname">Full name</label>
       <input className='form-control' {...register('fullname', {required:true})} />
{errors.fullname && errors.fullname.type == "required" && <p className='text-danger'>Please enter the full name</p>}
</div>`

> City name UI with error display 
`<div className="form-group p-4">
   <label htmlFor="city">City Name</label>
   <input className='form-control' {...register('city', {required:true, minLength:3})} />
{errors.city && errors.city.type === 'required' && 
<p className='text-danger'>Please enter city name</p>}
{errors.city && errors.city.type === 'minLength' && 
<p className='text-warning'>Please enter minimum 3 letters</p>}
 </div>`

> Button UI
`<div className="form-group p-4">
  <input type="submit" className='btn btn-success' />
</div>`

Import UseForm from react hook form
`import { useForm } from 'react-hook-form'`

const for register, handleSubmit and form state for errors
`const {register, handleSubmit, formState:{errors}} = useForm();`

Now add main function to alert the result 
`const myfun = (d) =>{
       alert(d.fullname + ' from ' + d.city);
 }`
Release 0.4: Progressing
Tags: javascript, opensource, webdev, programming
Published: 2021-12-13 04:31:51

A few updates here for you folks

## Fixing the first requirement

Like what I thought the first requirement is quite simple. I use [JSON pretty print](https://jsonformatter.org/json-pretty-print) to help me get a better and clean look at the returned JSON when testing. But not to mention this is my first time actually running the docker and start all the images by using `npm services:start` and every time you made some change to the code you will have to stop and run it again `npm services:stop`. 

I hear that Emily has been working on the `invalid` feeds for a long time so I thinking about checking her commit would give me an idea on where to start it. I see Emily create some change in the `src/api/posts/src/storage.js` where we might get the info of the `invalid` feed through `getInvalidFeeds`. I went in and make use `regex` to chane all the `\n` to whitespace 

```javascript
reason: reason.replace(/\n/g, ' '),
```  
Then I restart the images and ran again the results the `regex` do the work

## A lot of debugging for second requirement 

For the second requirement, I would check all the common point of the `304` invalid and it is weird to me that some of them seem to work fine and show up in `telescope` where it should not

> An invalid post would be a post that we would not be able to pass through the parser. 

I put the break point at `src/backend` when the queue is failed we will call `invalidateFeed`  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqum95w9gg6bipmrsyvt.png)
 
And to my prediction, the `rss-parser` fetcha a feed and gets `304`, the `304` has no body so we considered it to be failed request and mark it `invalid`

I try to make change at `src/backend/feed/processor.js` 

```javascript
 if (!(response && response.status >= 400)) {
    info.shouldDownload = false;
    return info;
  }
```
When I restart it, for a while there was no `304` psot which make me feel so exiciting about it but for a while the `304` keep showing up more and more so the problem has not been solved 

## Third fix 

I actually found 2 resources which might be useful to help me in setting the `ttl` expire period for the key: [Redis-doc](https://redis.io/commands/TTL) and [issue-100](https://github.com/redis/node-redis/issues/1000) and I wil be dig in to it in couple days to figure it out
FLATIRON FINAL PROJECT - REACT/REDUX & RAILS API
Published: 2021-12-13 04:23:17

For my final project at Flatiron school I decided to make an app that would allow user post their own versions of popular movie titles online. This app is called Fan Fiction and has full CRUD functionality.

One of the major difficulties I faced when I was building the app was implementing reducer and action for edit functionality so I am going to explain how I implemented it.

First, I started from the reducer by creating a case for the edit action. In the reducer, I iterated through the movies array in my state object using the find method and returned the movie that matched the the payload I was going to receive from my edit action. The payload in this case was also an id. I then set this return value to a variable. After that, I set the variable to the current movie object in my state push it into my original state using the spread operator so as to not alter the other parts of the state.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1z41wc2diq6442frqycu.JPG)

Next, I created the action for both edit and update. Edit action grabs for us the item we want to edit and update makes the necessary changes to that item.

![edit and update action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3amxn8ingrno4gbseev.JPG)

Finally, I made a reducer for updating. The logic I used here was to set a variable to the payload I was receiving from the update action. Then iterate through all the movies in state to see the movie whose id matched the id of the movie we get from the payload. When that movie is found, we replace it with the new movie object from the payload and then add it to the existing state using the spread operator. Finally we clear out our current movie object since it has already been modified.
![update reducer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh23fm5tq6p90l5hpv7a.JPG)

Overall this project really tested my knowledge and skills but I am far from finished with this app. I intend to add more useful features to it in future.
[Link] Why I Don't Write Useful Software Unless You Pay Me
Tags: opensource, java
Published: 2021-12-13 04:18:41

> As of yesterday, there were a grand total of three sponsors for this person's work. THREE. As of today, this number is now 14; however this is no excuse. This person should be funded in a level that is appropriate for how critical log4j2 is used in the ecosystem. There is no excuse for this. This person's spare time passion project is responsible for half of the internet working the way it should. Vulnerable companies to this issue included Apple, Google, my cell phone carrier and basically everyone that uses JavaEE in its default configuration.

["Open Source" is Broken](https://christine.website/blog/open-source-broken-2021-12-11)
Blog Post #10
Published: 2021-12-13 04:16:46

**Summary**
For this project, I worked with a group of 3 other members to create a sorting test where the user is able to drag or press a button to put the items in order. The user can reset the game and check their answers. 

**Question 1 Screen Setup**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtyckt46ki86xz3r3qmc.png)

**Check Answer Screen**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/881x9oa2tlbktq1d1i8y.png)

**Example of a piece of code used in the project**
For this project we mainly focus in creating everything within 2 specific classes, the SortableFrame.js and SortableOption.js. Attached is the render function used in the SortableOption.js. We used slots and divs within our render function. It will render based on the users actions and includes the up and down buttons if the user chooses to move their choices to the correct location that way. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r4nt3szp9m5f4udzx6m.png)

**HAX and JSON**
Our group is still currently adding components of HAX into it since we did do this differently then other groups in our class. The portion of HAX that is included in our project is the HAX Schema. JSON file includes our questions and answers to allow that to populate and work. 

**Link**
Github:https://github.com/njd5435/project-3/tree/master
NPM:https://www.npmjs.com/package/@table-in-the-corner/project-3
How to secure API Key on FrontEnd
Tags: javascript, frontend, security
Published: 2021-12-13 04:14:50

A-lot of times, where we just want to create website to do some dynamic functionalities without being handhold by backend.

Best way of doing it, is by API Calls. For doing API calls we must be having API keys to work with. 

And now biggest question, where to place API keys.

What we are going to build today:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16xtp7jhw9772dkw8h4r.gif)

Lets do one thing, first get the API keys. So in these blog posts i am going integrate Weather Forecasting.

To create Weather forecasting page, we need to work with API. So for these i decided on [Open Weather map](https://rapidapi.com/community/api/open-weather-map/) to fetch data. So for these you need to create account that will provide access to APIs and api key.


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

So API KEY again, now we have our own API key to access apis from Weather Statistics.

So again question, how to secure these API key. 
So solution is [KorConnect](https://korconnect.io/) which gives you option to create API Connections.


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

Here, you need to add API key detail, api url and other information. Once you are done, you will see list of endpoints added.


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

Now, once you are in. You can see url endpoint and public key to call you secure API call.


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

You can now call api as, < SECURE_BASE_URL >/endpoint from Statistics. And remember to add headers also.

Point to note here:
1. If you are testing on postman, you should be on Testing Mode.
2. When you are all ready to live, turn to Production mode. which is more secured.


Code snippet example to use:

```
fetch("YOUR_PUBLIC_URL", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "YOUR_PUBLIC_API_KEY"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});
```
Now KorConnect will internal connect with your domain, and your API key is secured from outside world.

It is as simple as that, now you can integrate apis without any additional setup or library.

You can add more security to your API and API key via [Read here](https://kor-comunity.gitlab.io/kor-connect/adir/SECURITY.html).
Rendering Local/Static Images in Next JS
Tags: nextjs, javascript, webdev, tutorial
Published: 2021-12-13 04:14:29

To render a static image in Next JS.

1. Always store images in the folder called `public` under the src directory.
2. To render an image if image name was `img.png`.Then it will be available like this.
```
<img src={`img.png`} alt="Person Avatar" />
```
Thats it.
For more info 
[Original Source](https://nextjs.org/docs/basic-features/static-file-serving)
Writing with deeper dive
Tags: writing
Published: 2021-12-13 04:10:06

One of the challenges I want to make is to write with deeper thought. 

In recent years, I have post more tweets that are less than 140 characters than writing a blog with more than 3 paragraphs. 

I would love to deep dive into the topics that I am going to post here. I think when I have a topic to write, I would ask myself the five Ws and answer the 5 Ws. 

I am going to need a lot of practice. I hope as I write more on topics with deeper dive, I will get better.
Integrating IoT Devices and ERP Software
Tags: iot, erp, architecture, microservices
Published: 2021-12-13 04:03:39

Integrating ERP with IoT

Integration into IoT implies that the mixing of new IoT, IoT, and IoT systems – together with IT assets (business applications, legacy data, mobile, and SaaS) – work well with the implementation of IoT business solutions in one-stop-shop.

Examples of old and new ERP (IoT) collaboration to bring great benefits to the organization

RFID (Radio Frequency Identification)

It was possibly one of the first sensor-based gadgets which were spurred by Wal-decision Mart’s in the mid-2000s that its major suppliers would conform their RFID goods.

Quality Processes in Manufacturing

Traditional quality methods depend on sampling techniques to assess if items are produced according to requirements. This is not only not exact, but it is also too late.

Fleet Management

The fleet management sector has been one of the major benefactors of IoT and ERP integration. In addition to the normal benefits such as car tracking and geographic closure, data from IoT sensors may truly contribute to validating and achieving corporate aims.

Digital Supply chain

Supply chains are altered through the usage of IoT devices that are connected to ERP systems. The supply chain is not a set of opaque warehouses, shops, terminals, or vehicles anymore. Instead, the supply chain is a permanent dam of movement which offers visibility at the SKU level.

[Read More...](https://www.speranzainc.com/integrating-iot-devices-and-erp-software/)
How to install open-wc on Mac
Published: 2021-12-13 03:51:00

## open-wc tutorial Mac:

Before beginning the installation of open-wc on Mac, it is important to verify what version of Nodejs is installed on your computer. Node 14 (14.15.5) is the correct version to download in order for the rest of the steps to work. To check for updates, visit here:
 https://nodejs.org/en/.

**Then to install npm on your machine, you type in the terminal:**
 
"npm install -g npm" 

**Typing "node -v" will let you know what version you have and if you have successfully installed npm.**

**After that, you want to install yarn onto your computer.  Go to the command terminal and type in:**

"npm install -g yarn"

**Similar to node, type in "yarn -- version" to see what version you have and if the download was successful.**

**Finally, go to the command line and type:**

"npm init @open-wc" 

**Go through the rest of the instructions:**

-Create new project scaffold
-Web Component
-Linting, Testing, Demoing
-Does NOT use Typescript
-Name "hello-world"
-Installed via yarn

**Confirmation message will appear if all is done correctly.**
Final Project - Trading Card
Published: 2021-12-13 03:47:56


**The Project:**
The project we chose to work on was to create trading cards that display multiple statistics pertaining to each card and for the user to have the ability to create their own card from a template.  In order for the user to be able to create their own card, we needed to implement HAX so the elements were able to be manipulated.  The card had to look similar to an asset looking like this: 

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

**Progress So Far:**
So far, we have made solid progress as a group and the cards are starting to come together.  As of right now, the cards look like this:


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

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

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


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

We still may change some of the properties around and make overall improvements towards the card.  The card does work with HAX in the demo, and users are able to customize and create their own trading card.

The array called 'cardData' is where we pull most of the information from like the name, image, age, power, and speed.  

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

'cardData' also is where the formatting for the statistics and image rendering is done.  The CSS in 'cardData' is done in a way to make the images look more like conventional trading cards.

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

Arrays are then rendered via mapping to be updated and printed according to our specifications.  The mapping was somewhat tricky to figure out, but we are glad we did because it makes the rest of the project easier to work with. HAX was also pretty cool to work with and giving users the ability to change elements to accommodate their preferences is an interesting and forward-thinking concept.


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

## NPM:
https://www.npmjs.com/package/@paddyshub/project-3

## Github:
{% github PaddysHub/project-3 no-readme %}
SPO600 - Week 7
Published: 2021-12-13 03:46:16

Week 7 of my learnings for my SPO600 course included information about compiler optimizations. There was supposed to be a recording on the introduction of AArch64 and x86_64 but it was moved to week 8. So we only have one topic.

About compiler optimizations, let's start with a certain compiler first, namely GCC. The flags on this one are quite iconic, some of them being -O (adjusts level of optimization, O to O3), -pipe (avoids temporary files), and -g (logs debugging info).

Some popular optimization options for it are Loop Unswitching (swapping a condition inside a loop for loops inside a condition), Loop Switching (splitting a loop into two if both parts work differently) and Loop Unrolling (rendering the loop guaranteed to execute an even amount of times).

Using these, we can increase performance, readability, and more. It's an essential thing to know for any developer.
SPO600 - Week 5 & 6
Published: 2021-12-13 03:41:28

Week 6 was a holiday and there was no class or assigned work, so I will be bundling it up together with week 5.

Week 5 taught me about compiling, building, and making programs and code. The C compiler specifically has a lot about it. I learned about the five steps it takes to successfully compile, listed:

- Preprocessing (handles directives to build a source file)
- Compilation (c code converted to assembler)
- Optimization (handles optimizing code)
- Assembly (converts assembly code to binary object code)
- Linking (connects code to functions)

This not only applies to the C language, but other languages which compile into binary object code such as C++ and COBOL.

I had also learned about feature flags, options to include when compiling which will affect the process. An example is `-00`, which disables optimizations.

Additionally, building software was taught and demonstrated. After building it was necessary to make the file using a makefile so it could be run. It is all a similar process.