teleren/devto huggingface dataset:
Flash USB stick for Windows from Ubuntu 🚀
Published: 2021-10-27 19:26:14

This article will should you how to create a bootable USB stick for installing Windows 10 / 11 from MacOS, [here](https://tb.rg-adguard.net) you can find ISO images for Windows.

## 🧹 Format your USB stick to NTFS

Install gparted to format your USB stick:

```bash
sudo apt-get install -y gparted
```

1. Select your USB device in the top right corner.
1. `Delete` all your partitions so that you have only one (if you cant delete a partition then `unmount` it first by selecting that option through the context menu of that table item).
1. Create the `NTFS` partition.

![GParted GUI with one partition which is ntfs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vcvlhs8b0t60bqhn3bs.png)
 
## 💿 Installing & opening unetbootin

```bash
sudo add-apt-repository -y ppa:gezakovacs/ppa
sudo apt-get update
sudo apt-get install -y unetbootin

sudo mkdir /media/hdd1
sudo mount -t ntfs-3g /dev/sda1 /media/hdd1
sudo unetbootin installtype=USB targetdrive=/dev/sda1
```

## 🚀 Flash it!

Select your Windows ISO image and flash it 🙌

![UNetbootin with ISO & USB stick selected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8b5dibwbpmxbz7zoapb.png)
Back end, Express and an introduction from the careers team.
Tags: javascript, beginners, bootcamp
Published: 2021-10-27 16:32:53

Another late entry to this series, originally I had planned to write these on a Sunday evening, but its not my fault this time promise.

last week on boot camp introduced the core concepts of back end, Express and PostgreSQL, this is now reflected in the Kata's we do every morning and the lectures we have during the day.

Back end although incredibly challenging is also incredibly interesting. I've always had a fascination on how things work under the hood and the topic of back end fits that.

### The basic's

the first thing we learned how to do was to take our knowledge of node http and use that to host a very basic web server, then use Asynchronous code to read information files (replicating a database).

```javascript

const http = require('http');
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(3000, '127.0.0.1', () => {
  console.log(`Server running at http://127.0.0.1:3000/`);
});
});
```

after that we moves onto express which is becoming our module of choice when it comes to hosting our web applications.

```javascript
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
```

I don't think based on the basic setup there's much difference in the lines of code but express makes life a little easier for us so far.

## PostgreSQL

last week we also learned SQL using PostgreSQL, I really enjoyed learning SQL, I think the syntax is incredible easy to understand I think its a really nice way to get information back from a database. I think one of my favourite things with SQL is how the syntax looks like its just a GIANT sentence, I don't think it needs to shout all the time though

```postgresql
'SELECT * FROM sky WHERE syntax = awesome ORDER BY something ASC'

```
### the Careers Team
Last week a new channel appeared for us on slack and with it the introduction to the careers team, it was amazing introduction on how the careers guidance works for the bootcamp and I'm excited to find out and write about more in the future.


## A HUGE thank you

I need to say a huge thank you to all the tutors this week, Its been a difficult week, first my daughter caught COVID from somewhere so I needed to help care for her and in doing so I also caught COVID, the beginning of last week was horrible, I was really ill couldn't concentrate on much, the tutors were nothing but awesome, telling me that it was okay if I rested and understanding that my work wasn't possibly as progressed or on par with normal. although I managed to power through the week I appreciate the tutors reaching out to check on me and make sure I was okay to work.

I'm still recovering from COVID but I'm refusing to give up, the boot camp has been so amazing so far, its also such an amazing opportunity and a chance to progress as a developer I don't want to miss out..
How to create header/footer (using HTML) in each page
Tags: javascript, header, footer
Published: 2021-10-27 19:21:08

A website, platform, blog, or web page’s header and footer are essential components. They usually include links to crucial web pages that target what users will want to see before placing an order or submitting an inquiry. 

You see, JavaScript is a pretty magical language that can give you almost any and every result that you desire. With the perfect combination of HTML and CSS, JavaScript can be your magic wand in the world of web development.

So in this Blog, we shall be talking about how a single header and footer code can be used in multiple pages, how to add header and footer in Html and how to make a JavaScript header.

Step 1:
Open your existing project

Step 2: 
Create a new file called header.js

Step 3:
Copy your header section 
`<header> --- </header>`

Step 4:
Open `header.js` file

Step 5:
Create template
```
const template = document.createElement(‘template’)
```

Step 6:
template.innerHTML
```
template.innerHTML=`
      // Paste your HTML code 
`
```

Step 7:
Append element to html page
```
document.body.appendChild(template.content)
```
Step 8:
Whole code:
```
const template = document.createElement('template');
template.innerHTML = `
      // Paste your HTML code 
`
document.body.appendChild(template.content);
```

Step 9:
Link header.js file in Html page
Write in place of
```<script src=’header.js’> ```


Importance of header and footer :
 
The HTML <header> tag is used to define a program's or section's header, as it carries information about the title and heading of the associated material. The section heading (an h1-h6 element or a hgroup> element) is commonly placed in the <header> element, but it is not essential. 

It can also be used to surround a table of contents, a query form, or other significant logos within a section. The <header> tag is a new tag in HTML5 that acts as a container tag, containing a start tag, content, and an end tag. In a single document, there can be many <header> elements. This tag can't be used inside of a <footer>, <address>, or another  <header> element.



Conclusion:

HTML is the building block of the internet, and it is used to form web pages and web applications. JavaScript builds the structure above it. With the above steps we learnt how to add header and footer in Html and how to make a javascript header. From the ground up, we have added a link to a tutorial that explains how to create header in each page and how to create footer using HTML. This HTML and JavaScript Tutorial and HTML / JavaScript Example will introduce you to everything related to HTML.
Require.js expert
Tags: help, javascript
Published: 2021-10-27 19:12:54

I'm going to assume that there aren't many require.js experts anymore but if you remember how this works, please step forward.

Can you tell me how require.js is supposed to work? I have to unblock the main thread which seema to be due to a require js ... Uhh bundle I'm going with bundle 🤫😅

I a know about web pack, rollup, some less well known bundles and system js, also common.js modules and esmodules if you need to draw comparisons
Web Components
Published: 2021-10-27 19:12:07

During Week 3 of class, our group installed four boilerplates in the repo: Angular, Vue, React, and StencilJS. 

While some boilerplates are easier to find than others, there are use-cases for each and commonalities among them.

**Similar Characteristics**

Each boilerplate contains a package.json file, and are all used to create a web component. Each bring about their own unique benefits, and the choice to use one over another varies from project to project. 

**Ease of Use**

When determining which boilerplate is the easiest to use, it can be said that using Vue would allow the user to create a web component from the command line without the use of another GitHub repo, making it a solid choice in terms of starting up a new project. This accessibility would make Vue the DX I would prefer to use for building an app. 

GitHub Repo: 

{% github IST-402-Group-1/IST402 no-readme %}
Enhancements
Tags: openai, codex, codegen, programming
Published: 2021-10-27 19:11:30

planning to enhance codex app with these features:

1. Register & Login for users and admin
2. Login as a Guest
3. Save the queries and the output
4. admin access to the queries - dashboard
5. usage metrics to start with - queries - daily, weekly
6. asynchronous processing of the code 
7. Access the batched queries and results
Projective Geometry Computer Vision
Tags: machinelearning, computervision, python, datascience
Published: 2021-10-27 19:08:22

Projective Geometry in Computer vision is an important concept. Projective geometry provides the mathematical formalism to describe the geometry of cameras and associated transformations, enable the manipulations of 2D projections of 3D objects. The definition of Projective Geometry in Wikipedia given HERE.

Just like an English Grammar has First, Second and Third Person Perspectives, Computer vision has One Point, Two point and 3 Point Perspective of an image.

One Point Perspective
It has a single vanishing Point. All the edges are connected to this single vanishing Point.

To read more visit https://hecodesit.com/projective-geometry-computer-vision/
stdClass in PHP
Tags: php
Published: 2021-10-27 18:48:27

stdClass is just a generic 'empty' class that's used when casting other types to objects. stdClass is not the base class for objects in PHP. This can be demonstrated fairly easily:

```class Foo{}
$foo = new Foo();
echo ($foo instanceof stdClass)?'Y':'N';
// outputs 'N'```

Example of use:

```$object = new stdClass;
object->status = 'hello'
object->{'3DSecure'} = 'bananas'```
SPO 600 Week 7 Reflection 
Published: 2021-10-27 18:47:05

Hello my friend, welcome to the week 7 of SPO600(Software Portability and Optimization) blog. In this blog we will discuss about the compiler optimization.

##Introduction##
Compiler optimizations are alternations that are made by a compiler to keep the same result as the original code but achieve the best performance. It usually means reducing execution time, reducing code size, and improving execution speed. In other words, compiler optimization is going to make the code as efficient as it could.

##Performance## 
Let's look at an example.
```
void foo(int size) {
	for (int i = 0; i < 5; i++) {
		if (size == 10) {
			std::cout << "Size is 10" << std::endl;
		}
		else {
			std::cout << "Keep going" << std::endl;
		}
	}
}

void betterFoo(int size) {
	if (size == 10) {
		for (int i = 0; i < 5; i++) {
			std::cout << "Size is 10" << std::endl;
		}
	}
	else {
		for (int i = 0; i < 5; i++) {
			std::cout << "Keep going" << std::endl;
		}
	}
}



int main() {
	cout << "Foo" << endl;
	foo(10);
	cout << "better foo" << endl;
	betterFoo(10);
	return 0;
}
```
The result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2f9r6j16t1kfu5c5hbr.png)
In this c++ program, I created 2 functions. The first function foo is going to print 5 times if the “size is 10” or “keep going”  message. The second function betterFoo is doing the same thing. The difference between them is the “size” value is never changed and it is executed 5 times in the loop. In the betterFoo function, the size is only checked once before doing the loop.  

##Reflection##
In this week, we worked on many different compiler optimizations, each of them looks tiny but they are able to improve our program to be faster and time efficient because the algorithm is super important for a program. It controls the sequence of execution between each method and functions, every tiny improvement will make the final solution to be a bit better.
How to Watch YouTube in Picture-in-Picture on Windows 11 with Microsoft Edge
Tags: windows, edge, pip
Published: 2021-10-27 18:33:20

I don't like to do multitask activities, but sometimes I want to watch a tutorial on YouTube and reproduce the same step on my tools.
The best option to do that is using the Picture-in-Picture feature of the modern browsers.

In this article I will show you how to do it with Microsoft Edge, but you can use Chrome or Firefox as well.

Launch your favorite browser and find the video that you want to put on PiP.
Click twice with the right button of the mouse.
You can click everywhere on the video canvas and after the first click, move the mouse pointer a little bit and click again.

The built-in menu of the video player should be appear.
Now you can click on "Picture in Picture" item.

Drag the new window with the small video on your favorite area of your screen and, in addition, you can also resize the player.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37or431nr8vomixogrhe.gif)
How to Code a Dropdown Menu Using HTML and CSS | Hover Over Dropdown Menu HTML CSS
Tags: html, javascript, css, webdev
Published: 2021-10-27 18:19:19

In this post, you'll learn how to code a dropdown menu using HTML and CSS. This is a beginner-level tutorial on coding a hover over the dropdown menu with CSS.

How do I create a drop-down menu in HTML and CSS?
How do I create a drop-down menu in HTML?
How do you create a drop-down menu?
How do I make multiple drop-down menus in HTML?

In this Article, you'll learn how to code a dropdown menu using HTML and CSS. The hover over version of the same is also covered here so that it can be reused for both desktop computers as well as mobile devices.

**Complete Toturial**
{% youtube m18hothdz7Y %}

This level-based tutorial on coding will equip viewers with all skills needed by beginning programmers or even those wanting an introduction into these programs - whether they are looking at learning more via a self-study approach or taking up programming courses at school/university levels respectively.

Related Searches:
How to make a drop-down menu HTML CSS only?
Create an onclick dropdown menu example
drop-down navigation menu HTML
responsive drop down menu with submenu
How to create Dropdown Menu in HTML on mouseover

**Recommended Video:**
Create Responsive Navigation Menu Bar Using HTML CSS | Mobile Menu HTML CSS

 {% youtube rtx27XZadIw %}

If you found this video helpful please share the video and SUBSCRIBE to this youtube channel. Please share your thoughts and queries in the comments below! 

****************************
The best tool for YouTube Ranking, Get a special discount now!
  Link:  https://bit.ly/2XrNfWS

****************************
- Please have a look at my website for more details!
     https://www.hmablogs.com/
- Place an order for any Web Development work!
         https://www.fiverr.com/haaddison1?up_rollout=true
Talleres Gratuitos— Oct.
Published: 2021-10-27 18:18:19

Te compartimos las talleres gratuitos en diferentes empresas👨‍💻👩‍💻.
✅[Ciberseguridad - IBM]
(https://skillsbuild.org/students/course-catalog/cybersecurity?lang=es&ref=opt)
✅[Blockchain - IBM]
(https://skillsbuild.org/students/course-catalog/blockchain?lang=es&ref=opt)
✅[Desing Thinking - IBM]
(https://skillsbuild.org/students/course-catalog/design-thinking?lang=es&ref=opt)
✅[Introducción a Máquinas virtuales - Azure](https://www.tutellus.com/tecnologia/software/introduccion-a-maquinas-virtuales-en-microsoft-azure-10805)

Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.
Integrating React Native App with Jest
Tags: reactnative, javascript, codenewbie, testing
Published: 2021-10-27 18:16:57

Jest is a Javascript Testing Framework and it works with projects in Typescript, React, React Native, Vue, and more.
In this article, I'll cover how to install and configure `jest` in react native project.
##Installation
For react-native projects created with `init` commands, it installs `jest` by default. But if your project doesn't have jest installed, then you can do it with this npm command.
```javascript
npm install - save-dev jest
```
also, check the `react-native` preset in added in your `package.json` file
```javascript
{
 "scripts": {
 "test": "jest"
 },
 "jest": {
 "preset": "react-native"
 }
}
```
##Configuration
I used `transformIgnorePatterns` right below the preset of jest in the package.json file.
*transformIgnorePatterns option can be used to specify which files shall be transformed by Babel. Many react-native npm modules unfortunately don't pre-compile their source code before publishing.*
I have `react-navigation`  package installed in my app so I added this regex value in transformIgnorePatterns.
```javascript
"transformIgnorePatterns": [
 "node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation/(.*))"
]
```
If you have npm dependencies that have to be transformed you can customize this configuration option by including modules other than react-native by grouping them and separating them with the | operator.
##Sample function and its test
Here I created a sample function the same as they defined it in the official docs of Jest. 
I added the `sum.js` file and. wrote a function to simply add 2 variables and return the result.
```javascript
function sum(a, b) {
 return a + b;
}
module.exports = sum;
```
and wrote the sample test function `sum.test.js` like this
```javascript
const sum = require('../src/components/atoms/sum');
jest.useFakeTimers();
test('adds 1 + 2 to equal 3', () => {
 expect(sum(1, 2)).toBe(3);
});
```
##Run test
Now to run the test, I wrote the `npm run test` command in the root folder of my project and get a result like this
![run test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0udbgl8ilxu1059cc57.jpg)

In the end, I just want to mention that `renderer.create` in the `App-test.js` file should always have your `<App/>` component as an argument. And this `<App/>` component must be the one which is enclosed in the `<NavigationContainer>` tag.
That's all, Thanks for reading, and happy coding!
PI and casino
Published: 2021-10-27 18:15:50

Pi Network is a digital cryptocurrency that is currently being mined today.

You can start mining Pi Network for free today using the mobile app. However you will need to be invited using a Pi Network Invitation Code.

Pi Network digital currency is due to hit cryptocurrency trading platforms within 2022. At this point you can trade Pi Network for real money into a fiat wallet.

Start mining Pi Network for FREE today and reap the rewards in the years to come!!

Pi Network Invitation Code:> Join Pi Network here
Also further articles on non uk casinos> https://gamstopbookmakers.com/casinos-not-on-gamstop/
Smart Notes BuildLog[2.5] - The notes
Tags: discuss, productivity, product, tutorial
Published: 2021-10-27 18:07:56

❗ **Note**: Regarding more information about the poll, scroll to the last section of this blog, and to know more about what our product, Smart Notes is, you can visit [here](https://dev.to/gauravgupta/series/14976).

Hey👋 I'm Gaurav Gupta. In this short blog post, I'd like to know your opinions regarding the type of notes you'd want and would be beneficial to the majority. So, let's jump right in.

## What notes should our application consist of?

For our desktop application - Smart Notes, we would like to know your opinion regarding which level of notes we should start. Some of the few options we came up with are:

1. **Pre-University College (11th and 12th class) Subjects**: These would consist of notes of Physics, Chemistry, and other theoretical subjects in PUC classes.
2. **Engineering Theory Subjects**: These notes will consist of Engineering Physics, Engineering Chemistry, or higher level subjects like Finite Automata and Finite Language, or Discrete Mathematics.
3. **Coding Related Subjects**: These notes would cover topics like Basics of C programming, or Python, Java, and others or covering Data Structure and Algorithms.
4. **Non - Engineering Subjects**: These would consist of non-engineering field notes like Commerce, or Biology, and others. If you'd like notes of any other subjects do tell us, and we'll try to gather the best possible notes of them after reviewing them from professionals of the respective fields.

Do comment on any subject or topic you'd like us to cover the notes for, be it engineering, PUC, or non-engineering streams.

PS: It would be appreciated if you can go to this same blog post on HashNode and answer the poll for this same question (poll available [here](https://hashnode.com/post/what-level-of-notes-would-you-like-to-have-for-easier-studies-smart-notes-buildlog3-ckv9txpuj0b6c45s11azm06yo)).
<hr/>

Let's connect:  [HashNode](https://hashnode.com/@Rakurai) and  [LinkedIn](https://www.linkedin.com/in/gaurav-g-701075149/).
Reusable Parallax Effect With CSS Variables
Tags: javascript, css, programming, webdev
Published: 2021-10-27 18:07:42

CSS variables offers us a very neat way to share information between CSS and JavaScript. The perk of connecting these two with CSS variables is that we can access them and modify them in CSS and in JS at any time.

I am using the parallax effect as an example, but there are so many things this could be used for. The parallax effect in a nutshell is where the background of a website scrolls at a slower pace than the whatever is on foreground. Let's build a one, but one that can be easily extended. 

We will use this cards for our example.

![cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqrxx88gta16lk9tcang.png)

Let's first take care of the CSS part.
```
.card {
    --translate-y: 0px;
    --translate-x: 0px;
    transform: translate(var(--translate-x), var(--translate-y));

}
```

So, we created two CSS variables for horizontal and vertical movement and we set them to our desired element. Let's move on to JavaScript.


### Creating the function

For our function we will need some parameters: **the element**, **the direction** to be translated, either horizontal or vertical, **the speed**, and if the value to be translated is a **negative number**. 

```
parallax = (element, direction, speed, negative) => {}
```

The amount to be translated depends on how much the page has been scrolled. We can access this amount in the **window's pageYOffset**, but to make it look smoother and slower we need to reduce this amount a bit and here is where our speed comes into play. It is also a good place to use our **negative** parameter and decide whether it is a negative number or not.

```
let translate = window.pageYOffset * speed * (negative ? -1 : 1);
```

Then we only need to update our CSS variable to our desired direction and our computed amount.

```
element.style.setProperty(`--translate-${direction}`, `${translate}px`);
```
But what if we also want to use this function on more than one element at the same time?

```
parallax = (element, direction , speed , negative) => {
	let translate = window.pageYOffset * speed * (negative ? -1 : 1);

	if (element.length > 1) {
		element.forEach((el) => {
			el.style.setProperty(`--translate-${direction}`, `${translate}px`);
		});
	} else {
		element.style.setProperty(`--translate-${direction}`, `${translate}px`);
	}
};
```

Lastly we only need to listen when the page gets scrolled and call our function.

```
const firstCard = document.querySelector('.cards-parallax .card');
const lastCard = document.querySelector('.cards-parallax .card:last-of-type');
const cards = document.querySelectorAll('.cards-parallax .card');
window.addEventListener('scroll', () => {
	parallax(firstCard,'y', 0.4, true);
    parallax(lastCard,'x', 0.5, false);
    parallax(cards,'x', 0.2, false);
    
});
```

The cool thing is that you could follow the same technique for many other properties like scale, rotate, opacity even colors and may more.

Here is a [Demo](https://codepen.io/sarmunbustillo/pen/bGrRbRZ)