teleren/devto huggingface dataset:
The Weekly Dev - 202206
Published: 2022-02-07 23:31:40

---
title: The Weekly Dev - 202206
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
canonical_url: 'https://kevwe.com/weekly/202206'
---

A code repository, a balancer and good intentions:

https://kevwe.com/weekly/202206
No 'Access-Control-Allow-Origin' header is present...
Tags: help, webdev, cors
Published: 2022-02-07 21:10:01

Hi all, 

I created a very basic app just to try and test out authentication. 

I am using flask on the back end, and React on the front end. 

When I make the request through the firefox browser, it works (most of the time!). But it does not from chrome. 

I get the following message: 

> Access to fetch at 'http://localhost:5000/api/v1/register' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

If I submit a request via Postman or Curl, it works just fine. So I feel that the backend server code is working fine. 

I have tried both including and excluding the headers for 'Access-Control-Allow-Origin' and 'Content-Type'. In all scenarios it doesn't work. 

When I googled what to fix, I get a complicated answer like I need to set up a Nginx proxy server. 

I am just trying to build apps for my portfolio. 


Thank you so much!
tsParticles 1.40.2 Released
Tags: showdev, javascript, typescript, webdev
Published: 2022-02-07 23:21:00

# tsParticles 1.40.1 Changelog

## Bug Fixes

- Restored emitters functionality, closes #3088

## Regression

- Regression on emitters double start, #3074, this is taking longer than expected

---

# tsParticles 1.40.2 Changelog

## Bug Fixes

- Removed all browser flags in package.json, a lot of issues with it. Closes #3094, thanks to @longnguyen2004 for the help

---

{% github matteobruni/tsparticles %}
Day 525 : Keep That Same Energy
Tags: code, coding, hiphop, lifelongdev
Published: 2022-02-07 22:31:57

_liner notes_:
- Saturday : Whew, it seems like I put together the radio show later and later! haha This time, I was actually in the station's parking lot still finishing up. haha Super happy that we can use the podcast studio, so I don't have to worry about all the meeting rooms being full. Good thing is that I did a lot of the work that would be needed for this week. I'm going to see if I can keep adding to it a little by little and keep my lead going. haha Did the show and had a great time. Paid a small tribute to J Dilla and Nujabes whose shared birthday is Feb 7th. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of Dan Carnas' book about J Dilla with the words Feb 5th 2022 NuJ Dillabes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz0xj8o82y3gb5kia1fz.jpg)

- Sunday : Did the online study session thing at https://untilit.works . Got what I normally get done completed, but not as much as I would have liked. I think with the weather being cloudy and cold kind of made me tired. Wish I could keep that same energy when the weather is nice. I did do some work to hook up the dashboard of my new project to the database. Then I was tired and watched anime and went to sleep. haha 

- Professional : Not a bad day to start off the week. Had a couple of meetings and got to talk with coworkers. Had another one where some folks from another team went over some new features that will be coming out. Got some ideas we can do to create some content around it. Then I worked on cleaning up some code and creating some documentation for a project I've been working on.

- Personal : Making some good progress on the new side project I started. I'm trying to have it done in the next couple of days, because I'll need it for next week. Nothing like tight deadlines. haha. Good news is that it's kind of like a combination of a couple of my previous projects so it's just about looking at that codebase and making the necessary changes.

![Photo of a desert with sand dunes in Huacachina, Peru extending into the horizon.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59fhdcxh23wocrq9x3z3.jpg)

Going to see if I can get working adding and listing data to the database from the dashboard I've been working on. Also want to create the stills/assets for a promo video I'm making. After that, probably end the night watching anime.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube nTyCFH9Ripo %}
Modeling Data In Quasar Like A BOOOSS With VuexOrm
Tags: vue, quasarframework, javascript, laravel
Published: 2022-02-07 22:23:07

It's hard to express the impact [VuexOrm](https://vuex-orm.org/) has had on my career as a developer.

It's fundamentally changed the way I deal with data on the frontend! At Agripath (where I work), **we almost NEVER deal with the store directly**.

Most interactions with the store are done with [VuexOrm](https://vuex-orm.org/), which gives us a **gorgeous** API. Stuff like this:

```js
import User from 'models/User'
import Post from 'models/Post'

User.all()

const posts = await indexPosts()
Post.insert({ data: posts })

Post.query()
  .orderBy('rating')
  .with('comments.user')
  .get()
```

If that code doesn't excite you, either read it again or check your pulse!

Take a look at [VuexORM video series](https://www.youtube.com/watch?v=D0bOiA7uxZI&list=PLFZAa7EupbB5-MLdEuVP8jXW2WADpvI39&index=1) to find out more, and learn VuexOrm!

## VuexORM App Extension (AE)
Truth be told, it doesn't take too much work to setup VuexOrm with Quasar. However, there are a few things we can do to streamline the setup. Here's some of the features:

1. Auto import and register models to the "VuexOrm database"!
2. Easily create new models using Quasar's cli
3. `models` alias already registered for you

Once [everything is setup](https://github.com/ldiebold/quasar-app-extension-vuex-orm), all you have to do to add a new model is run the following command:
```sh
quasar run vuex-orm new:model Todo
```

Now you're ready to `insert`, `find`, `delete`, `update` etc Todo's to your hearts content!

## Give It A Try
Ready to take VuexORM for a spin? Take a look at the [VuexOrm App Extension GitHub page](https://github.com/ldiebold/quasar-app-extension-vuex-orm) and let me know how it goes!

And remember,

You can build anything...
Icelite purchased NT Games for $500 USD
Tags: webdev, javascript, css, gamedev
Published: 2022-02-07 22:20:08

The small technology group Icelite has purchased game studio NT Games, which makes advertisement-free, no cost video games.
Icelite sees great potential for NT Games to thrive, and is making NT Studios a new type of game publisher.

Until next time,
Icelite Blog Team
DJango Secret
Tags: django, python, secret, key
Published: 2022-02-07 22:14:15

## How to create a DJango secret ?
The DJango SECRET is an important random string for the security of your project, the problem is to generate a new one when needed.  
Django includes a simple way to do it, why not using it?  
### Create your venv, activate it and install the jango package  
Once done, just use the CLI.  
### From the terminal  
```bash
python -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())'
```
What is Object oriented programming sef?
Tags: oop, javascript, java, beginners
Published: 2022-02-07 22:13:39

object oriented programming - (OOP):
**is a collection of objects that  with each other by 
passing messages that transform their state."**

Danities this confusing, ok hold let me explain...

In order to understand OOP, we need to understand what **objects** are in programming, and in order to understand object we need to understand **primitive data types**.

Primitive-data-types are a set of basic data types from which all other data types are constructed. Think of this as least minimal of data.

Specifically it often **refers to data types that store single, simple values** some primitive data types in JavaScript are:
Boolean, Strings, Symbol, Number, BigInt, NuLL, Undefined.

Now, an object is an instance of a class - **a class is blueprint(template) of an object.**

The 4 principles of #OOP are 
encapsulation, abstraction, polymorphism and inheritance. Major object-
oriented languages are C++,Java JavaScript etc.

more on this.....
My first PR to Telescope's React Native project
Published: 2022-02-07 22:01:11

#Overview
The first thing I have to say is I am very excited right now after submitting PR about adding a basic bottom navigation bar to the current UI. I was assigned to the [issue](https://github.com/Seneca-CDOT/telescope/issues/2731) that will create a basic mobile UI using React Native. I created a private chat in Slack with James and Kevan to discuss what we would add to the UI, and my task was creating a nav-bar based on the original design of Telescope.

#Progress
I created a new branch first then starting to work on it. I went to Google to research how React Native app could navigate between screens. So React Native uses something called React Navigation. After following the documentation, I created a <cpde>Navigation container</code> to store the navigation in <code>App.jsx</code>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzrpexqh7hcget2aikh0.png)
To create a navigation bar, I used <code>@react-navigation/bottom-tabs</code>. So it will allow you to create a bottom nav-bar to navigate between screens. This means I had to create some basic screens to test.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3trqrb1mz6u7mhxzhsjs.png)
Using Navigator can help you to navigate between screen components, <code>tabBarIcon</code> option will allow you to add Image or Icon to the screen component.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/faenwakleys0mg3vreg7.png)
# Issues
- Lots of libraries installed
- Installing Android Studio to get it's virtual machine to test (Android emulator). And an Android Emulator is usually around 10GB
- I am using Windows so for now I cannot test the app on IOS. But React Native is using for cross platform purpose so I guess it should be ok
- I have to re-order some files to match the files structure of Telescope
- My PR has a conflict with James' [PR](https://github.com/Seneca-CDOT/telescope/pull/2825), so after my PR gets approved by everyone, I will have to ask James how I can fix this conflict before merging to master.
184. 部门工资最高的员工
Published: 2022-02-07 21:43:15

# 184. 部门工资最高的员工

SQL架构
表： Employee
```sql
+--------------+---------+
| 列名          | 类型    |
+--------------+---------+
| id           | int     |
| name         | varchar |
| salary       | int     |
| departmentId | int     |
+--------------+---------+
```
id是此表的主键列。
departmentId是Department表中ID的外键。
此表的每一行都表示员工的`ID`、姓名和工资。它还包含他们所在部门的`ID`。
 

表： Department
```sql
+-------------+---------+
| 列名         | 类型    |
+-------------+---------+
| id          | int     |
| name        | varchar |
+-------------+---------+
```
`id`是此表的主键列。
此表的每一行都表示一个部门的ID及其名称。
 

编写SQL查询以查找每个部门中薪资最高的员工。
按 任意顺序 返回结果表。
查询结果格式如下例所示。

```sql
示例 1:

输入：
Employee 表:
+----+-------+--------+--------------+
| id | name  | salary | departmentId |
+----+-------+--------+--------------+
| 1  | Joe   | 70000  | 1            |
| 2  | Jim   | 90000  | 1            |
| 3  | Henry | 80000  | 2            |
| 4  | Sam   | 60000  | 2            |
| 5  | Max   | 90000  | 1            |
+----+-------+--------+--------------+
Department 表:
+----+-------+
| id | name  |
+----+-------+
| 1  | IT    |
| 2  | Sales |
+----+-------+
输出：
+------------+----------+--------+
| Department | Employee | Salary |
+------------+----------+--------+
| IT         | Jim      | 90000  |
| Sales      | Henry    | 80000  |
| IT         | Max      | 90000  |
+------------+----------+--------+
解释：Max 和 Jim 在 IT 部门的工资都是最高的，Henry 在销售部的工资最高。
```
Seleccionar a Tus Amigos en Facebook de Manera Automática
Tags: javascript, bookmarklet, facebook
Published: 2022-02-07 21:37:25

Aloha, developah! 🙂

Aquí te dejo un bookmarklet que he creado para que cuando quieras seleccionar a tus amigos en Facebook para invitarles a que hagan Me gusta en una página, este script lo haga de manera automática y no tengas que ir haciendo clic uno por uno.

Tienes más información en mi blog: [Seleccionar a Tus Amigos en Facebook de Manera Automática](https://monyi.dev/blog/seleccionar-a-tus-amigos-en-facebook/)
Type Conversion in Python
Tags: python, beginners, webdev
Published: 2022-02-07 21:30:40

Data types are usually one of the first lessons we have when learning a new programming language. Data types in Python would include:

- String (str)

- Numeric (int, float)

- Sequence (list, tuple)

Up until now, I've written in JavaScript and if I wanted to concatenate a _string_ that also included a _number_ it would be very simple. 

You can easily write this into a JS file and return a string:

```
let age = 25;
console.log('im yungbeansprout and im ' + age + ' years old');
```
Age is a number and this printed in the console as a complete string. This is because of _implicit type coercion_. JavaScript knows to turn the age into a string type. 

If I wanted to do this exact task in Python, I would get a different response. Here's how to write it in Python:

```
age = 25
print('im yungbeansprout and im ' + age + ' years old')
```

It would return an error like this:

![string-error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o09sk8pyos3rjlopfuk7.png)

This is where _type conversion_ comes in. Type conversion will allow us to turn our current data type (number) into a string so it can join the rest of his friends!

Here is how we would fix this problem:

```
age = 25
print('im yungbeansprout and im ' + str(age) + ' years old')
```
Notice how all I did was wrap age in parentheses and write str before it. In Python, this changes our data type.

You can follow this same pattern when converting other data types and now you shouldn't have to worry about your strings returning any errors. Yay!
MAKING IMAGES RESPONSIVE CSS
Published: 2022-02-07 20:57:49


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7i4ah6qbt8uhn1xrivf.gif)
       To make an image responsive, you need to give a new value to its width property and the height of the image will adjust itself automatically.

NOTE: always use relative units **for the width **property like **[percentage]**, rather than absolute ones like pixels.

example

`img{
      width: 100%;
      height: 300px;
      object-fit: cover;
      object-position: center;
   }`

1. Set the image width to 100%, consider working with a fixed height.
2. We use object-fit property to specify  how an img should be resized to fit its container.
3. Lastly we center the image, object-position property  is used together with object-fit to specify how the img should be positioned with x/y coordinates inside its "own content box".

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

I hope this post has helped you understand and solve your problems with responsive images. If you want to learn more about web development, feel free to check out my [](murage.herokuapp.com).

Thank you for reading!
What is the WEB 3.0, and How is it Developing?
Tags: web3, blockchain, future, crypto
Published: 2022-02-07 20:28:34

In the future, the web will be more decentralized. As a result, the [WEB 3.0](https://en.wikipedia.org/wiki/Web3) will be less centralized and more secure.

The WEB 3.0 is a term that was coined by Tim Berners-Lee, which stands for "web as a platform." It is an internet where you are in control of your data and your privacy, not corporations or governments. The WEB 3.0 will also have an open-source infrastructure that is decentralized and free from any controlling entity.

## WEB 3.0 Technology Vs. Current Technology
Web 3.0 is a term that has been used to describe the next generation of the World Wide Web. It is an evolution of the current web, which was first introduced in 1990. However, it is different in functionality from the [websites](https://speedwallop.com/) we currently operate.

The term "Web 3.0" was coined by Tim Berners-Lee in 2004 to describe an anticipated set of improvements to the Internet, specifically in terms of how users would experience it. The term "Web 2.0" had already been coined for a previous generation of internet applications that were more interactive and user-friendly than their predecessors.

### So what does Web 3.0 offer?
The article on Tech Crunch discusses how the next generation of the Internet, Web 3.0, will be built on top of blockchain technology, artificial intelligence technologies, and virtual/augmented reality technologies. It states that this web will have many new features, including decentralized computing power and complete transparency. This should give people more control over their data, making it an open system for transactions, rather than being available only to big companies.

## The WEB 3.0 and the New Age of Internet
The WEB 3.0 is the next generation of the Internet, which will be decentralized, encrypted, and based on blockchain technology.

The WEB 3.0 is expected to be launched in 2021, and it will bring about a new era of digital transformation for companies that are not prepared for it.

## How WEB 3.0 will Impact Entrepreneurship in 5 Years
In five years, web 3.0 will have a profound impact on entrepreneurship. This is due to the fact that the web 3.0 will be able to handle more transactions per second and process them in a more efficient way.

In five years, entrepreneurs will start using blockchain technology to create new apps and improve old ones in order to make them more efficient and secure. They can also use it for crowdfunding campaigns or token generation events in order to raise money for their project.

### Final Words
So web 3.0 is definitely going to change how we roll on the internet forever, so brace yourself for this roller coaster ride!
Vue Tip / Same component, different route
Tags: javascript, vue, programming
Published: 2022-02-07 20:26:30

Let's get to the point. As developers we look for a high level of reusability in our components, this is why Vue doesn't re-render the parent component when used in two different paths despite not being the same view, but the same component. This is done by Vue to optimize the app. To solve this problem, just add a key to the router-view as the name of the route or the path.

```javascript
  <template>
    <div>
       <! --- Or $route.path --->
      <router-view :key="$route.name" />
    </div>
  </template>

```
I hope it helps

Happy Coding! :v
Testing in CI/CD
Published: 2022-02-07 19:40:49

Hello DevOps Experts, 

I am quiet new to DevOps and I am little confused about testing (automated) in devops... I mean, while setting up a simple pipeline, I wanted to know what are all the test to be executed and also where exactly in pipeline these tests to be executed.

Consider a simple java based web application as an example....

Please give me some insights.... 

Below is a brief summary of pipeline of this project based on my level of understanding of devops... 



A code is in github and when a change is committed to the repo, a new build is triggered and I believe during the build, code will be reviewed, compiled and also a unit test will be executed to thus compiled code(pls do correct me if I am wrong here) and then the code will be packaged and deployed to a test environment. Please guide me. 

Thanks

Chandan
DAY-18 : Training at Ryaz
Tags: beginners, html, css
Published: 2022-02-07 16:04:09

- DATE: 07/02/2022
- DAY: Monday

Today I started at about 9:30 am a bit early than regular time as my aim was to cover up more of components.I was able to create various components of demo website i.e block quote, buttons ,grid ,card ,media objects ,testimonials ,inputs ,input groups. so, while designing these components I get to learn many new things earlier before I started watching this course I use to declare things like if I had to declare border-radius as 30px to more than 2 components so, I was declaring it number of times I needed but while designing these components I got to learn new thing that we can declare it as global and use it as many times as you can. As Today I managed to complete most of the modules so I think I would be able to complete it by tomorrow or a day after.
Image Uploader Challenge
Tags: javascript, webdev, firebase, react
Published: 2022-02-07 19:10:46

- Demo - https://image-uploader-challenge-beta.vercel.app/
- Github- https://github.com/nisabmohd/image-uploader-challenge

##### Made using React and Firebase

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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abscpuebwyyr16ycwk8t.png)
What's the difference between using "let" and "var"?
Tags: javascript, es6, devjournal
Published: 2022-02-07 18:54:24

## Scoping rules
The main difference is scoping rules. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

```
function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // Foo Bar

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // Mooo Bazz
  }

  console.log(moo); // Mooo
  console.log(baz); // ReferenceError
}

run();
```
.Net Analyzer for MongoDB
Tags: dotnet, csharp, mongodb, visualstudio
Published: 2022-02-07 18:42:29

C# and .NET developers know that it can sometimes be frustrating to work idiomatically with MongoDB queries and aggregations: without a way to see if your LINQ query or Builder expression corresponds to the MongoDB Query API _during_ development, we had to wait for runtime errors in order to troubleshoot queries. 

Not anymore.

With the new MongoDB Analyzer for .NET, instead of mentally mapping the idiomatic version of a query in C# to the MongoDB Query API, the MongoDB Analyzer does it for you - and even provides the generated Query API expression right in your IDE. The MongoDB Analyzer surfaces useful hints and helpful warnings on invalid expressions at compile time, bringing greater visibility to the root causes of bugs. When used together with the recently released LINQ3 provider (supported in MongoDB C#/.NET Driver 2.14.0 and higher), you can compose and understand more advanced queries easily, including aggregations. The MongoDB Analyzer can also be used from the CLI to integrate into CI/CD pipelines.

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

In Visual Studio, install the MongoDB.Analyzer NuGet package via package manager:

```
Install-Package MongoDB.Analyzer -Version 1.0.0
```
or

```
dotnet add package MongoDB.Analyzer --version 1.0.0
```
for the .net CLI.


Once installed, it will be added to your project’s Dependencies list, under Analyzers. Once the analyzer has run, you’ll find all of the diagnostic warnings output to the Error List panel. As you inspect your code, you’ll also see that any unsupported expressions will be highlighted.

MongoDB Analyzer surfaces any unsupported expressions and invalid queries at compile time. You’ll find all of these issues listed as warnings in the Visual Studio Error List. This is also quite useful as not all LINQ expressions are supported by the MongoDB C#/.NET driver right now. Similarly, supported expressions will differ slightly depending on which version of LINQ you use. I'm loving tinkering around with it.


Check out the docs and learn how to analyze your code [here] (https://docs.mongodb.com/mongodb-analyzer/current/install/).