teleren/devto huggingface dataset:
Quickly Fix CORS issues in Vue- Express app
Tags: vue, cors, express
Published: 2021-11-29 07:49:39

Cross-Origin Resource Sharing (CORS)as defined on [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources

CORS issues almost often makes scaffolding your first full stack application heart breaking😬

So I put together a Lil nice work around earned from expreience. I hope it helps  in dealing with CORS issues in your next Vue and Express Js App.

_The following procedure assumes a moderate level of experience in building applications with [Vue.js](https://vuejs.org) and installing [nmp](https://npmjs.com)package 📦
 
To start with. 
1. Create a new file the the base directory of your Vue project
````shell
touch vue.config.js
````
2. add the following to your the file 
````
module.exports = {
  devServer: {
        proxy: 'http://api.back.end',
    }
}
````

3. navigate to your backend base directory and run the following command 
````bash
npm i cors --save
```` this make it easier to handle cors 

4. The following lime assumes your _Express_ instance is named **app** if not change **app** to <express instance name>

````js
const app = require("express")
//...
//the rest of your import here
//...
const cors = require cors()
app.use(cors());
//... continuation of your application
````
😊 And that does it. 

## Reference and more reading 
 [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

## follow me 
<a href="https://twitter.com/opeolluwa" style="text-decoration:none;">twitter
</a>

 
<a href="https://github.com/opeolluwa" style="text-decoration:none">Github
</a>
How to convert an uploaded image to base64
Tags: javascript, react, webdev, beginners
Published: 2021-11-29 07:33:56

This is a short JavaScript example of how you could convert an uploaded image file to a base64 string. This example uses React for directly showing the result, but the converting part is regular JavaScript and could be used outside of React context.

{% youtube pxkE2tT6Y-o %}
Free BBCode Table Generator Tool
Tags: javascript, webdev, programming
Published: 2021-11-29 07:31:18

Welcome to the online bb code editor! Edit your text and click the "[BBCODE]" button to get your bb code.

##BB Code Editor shortcuts - [bb codes generator](https://www.pakainfo.com/bbcode-generator/)

Bold: ctrl + b
Italic: ctrl + i
Underline: ctrl + u
Insert image: ctrl + shift + 1
Link: ctrl + shift + 2
Code: ctrl + shift + 4
Quote: ctrl + shift + 3

Create a customized table using BBCode in 5 easy steps.

BBCode is short form for Bulletin Board Code. Similar to the HTML markup language, BBCode is a popular method for formatting messages/postings on online forums.

Teamopolis uses BBCode with its Free League or Free Team websites.

BBCode uses square brackets "[" and "]" at the start and end of the tag.

Just pick the number of rows, columns to create the input fields, enter in your information in the fields, and click the Generate button to generate the BBCode Table.

Be sure to check out out BBCode Reference Guide for more information about the various BBCodes and their usage.

BB code generator? I'm really needing some sort of script that will generate BB code when some one fills in the form with the image name. 

This page created for simple link html and bbcode code generation. Generate links tool is free and accessible for everyone. We want to provide beginners free and easy interface for generate link code.

```
HTML code looks like <a href='{link url}' title='{title tag}' alt='{alt tag}'>{link name}</a>.
BBcode looks like [url='{link url}']{link name}[/url].
```

In web terms, a hyperlink is a reference to a resource on the web. Hyperlinks can point to any resource on the web: an HTML page, an image, javascript pages ,a sound file, a movie, etc. An anchor (link name or text lable) is a term used to define a hyperlink destination inside a document. 

The HTML anchor element a, is used to define both hyperlinks and anchors.

HTML offers many of the conventional publishing idioms for rich text and structured documents, but what separates it from most other markup languages is its features for hypertext and interactive documents. 

Link (or hyperlink, or Web link), the basic hypertext construct. 

A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.

Link generator helping to get code without any coding, result can be copy pasted and inserted without any changes.

We understanding that functionality of this tool if very-very simple, but if we can help to generate link code of some other type pls told us about with using feedback.

<a href="https://www.pakainfo.com/bbcode-generator/">Example</a>
Learn all about Typescript
Tags: typescript, javascript, node, programming
Published: 2021-11-29 07:26:06

https://www.youtube.com/playlist?list=PLIGDNOJWiL19yoowEtDCOrENRBHH3qLty

[![utube](https://img.youtube.com/vi/u1fU91kGvAY/maxresdefault.jpg)](https://www.youtube.com/playlist?list=PLIGDNOJWiL19yoowEtDCOrENRBHH3qLty)

​
5. Learn Typescript
6. Typescript Course Topics #
7. Typescript Course Agenda #
8. Learn Typescript in Depth #
9. Understanding Typescript & its Compiler TSC #
10. Understanding Typescript Types #
11. Learning Typescript Section  #
12. Typescript Section  Types with Let & const #
13. Typescript Section  Creation Variable with Multiple Types #
14. Typescript Section  Non Primitive Group in Typescript #
15. Typescript Section  Enforcing types in a List #
16. Typescript Section  Enums in Typescript #
17. Typescript Section  Interface in Typescript #
18. Typescript section  Combining Merging Types #
19. Typescript Section  Typescript with Map & Set #
20. Typescript Section  Object & Object in Typescript #
21. Typescript Section  Types in Typescript # 
22. Typescript Section  Types & Type Cast in Typescript #
23. Understanding Typescript section  Combining Types #
24. Typescript section  Combining Types with Generic #
25. Typescript Section  Combining Types #
26. Typescript Section  Interface & Classes #
27. Typescript Section  Interface & Classes #
28. Typescript Section  Tuple in Typescript #
29. Typescript Section  Object Oriented Programming #
30. Typescript Section  Encapsulation using Public Private #
31. Typescript Section  Access Specifiers #
32. Typescript Section  Child Parent Class #
33. Typescript Section  Extending Classes #
34. Typescript Section  Abstract Classes #
35. Typescript Section  Interface for Object Oriented Classes #
36. Typescript Section  Typeof and Instanceof #
37. Typescript Section  Generics in Typescript T #
38. Typescript Section  Extending Generics #
39. Typescript Section  Advance generics Keyof #
40. Learn Typescript
41. Typescript Course Topics #
42. Typescript Course Agenda #
43. Introduction to Typescript #- Superset of Javascript
44. Typescript Introduction Part # - Type Safety in Typescript
45. Typescript fundamentals & Types # - Installation and setup
46. Typescript class, enum , interface Part #
47. Typescript Module Creation namespaces
Typewriter effect CSS
Tags: css
Published: 2021-11-29 07:13:34

In this article, we'll be creating a typewriter effect in CSS!
We won't be needing any JavaScript to achieve this effect and the result will look like this:

{% codepen https://codepen.io/rebelchris/pen/GRvzjYL %}

Alright, let's get started!

## Setting up the HTML

As for the HTML, we don't really need much. We just want a paragraph or text element that we can manipulate.

```html
<div>
  <p>Beetlejuice, Beetlejuice, Beetlejuice!</p>
</div>
```

Then let's quickly add some basic styling so the text is centred:

```css
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
```

And now we can add some basic styling to make the text stand out a bit more.

```css
p {
  font-size: 2rem;
  font-family: "Courier New";
}
```

By now, it should look something like this:

![Styled typewriter in CSS](https://cdn.hashnode.com/res/hashnode/image/upload/v1637216446187/DPv1J7y_g.png)

## Adding the blinking type caret

Let's start by adding the blinking type caret at the end.
This type of caret indicates a typewriter effect in most applications; I'll be using the one from iAWriter, which is a blue one.

We can achieve this blinking caret by leveraging the right border of the p element like so.

```css
border-right: .15em solid #18BDEC;
```

To animate this, let's create a blink animation that will run forever.

```css
animation: blink 1s steps(1) infinite;
```

This blink animation will be super simple as it only needs to change the border-color to be transparent halfway.

```css
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
```

By adding the 1 step in the animation, we create the quick blink effect instead of a slow fade.

Resulting in the following:

![Caret type effect CSS](https://cdn.hashnode.com/res/hashnode/image/upload/v1637217127932/WJ9IrvPaF.gif)

## The typing effect

Now it's time for the actual typing effect.

We first want to make the `p` tag have 0 width and not wrap to other lines or show the overflow.

```css
width: 0;
overflow: hidden;
white-space: nowrap;
```

Then we want to add the animation. Since we already have an animation in place, we can use a `,` to separate the two.

```css
animation: typing 4s steps(38) 1s 1 normal both, blink 1s steps(1) infinite;
```

I used 38 steps as there would be 38 characters in my paragraph.

Let's have a look at how this typing animation should look.

```css
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
```

Yep, that's it, a simple 0 to 100% width animation.
And it will give us this cool typewriter effect we are looking for.

To make your animation fit your text and font, you might have to play around with the animation settings.

Try playing around with the duration (`4s`) and the steps to make it work best for you.

I hope you enjoyed this article and learned something new.
Do share your creations with me on Twitter! 👀⌨️

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
HTML tags | html
Tags: html, tags
Published: 2021-11-29 07:10:04

**It represents the root (top-level element) of an HTML document**, so it is also referred to as the **root element**.

Is the container for all other HTML elements so they must be descendants of this element (except for the `<!DOCTYPE>` tag). It can contain one `<head>` element followed by one `<body>` element.

The start tag may be omitted if the first thing inside the `<html>` element is not a comment. The end tag may be omitted if the `<html>` element is not immediately followed by a comment.

It has and `xmlns` attribute to specify the XML Namespace of the document. Default value is `"http://www.w3.org/1999/xhtml"`. This is required in documents parsed with XML parsers, and optional in `text/html` documents.

Providing a `lang` attribute with a valid language tag according to [BCP 47](https://datatracker.ietf.org/doc/html/rfc5646) on the `<html>` element **will help screen reading technology determine the proper language to announce**. The identifying language tag should describe the language used by the majority of the content of the page. Without it, screen readers will typically default to the operating system's set language, which may cause mispronunciations.

Including a valid `lang` declaration on the `<html>` element also ensures that **important metadata contained in the page's** `<head>`, such as the page's `<title>`, **are also announced properly**.

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) | [Support](https://caniuse.com/mdn-html_elements_html)
tsParticles 1.37.5 Released
Tags: showdev, javascript, webdev, html
Published: 2021-11-29 06:58:00

# tsParticles 1.37.5 Changelog

## Bug Fixes

- Fixed issue with collisions, fixes #2586, fixes #2380

---

# tsParticles 1.37.4 Changelog

## New features

## Bug Fixes

- Fix for Safari <14

---

{% github matteobruni/tsparticles %}
Using React Query with axios and Fetch
Tags: react, usequery, reactquery, axios
Published: 2021-11-29 06:57:41

!['REACT'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmfh4ere79bepiby4x28.jpg)

https://www.youtube.com/watch?v=GOpkIVbeQAg&list=PLIGDNOJWiL1-aMrPjLaTfvkeDCYo-sRBF&index=4
Style React Components, All possible ways
Published: 2021-11-29 06:55:25

!['react'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huyy2exp4m8rj0z6umpn.jpg)

https://www.youtube.com/watch?v=78nqu4REExk&list=PLIGDNOJWiL1-aMrPjLaTfvkeDCYo-sRBF&index=1

Different ways to Style React Components - Webinar #04
Day 23 of #100daysofcode: Meetings and Progress
Tags: 100daysofcode, react, python, beginners
Published: 2021-11-29 06:53:44

Hey all! Late update tonight, here's what I worked on today.

## Today
* Started on the debugging section of the JS course on FreeCodeCamp -- Still chugging away on this course for the certification
* Bounced between meetings and work on the school project
* Practiced some Leetcode -- Need to up my Leetcode practice as I'm feeling a little rusty

I am nearing the end of the semester; I'm really excited to have more time to really dig into this project and start ticking away the challenges I have set for myself.

## Upcoming
* **Finals and final project sprints**: Not much time left!
* Continue reading about Django, 
* Iron out details regarding the Study Aid app (I really need to name this thing) -- May work on this this weekend
  * Flask vs Django - This is still an ongoing discussion. I received some good advice to stick with what I know in Flask, however I am still considering diving into Django, as I will have free time soon. Diving in headfirst has always been my favorite way to learn, however it is often not efficient!
  * Should I change how I deploy? Should Docker get in the picture?
  * Are there any other systems I should think about using as a part of this project?
* Learn more about Material UI, I will probably use Material UI a little bit in my (ongoing) school project. 
* Start the Study Aid app!
* Later in the challenge: AWS Deployment, AWS Certification, and Using Docker!?


Have a great, long weekend everybody, stay safe!

### Resources
[JS Course - FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
[Understand Django - Matt Layman](https://dev.to/mblayman/from-browser-to-django-j0l)
Accessing ASP.NET website for the first time is really slow
Tags: dotnet, webdev, programming
Published: 2021-11-29 06:50:34

I have ASP.NET MVC website, that I deployed to GoDaddy. Reason I chose GoDaddy was, that they had a amazing offer, $20 for domain name and 50GB hosting for the first year. The app is deployed there, works fine, I'm using databases provided by GoDaddy, so all is good.

However, if I want to access my site (<a href="https://www.osuskins.me/">osuskins.me</a>), it takes a really long time the first time I do, but is fine for about an hour afterwards. It's like it's being cached by IIS or something. I posted an article there and it got popular, so for about 2 days, the site response was nearly instant. I even tried clearing browser cache and different devices, in case I had it cached locally, but even after that, it took 1-2s max to load.

Today, I checked it again and it took about 15 seconds to load. I checked Google analytics and no one has been on it for the past 10 hours, so I was first access in a long time.

I don't have access to IIS controls, because GoDaddy doesn't have that on basic hosting, but is there some setting in Web.config file that could keep the site "fresh" at all times? I deploy it precompiled, I have caching on one controller action, but that is only for 5 minutes to lessen DB access.
Welcome to Graphql World
Tags: node, graphql, nestjs, api
Published: 2021-11-29 06:50:01

## Learn from My courses about Graphql

!["GRAPHQL"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjytosx39nv7w9yjkbib.jpg)

https://www.youtube.com/playlist?list=PLIGDNOJWiL1-uGdiUKnhLvql_KrDNlvDy


Developing Graphql APIs with Different Libraries (client side and server side) #

- Developing Graphql APIs with Different Libraries (client side and server side) #

- Graphql Course Introduction #
- Basic Graphql Setup using Yoga Graphql #

- Building First Graphql APIs #

- Creating TypeDef and Resolvers for Graphql #

- Creating Queries with Mock Data #

- Accessing Query Arguments Object Graphql #

- Folder re-structuring with resolvers and schema #

- Using Context Arg for Data source Graphql #

- Creating Muttaions for user and posts Entity #

- Graphql Testing Mutations using client #

- Creating Graphql Subscription and Testing Subscriptions #

- Graphql Subscription Example #

- Graphql Series Agenda with Different ORM in Node JS #

- Using Graphql Client with Apollo to Consume APIs #

- React App Integration with Apollo Graphql Client #

- React App adding Queries, Mutation with Apollo Graphql Client #

- React App with useQuery and useMutation hooks #

- React App Demo with Subscriptions, Query & Mutations #

- Yoga graphql with Mongo DB Mongoose #

- Yoga graphql with MongoDB adding graphql types #

- Yoga graphql with MongoDB adding resolvers #

- Yoga graphql with Mongoose adding resolvers #

- Yoga Graphql with Mongo DB Application Demo QueryMutations #
- Code with tkssharma
Crazy TLDs
Published: 2021-11-29 06:41:24

Check out these weird domain extensions:
* .eurovision - No seriously. Imagine typing "google.eurovision"
* .genting
* .gent
* .george
* .sucks
* **.computer**
* .meme
* **.wtf**
* .online
* **.website**
* .dot - Yes, I know. *facepalm*
* .rehab
* .democrat
* .republican
* .ooo
* .goo
* .off

And check out: http://EE.EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE.EE
and
http://3.141592653589793238462643383279502884197169399375105820974944592.com/


If you liked this post, make sure to hit the like button :heart:
Follow me on GitHub: https://github.com/manuthecoder
Hack rank full stack Certifications | Test your knowledge
Tags: javascript, programming, react, html
Published: 2021-11-29 06:36:58

## Get Full Stack Certifications

!["certifications"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6qrvego71lzw1t2mkbv.jpg)


https://www.youtube.com/watch?v=bnBeEdl2O-o&list=PLIGDNOJWiL1_-NKjmlXFaso_IX-fvYdvm 

https://github.com/tkssharma/hackerrank-full-stack

### what are hackerrank certifications
- Test your knowledge
- Test you skills on javascript, angular, react, nodejs
Solar Light Price in India
Tags: light, solarlight, kenbrooksolar
Published: 2021-11-29 06:20:29

Solar lights are a unique device that combines all solar components into a single package. A high-efficiency solar panel, multiple LED lamps, a lithium-ion rechargeable solar battery, a mounting framework, and various tiny solar accessories are included. As a series of next-generation solar luminaires that rely on the photovoltaic effect, these lights are much more efficient and dependable in operation. Solar lights are highly safe and convenient since they operate independently of the grid and do not require hefty cabling.
Introduction to My Blog
Tags: beginners, programming, webdev
Published: 2021-11-26 20:11:51

Hello, to all you interviewers (and even the few random people who stumble upon this useless post), welcome to my Blog-Post. As you know I my application has the coding Bootcamp Flatiron as my primary source of education for programming, and that is where I was encouraged to start writing a blog-post to grow my online presence. Anyways refer to the two sections below.
## General Post Content
In these blogs, at least for the next few months, I will be posting on the random walkthroughs for coding problems that I've faced while learning at Flatiron. I will also be providing solutions to problems I face on a few coding projects that I am currently working on, my first post will be one of these.
## Who is I
My names Bennet Upfield. I've been programming for my own pleasure for around 2 years and have taken a few college courses on Computer Programming. When I took these courses they surprised me with how much I enjoyed them. This has taken me to enter into the Flatiron Bootcamp where I hope to enter into the programming Industry for the hope of finding enjoyable employment.
## Anyway
Go read the rest of my blog post, I'll try to keep them more engaging than this one.
The Complete Guide to AB Testing and the Important Considerations You Need 
Tags: testing, beginners, wordpress, tutorial
Published: 2021-11-29 06:16:23

A/B testing is the process of comparing two versions of a web page with the goal of finding which one performs better. It is an important step for any business website because it helps to improve their conversion rates and ultimately leads to higher revenue. Nowadays there are plenty of tools that help you to run online A/B tests easily.

Step 1: Decide on the goal of your test

Step 2: Identify different variable content or design treatments

Step 3: Determine your success criteria before beginning AB testing.

While the process is short, it's important for companies to consider all the considerations before starting their AB test. There are many factors that can affect how well an AB test will run and understanding them will help you to get better results.

—

What are the Best Tools for Running Online A/B Tests?

The best tools for running A/B tests are:
Google Analytics, Optimizely, VWO and Adobe Target. 

These offer the simplest interface, largest variety of testing techniques, and highest level customer support.

<a href="https://www.assignmenthelpservice.com/">Assignment Help Service</a>