teleren/devto huggingface dataset:
Javascript flaws you should know
Tags: javascript, webdev, programming, websecurity
Published: 2021-11-23 13:44:33

#### Introduction
We all know and everybody does agree that javascript is awesome. It is a language that by any metrics is growing faster than anything else. There is a lot of reasons for this. There is a lot of goodness in this. This are some core javascript traits.
•	Built-in memory management
•	Native serialization (JSON)
•	Naturally scalable (via Eventloop)
•	Frequent template /encoding use
•	Flourishing npm package ecosystem

#### Javascript capabilities
These are amazing capabilities. They are core allowing the building of amazing things. But sometimes the same capabilities that make it awesome also make it vulnerable. So you look at this various different capabilities and what you can see as Built- in memory management one can look at the flaws and see buffer objects and leaking memory from servers.  If you talk about native serialization  hackers can look at it and do some type manipulation because types a decided in runtime and those kind of changes can be manipulated. A lot of our talk today is going to center on how javascript capabilities can be manipulated and abused.

•	Built-in memory management : Buffer vulnerabilities
•	Native serialization (JSON) : Type manipulation
•	Naturally scalable (via Eventloop): Regex Dos
•	Frequent template /encoding use: Sandbox Escaping
•	Flourishing npm package ecosystem: Vulnerable packages

Another thing to remember is that this vulnurebalities  don’t just happen in your code. Part of the core part of the javascript ecosystems are libraries . Npm, node, jquery. Much of the codes are open source codes. A typical application has thousands of dependencies which leads to a situation where your app is very large but your code is so small. It is slightly frightening from a security perspective. Most of your apps code come from npm which makes most of your apps vulnerabilities to come from npm.  This is not a theoretical problem, it is practically what happens when we use npm packages.

#### Risk front-end Apps
Packages use packages that use other packages and within that ecosystem is vulnerabilities. Pretty every node shop has these and this risk node apps and front-end app has vulnerabilities in front-end apps like angular, react and node apps with all the packages we pull in from npm. Also there is the internet of things, we hear about Ddos and other massive attacks that take down the internet. Many of these devices run node apps and light weight apps and these can have vulnerabilities. We are going to look at 
•	Explain and exploit real world javascript vulnerabilities using npm
•	Discuss remediation and solutions for vulnerable code and packages
We will discuss this in our next write up
Got my #hacktoberfest21 badge 🥳🎉
Tags: hacktoberfest, opensource, github, digitalocean
Published: 2021-11-24 07:28:27

## Hello dev's !
### Presenting to you my #hacktoberfest21 Badge 🥳

Through contributing to #opensource for more than 2 awesome years I've developed my perspective about OSS 😊.
It was a great experience contributing to #opensource 🤩. 
Looking forward to contribute more to #opensource.

> Knowledge must be free, so do great innovations and literature.
>
> <cite>-- Anonymous</cite>

<br>
❤️ From **_Pranav Yadav_**
* LinkedIn [**yadavpranav**](https://linkedin.com/in/yadavpranav)
* GitHub [**pranav-yadav**](https://https://github.com/pranav-yadav)
* Twitter [**pranavyadav_**](https://twitter.com/pranavyadav_)
Day 70/100 Drawing on Canvas
Tags: 100daysofcode, motivation, challenge, programming
Published: 2021-11-24 10:53:57

"Drawing is deception."

– M.C. Escher, cited by Bruno Ernst in The Magic Mirror of M.C. Escher

![canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mdp361htb67ifhwnbit.png)
Sr. Full Stack Software Engineer - Pittsburgh/Seattle
Published: 2021-11-24 17:55:44

Help humans interface with the future of autonomous flight vehicles!

Senior full-stack developer located in Pittsburgh, PA or Seattle, WA. Hybrid work from home or in-office. 

More info and apply here: https://nearearthautonomy.applytojob.com/apply/3pH7gKRbVJ/Sr-Software-Engineer-Full-Stack

Or contact me directly at Megan.zimmerman@neartearth.com
visualizing strange attractors with react-three-fiber
Tags: showdev, react, threejs, motivation
Published: 2021-11-24 19:01:31

After a long procrastination period and binge watching a lot of 3d computer graphics videos.
Thereby presenting you my implementation of 3d attractors, as a reminder that start and ship your side project :D
enjoy & cheers

https://spreadbow.com/strangeAttractors

src: https://github.com/andrasnyarai/expersonal
Clip-Path Animation 💖
Tags: html, css, tutorial
Published: 2021-12-07 08:33:06


![clip patch animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9nwqqhpap8t84bntcz9.gif)Hey **fellow creators**,

Let’s create an easy but awesome *clip-path animation* in less than a minute!
 
If you prefer to watch the video **version**, it's right here :

{%youtube jfIGA_YQlD8%}

##1. The HTML structure.

Create two boxes with one image inside each one.

```html
<div class="box b1">
   <img src="img1.jpg">
</div>

<div class="box b2">
   <img src="img2.jpg">
</div>
```

##2. Style the page.

First resize each box to take up the full height of the viewport:
```css
.box{
    height: 100vh;
}
```

Then add a different background colour to each box to differentiate them easily:

```css
.b1{
	background-color: #e27d60;
}

.b2{
	background-color: #85cdca;
}
```

Now, size the images however you want, center them and fix them to the middle of the screen, following the scroll:

```css
img{
	object-fit: cover;
	height: 600px;	
	width: 400px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: fixed;
}
```

For now, the images are one above the other. To fix that, you need to clip the boxes so that only the correct image shows:

```css
.box{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);	
}
```

The values inside of the parentheses correspond to the X and Y coordinates of the clipped area.
It will create a new stacking context for each box and only show what is inside that stacking context.

You’ll now have a *lovely animation* to showcase your images!

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon!*

Enzo.
Things I noticed after using Vim for the first time in one week
Tags: beginners, linux, vim, productivity
Published: 2021-11-24 22:36:08

**Disclaimer:** This is my first time using Vim (actually Neovim 😎), so by no means am I an expert.
Come on it took me a couple of hours before I could configure a language server protocol! 😢
I look forward to your comments and advice on how to work better with and learn Vim. 

This [article](https://www.chrisatmachine.com/Neovim/27-native-lsp/) was really helpful while configuring Neovim on my machine.

[Vim](https://www.vim.org/) is basically a text editor for Unix. It's similar to other programs like Notepad, Visual Studio Code, Sublime Text Editor or Atom.

### **So what led me to Vim**

I love new challenges and improving my productivity. VS code was pretty customized and suitable for my current needs. Maybe YouTube videos from this guy ([DistroTube](https://www.youtube.com/c/DistroTube)) was the motivation to try it out. 

### Let's get right to my few observations

- Efficiency: Vim is designed to reduce how often switch from your keyboard to a mouse. They are literally keybinding for any type of operation and you can create custom keybindings too. If you type really fast, this will improve your productivity as you will really need your mouse.
- Learning Curve: Vim has quite a learning curve if you're just starting. For the first few days, my focus was shifted majorly from the code I write to the tool I use. This is going to pay off later by building up muscle memory you will be able to exit Vim in your sleep.

A quick meme about exiting vim:
    
![exit_vim.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637792135515/CJKqQ6Xww.png)
    
### **Conclusion**

I will continue sharing my learning experience and journey with Vim for the next few months

Whatever editor, language or framework you use, they should be able to solve your problems effectively and efficiently. 
If you want to get started with Vim, I recommend starting with [Neovim](https://neovim.io/) and it's simpler and maintained. 
Do you think it is worth the time to learn Vim?
Is the 64-Bit Version of Ubuntu Only Compatible With Amd Cpus in Ubuntu?
Tags: ubuntu
Published: 2021-12-01 08:41:50

---
title: Is the 64-Bit Version of Ubuntu Only Compatible With Amd Cpus in Ubuntu?
published: true
date: 2021-11-25 09:43:54 UTC
tags: Ubuntu
canonical_url: https://stackallflow.com/ubuntu/is-the-64-bit-version-of-ubuntu-only-compatible-with-amd-cpus-in-ubuntu/
---

<header>
<p><span style="font-size: 1.2em; color: initial;">64-bit</span><span style="font-size: 1.2em; color: initial;">Architecture</span><span style="font-size: 1.2em; color: initial;">system-installation</span></p>
</header>

I was told that computers with more than 2 gig’s memory need a 64 bit operating system to utilize all RAM.

Is the 64bit Ubuntu download really JUST for AMD processors? I am asking because the disk image I downloaded says AMD64.

So will my new Intel 2.3Ghz Core i3 Dual Core processor work with 64 bit Ubuntu?

It runs the 64bit version of Windows without any qualm.

#### Accepted Answer

There is a slight misunderstanding here. AMD64 refers to the architecture of the processor. As AMD’s [X86-64 extension](http://en.wikipedia.org/wiki/X86-64) prevailed in the “64-Bit format war”, it is named after them; just like people used to call all PCs IBM-PC-compatible.

The gist of the matter is: You can install AMD64 software on both AMD and Intel processors, as long as they support that type of architecture (Don’t worry, almost all processors released in the last 5 years do). So just go ahead and install Ubuntu using the 64 bit iso.

Finally, if your CPU has PAE enabled, you can access more than the limited “4G” of RAM using 32-bit processors.

See also:

- [What are the differences between 32-bit and 64-bit, and which should I choose?](https://askubuntu.com/questions/7034/what-is-the-difference-between-32-bit-and-64-bit-and-which-should-i-choose)
- [Difference between the i386 download and the amd64?](https://askubuntu.com/questions/54296/difference-between-the-i386-download-and-the-amd64)

The post [Is the 64-Bit Version of Ubuntu Only Compatible With Amd Cpus in Ubuntu?](https://stackallflow.com/ubuntu/is-the-64-bit-version-of-ubuntu-only-compatible-with-amd-cpus-in-ubuntu/) appeared first on [Stack All Flow](https://stackallflow.com).
React Router v6 - What's new?
Tags: react, javascript, webdev, reactrouter
Published: 2021-11-29 17:00:48

Hi guys,

So recently, React Router V6 was released and it has many new and interesting features. Lets look into some of these new upgrades.
>**[Complete Article](https://discover.hubpages.com/technology/React-Router-V6-The-Main-Changes)**

-----------------------------------------------------------------

##Goodbye Switch!

Previously, in React Router V6, we used the `<Switch>` component to wrap all of our Routes, now the the Switch component has been replaced by `<Routes>`. It is essentially the same thing as switch, however some new features have been added to the `<Route>` component it self.

##Changes to the Route Component
There have been a couple of useful upgrades to the `<Route>` component. 
####1 - No need of exact.
In V5, you needed to put the `exact` prop on the component so that it goes to the particular route. However in V6, there is no need of this prop as React Router now always looks for the exact path without being told.
####2 - Introducing the element prop
Previously, we used to pass the component in the Route as a child, or in other words, the component would be placed within the Route. In V6, this is no longer needed as you can simply pass the `element` prop in the route and place the component inside it. The pros of this are that you can simply inject whichever component one needs depending on its route rather than placing it in each route component.

###V5 vs V6 code example:
The above mentioned upgrades are demonstrated in the comparison below.
####React Router **V5** code:
```javascript
export default function App() {
  return (
    <div>
      <Switch>
        <Route path="/page1">
          <Page1/>
        </Route>
        <Route exact path="/page2">
          <Page2/>
        </Route>
      </Switch>
    </div>
  )
}
```
####React Router **V6** code:
```javascript
export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/page1" element={<Page1/>} />
        <Route path="/page2" element={<Page2/>} />
      </Routes>
    </div>
  )
}
```

As you can see, 3 changes can be noticed in the above code comparison, Use of `Routes` instead of `Switch`, removal of exact and use of the element prop.

These are some of the routing related upgrades. There are many more new features and changes that are covered in depth in my [hupbages article](https://discover.hubpages.com/technology/React-Router-V6-The-Main-Changes).

>**[Complete Article](https://discover.hubpages.com/technology/React-Router-V6-The-Main-Changes)**

-----------------------------------------------------------------

Thank you for reading!. I hope you found out some new information regarding the changes in react router v6.
If you liked the post, you can buy me a coffee!
<a href="https://www.buymeacoffee.com/salehmubashar" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Also, check out my [hubpages articles](https://owlcation.com/stem/useRef).
Cheers:)
Import Class in Relative File into Tailwind CSS and Rails
Tags: rails, tailwindcss, webdev, css
Published: 2021-12-04 08:37:30

To import a relative CSS file into Tailwind, the [postcss-import](https://tailwindcss.com/docs/installation#include-tailwind-in-your-css) is required.

1. [Install postcss-import](#1-install-postcssimport)
2. [Add postcss-config file](#2-add-postcssconfigfile)
3. [Add postcss to build script](#3-add-postcss-to-buildcss-script)
4. [Create a button class](#4-create-a-button-class)
5. [Swap tailwind directive for import](#5-swap-tailwind-directive-for-import)
6. [Extract button class into seperate file](#6-extract-button-class-into-seperate-file)

---

## 1. Install postcss-import
```bash
yarn add postcss-import
```
---

## 2. Add postcss.config.file
```js
postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}
```

---

## 3. Add postcss to build:css script

In __package.json__ add `--postcss`

_old_
```json
{
  "scripts": {
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}
```
_new_
```json
{
  "scripts": {
    "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}
```

---

## 4. Create a button class

Add a button component in __application.tailwind.css__
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply text-white bg-blue-500 rounded-lg hover:bg-blue-700;
  }
}
```

Let's see it we get a blue button
```erb
 <button type="button" class="btn-blue">Save</button>
```

---

## 5. Swap tailwind directive for import

```css
/* old */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* new */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

---

## 6. Extract button class into seperate file
in __application.tailwind.css__
```css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components/buttons.css";
@import "tailwindcss/utilities";
```

in __./components/buttons.css__
```css
@layer components {
  .btn-blue {
    @apply text-white bg-blue-500 rounded-lg hover:bg-blue-700;
  }
}
```

A few notes from the Tailwind docs:
- Don't mix custom css and imports in the same file
- Wrap custom css in @layer components to avoid specificity issues
navigation.navigate("somescreen") show errors with typescript and react-native
Tags: react, reactnative, typescript, ignite
Published: 2021-11-26 10:20:35

Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: never; merge?: boolean; } | { name: never; key?: string; params: never; merge?: boolean; }'.ts(2345)

that happens always when we cant to navigate to anther screen with typescript in react-native an help ?
example of code :
<Button text="go to page 1" onPress={()=>navigation.navigate("page_2")} />

#solution :
Day 71-72/100 HTTP and Forms
Tags: 100daysofcode, programming, challenge, motivation
Published: 2021-11-26 10:29:30

"Communication must be stateless in nature [...] such that each request from client to server must contain all of the information necessary to understand the request, and cannot take advantage of any stored context on the server."

– Roy Fielding, Architectural Styles and the Design of Network-based Software Architectures

![script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9ptkwu4bc64l5o6vium.png)
Bulk merge & Approve Github Pull Requests with the Gomerge github action!
Tags: actionshackathon21, github, go, programming
Published: 2021-11-26 13:56:11

### My Workflow
Are you an open source maintainer? Do you get dozens of contributions from your community every week? Are you someone who would like to automate everything?

Late last year, I created the [Gomerge CLI tool](https://github.com/Cian911/gomerge). Gomerge is a tool which allows you to quickly bulk merge and approve several pull requests from your terminal.

![Gomerge Maschot Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hveymntj234wj35gd4e6.png)

With the github actions hackathon on the horizon, I thought I would take the opportunity and containerize Gomerge into it's own custom Github Action, with some new features to boot!

The [gomerge github action](https://github.com/Cian911/gomerge-action) is now available on the [github marketplace](https://github.com/marketplace/actions/gomerge-action). You can also view the action directly on the github repository.

![Gomerge Action in Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5xxl76d6t5yqcgomcvi.png)

### Submission Category: 

Maintainer Must-Haves

### Yaml File or Link to Code

{% github https://github.com/Cian911/gomerge-action %}

Github action which utilizes the Gomerge CLI tool, also created by myself, to bulk merge and approve github pull requests.

Behind the scenes, Gomerge will determine the mergeability of a pull request by checking the following attributes:

- CI Status (success, pending, failure)
- Mergeable State (clean, blocked, dirty)
- Pull Request State (open, draft, closed)

If any of these metrics are not in a valid state, the pull request will not be approved/merged.

Below I've outlined an example which will run the action at midnight every night and approve only valid pull requests.

```yaml
on:
  schedule:
    - cron: '0 0 * * *'

jobs:
  approve-prs:
    runs-on: ubuntu-latest
    name: Approve valid PRs 
    steps:
      - name: Approve valid workflows
        uses: Cian911/gomerge-action@master
        with:
          repository: ${{ github.repository }}
          github_token: ${{ secrets.GITHUB_TOKEN }}
          labels: ""
          approve: "true"
```

### Additional Resources / Info

For more information and examples, please visit the [gomerge-action github page](https://github.com/Cian911/gomerge-action) for a full list. You can also visit my test repo, [gomerge-test](https://github.com/Cian911/gomerge-test) which contains a working example of the action.

Thank you for reading!
Keep your research reproducible with conda-pack and GitHub Actions
Tags: actionshackathon21, research, science
Published: 2021-11-27 01:44:01

Reproducibility is a major principle underpinning the scientific method, and scientific software is not an exception.

Anaconda is a distribution of the Python and R programming languages for scientific computing with more than 25 million users. But, how reproducible is science made with Anaconda? And most important:

**Do you think you will be capable of reproducing the results your research in the next 10 years?**.

Currently, the reproducibility of Anaconda environments [is not guaranteed](https://github.com/conda-forge/conda-forge.github.io/issues/787). `conda list --explicit` provides just some kind of short term reproducibility.

For example, if you use packages from non-standard channels, the owner could delete them at any moment. Also, the resolved URLs could vary due to changes in package labels or storage.

There is an [ongoing debate](https://github.com/conda/conda/issues/7248) about how to unify the different available tools to solve this problem. In this workflow, I propose a simple but effective way to keep your environments reproducible using GitHub Actions and [`conda-pack`](https://conda.github.io/conda-pack/): 

> _`conda-pack` is a command line tool for creating archives of conda environments that can be installed on other systems and locations. This is useful for deploying code in a consistent environment —potentially where Python and/or conda isn’t already installed._

Every time you publish a new release of your code (e.g. a paper) on GitHub, the environment is solved, packed and uploaded as an asset.

```yaml
name: pack

on:
  release:
    types: [published]

env:
  BASENAME: ${{ github.event.repository.name }}-${{ github.event.release.tag_name }} 

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Mambaforge
        uses: conda-incubator/setup-miniconda@v2
        with:
            miniforge-variant: Mambaforge
            miniforge-version: latest
            environment-file: environment.yml
            activate-environment: my-env
            use-mamba: true

      - name: Freeze packages
        shell: bash -l {0}
        run: conda env export -n my-env > $BASENAME.yml

      - name: Install conda-pack
        shell: bash -l {0}
        run: mamba install -c conda-forge conda-pack

      - name: Pack environment
        shell: bash -l {0}
        run: conda pack -n my-env -o $BASENAME.tar.gz

      - name: Upload assets
        uses: AButler/upload-release-assets@v2.0
        with:
          files: '${{ env.BASENAME }}.{yml,tar.gz}'
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          release-tag: ${{ github.event.release.tag_name }}
```

Finally, [follow the instructions](https://conda.github.io/conda-pack/#commandline-usage) to deploy an identical environment at any point in the future.

## Get the code

{% github epassaro/repro-conda-envs %}