teleren/devto huggingface dataset:
Day 0: Deep Breath and START!
Published: 2022-09-05 15:10:29

Hello All,

I am Chai, here to learn programming and am excited to create apps and automations as I learn new things. 

**My Why?**

Why do I want to learn programming? For many reasons, and maybe they are connected, maybe not. I will discover as I go through these goals and learn and develop.

1. Independence: I want to learn so that I can have a bigger freedom in choosing my work times, my career and where I want to work, my holidays, etc. And let's not gloss over the fact that tech is big money and this is one perk I definitely look forward to (once I am a seasoned coder, that is). So financially, career-wise, etc I want to be independent.

2. I am lazy: I feel like I have soo soo many ideas on how to make tasks easier or automated, if **<u>ONLY</u>** I knew how to code. And so, here I have come, to not have to use this excuse anymore. I want to empower myself to do what I want, without feeling helpless or useless.

3. Challenging: I am ready to challenge myself and see where I can go. I have always loved learning and I think I can use this opportunity not only to learn, but how to learn and rewire the way my brain thinks.

And with that, here i am today. It is Day 0. 

So what is my **aim** for today? To get myself set up, signed up and create accounts in Github, StackOverflow, etc. I have done all of this, and somehow I feel so so overwhelmed.  (if you are self-taught, how did you manage all this and not run away?)

And maybe, I might also start with a few videos already so that I can get a head start into this.

If you are like me, and starting on this journey, then come say hi. I would love to follow you on your journey as well.
Cara sederhana dalam melakukan Steganografi
Tags: linux, beginners, security
Published: 2022-09-05 15:05:25

## Pengenalan
Steganografi merupakan aktifitas/proses untuk menyembunyikan pesan di dalam suatu objek. Steganografi ini memiliki banyak jenisnya, tetapi pada postingan kali ini saya akan menjelaskan bagaimana caranya menyembunyikan sebuah file di dalam gambar dengan menggunakan perintah konkatenasi pada terminal.

## Persiapan
Dalam studi kasus ini, saya menggunakan [Fedora Workstation ](https://getfedora.org/id/workstation/), 1 gambar, dan 1 folder yang berisi _dummy text_.

![Folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3d3v1z1tlj52a3l19m4c.png)
Di dalam sebuah folder yang bernama steganography (sebagai tempat latihan), saya mengisikan folder tersebut dengan sebuah gambar sebagai tempat penyimpanan file rahasia dan sebuah folder bernama "rahasia" yang berisi _dummy text_.
![dummy text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1oyrlp8mw2e5wootp6ke.png)
Di dalam sebuah folder "rahasia" terdapat sebuah _dummy text_ dengan judul file "example.txt"; ekstensinya boleh memakai ekstensi apapun. 
Kompres file rahasia menjadi arsip (boleh zip atau tar, bebas).

## Pelaksanaan
![Open Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zdr1pkhg3xn5hqcvh53.png)
Buka terminal, jalankan perintah dengan format sebagai berikut:

```
cat fotoYangAkanDiMasukkanFileRahasia arsipFileRahasia > namaFileSesudahDiEksekusi.jpg
```
Jika disesuaikan dengan studi kasus saya menjadi seperti ini

```
cat nerd.jpg rahasia.zip > blabla.jpg
```
Kalau berhasil, nanti akan muncul foto yang merupakan hasil steganografi.

## Hasil
![Stegano](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prhue316m1p4u3udp5bn.png)
Ini adalah gambar hasil dari steganografi yang barusan dilakukan; terlihat tidak ada bedanya. Namun, ketika diekstrak maka akan menghasilkan file rahasia tadi.
Jalankan perintah ini untuk mengekstrak gambar tersebut

```
unzip blabla.jpg
```
Maka akan muncul file rahasia dari gambar hasil steganografi tersebut.

## Kesimpulan

- Cat merupakan akronim dari concatenate (secara harafiah yang berarti menyatukan atau menggabungkan). Perintah ini berfungsi untuk menyatukan beberapa file.
- Ekstensi file text apapun tidak mempengaruhi hasil steganografi.

Terima kasih sudah membaca
Ferramentas não-devs pra fazer sua carreira decolar
Tags: beginners, tips, hacking
Published: 2022-09-05 14:39:39

Na última segunda (29) foi meu anivrsário e foi inevitável pensar, para além das questões existenciais, o que eu faria igual ou o que faria diferente na carreira.

Decidi deixar pra quem tá chegando em tecnologia uma lista sobre o que você não vai aprender na faculdade.

1- Autoconhecimento
Talvez a mais importante delas e que vai comandar as próximas. Conhecendo bem o que vc gosta, o que não gosta, o que não aceita, até onde vale aceitar determinadas propostas.

2 - Fale inglês
Este conhecimento te coloca na frente de muita gente numa disputa por emprego. Se, por aqui, as empresas estão querendo alguém que construa um foguete, lá fora eles querem alguém que dê conta do problema e saiba explicar o que fez.

3- Comunicação
Saí da faculdade achando que só programar era necessário. Na vida real, o que descobri foi que as vezes, 5min de troca de informações assertivas, evitam linhas de código desnecessárias.

4- Colaboração
Para além de ser incrível no que você faz, ajudar alguém do time que esteja com dificuldade de evoluir em uma tarefa faz com que todo o time ganhe.

5- Sem julgamentos
Cada pessoa percorreu um caminho até chegar onde está. Achar que a pessoa tem mais do que merece ou mesmo que é só a pessoa se dedicar mais que consegue evoluir é nivelar todo mundo pela mesma régua, quando a realidade de cada um é completamente diferente.

6- Não se compare
Aproveitando o tópico acima, sabemos que tecnologia tem muitas oportunidades incríveis e vemos diariamente muita gente ascender socialmente por causa disso. Entender que você trilhou um caminho diferente, olhar com empatia suas falhas e se orgulhar da sua jornada te dá a tranquilidade de que precisa pra seguir sem pressão sua carreira!

7- Sucesso é subjetivo
Eu já quis ser tech lead, gerente, mudar de área, aprender algo novo... E vi também pessoas que se sentem bem e consideram ter chegado ao máximo exatamente onde estão. E essas pessoas não estão presidindo big techs pelo mundo, mas estão fazendo um trabalho bom, pagando suas contas e dando conforto a suas famílias. E pra elas isso é ter sucesso!

8- Diversidade não é modinha
Posso te comprovar com estudos e estatísticas que produtos de software diversos têm desempenho superior e fazem vendas mais assertivas. É muito mais uma questão de negócios ter empresas e produtos diversos.

9- A empresa não está sendo boazinha
Empresas dependem de vendas e o mercado gira com engrenagens diferentes de tempos em tempos. Existem projetos de formação e de diversidade e inclusão incríveis por aí, mas não se engane! Tudo isso dá base pra que a empresa aumente seus ganhos se estabelecendo como um dos nomes preocupados com questões importantes aos seus clientes e investidores (de onde vem o _money_).

10- Faça o necessário até começar a fazer o que ama
Pra muitas pessoas a migração de carreira pode ser mais difícil. Enquanto isso, as contas estão chegando. Vc precisa avaliar o quanto vale a pena recusar algo que mantenha suas contas pagas até que sua oportunidade em tecnologia chegue.
Javascript: Functional Composition
Tags: javascript, programming, tutorial, functional
Published: 2022-09-05 14:26:49

It is an approach where result of one function passed on to next function.

```javascript
const add = (x, y) => x+y;

const subtract = (x) => x-4;

const multiply = (x) => x * 8;

// result of `add` is passed to `subtract` and its result passed to `multiply`.
const result = multiply(subtract(add(2, 3)));

result;
> 8
```
That looks readable but what if we have more functions to call one after other.
Let's try little cleaner approach.

```javascript
const compose = (...functions) => x => functions.reduceRight((total, f) => f(total), x);

const add = x => x+2;

const subtract = x => x-1;

const multiply = x => x * 8;

compose(multiply, subtract, add)(2);
> 24
```

We can also use reduce to implement:

```javascript
const pipe = (...functions) => x => functions.reduce((total, f) => f(total), x);

const add = x => x+2;

const subtract = x => x-1;

const multiply = x => x * 8;

pipe(add, subtract, multiply)(2);
> 24
```

`pipe` - performs from left-to-right.
`compose` - performs from right-to-left.
starter community
Tags: python, engineering, community, beginners
Published: 2022-09-05 13:52:52

hi!
you can call me SU!
I'm a second year electrical eng. student and I just started to learn python. 
I actually have some problem not quitting things half way. like i actually registered in a python udemy course in 2019 and haven't moved forward much each time i made desicion to give it a go. i changed courses multiple times to see if the problem is the teaching method but end up finding the actual problem in maself. 
then i listened to some podcasts about how to overcome the situation and kinda felt the need of a community to be a part of. so I was serching for a group of people to become coding buds and keep going forward and cheer eachother up together!
anyone's in for this?
Change navbar color on mouse scroll in React
Tags: javascript, webdev, react, css
Published: 2022-09-05 13:05:32

I have a simple application where I want to change the color of the navbar on mouse scroll. Like what Mailchimp is doing: When you scroll down, the navbar is following you but also changes its color from yellow to white => https://mailchimp.com/

To do that, I have `App.js`, `Navbar.js`, `app.css`, `navbar.css` files amongst many more, like some other component so that the application would have enough space to scroll down, but these are the ones I'll show the logic on.

In `Navbar.js`, I add the following snippet =>

```react
  const [color, setColor] = useState(true);

  const changeColor = () => {
    //scroll points go up as the page is scrolled down
    if (window.scrollY <= 0) {
      setColor(true);
      // console.log("true");
      // console.log(window.scrollY);
    } else {
      setColor(false);
      // console.log("false");
      // console.log(window.scrollY);
    }
  };
// every part of this function is necessary.
//It won't work if you emit the ", true" parameter
  window.addEventListener("scroll", changeColor, true);
```

and in my `navbar.css` I add the following classes =>

```
.navbarComp {
  background: #ffe01b ;
  transition: 0.3s;
}

.navbarScrolled {
  background-color: white ;
  color: white;
}
```

Then I go back to my `Navbar.js` component and add a ternary statement on these css classes like so =>

```react
      <div className={color ? "navbarComp" : "navbarScrolled"}></div>

```

I'm almost done. There is one more thing I should consider. In my application I had some layout problems I fixed by adding ` overflow-x: hidden;` css class to my whole App component. That was a mistake. When you give ` overflow-x: hidden;` to the whole App component, then the `window.scrollY` always stays at `0`. To fix that issue, I found that if you'd add a wrapper div inside the App component and hide the overflow there everything works well. I'm talking about doing this in `App.js`=>

```react
const App = () => {
  return (
    <div className="App">
      <div className="wrapper">
         ...
      </div>
    </div>
  );
};
```

and in my `app.css`

```
.App {
    //or whatever you give I guess
  height: 100vh;
  width: 100vw;
}
.wrapper {
  overflow-x: hidden;
}
```

That's all folks!
Developing one of the largest e-Commerce platforms for consumer goods
Tags: go, webdev, writing, programming
Published: 2022-09-05 12:35:28

SberMegaMarket is a multi-category marketplace where you can find more than 5 million products from over 8,000 stores. It features 16 main categories, including electronics and household appliances, home goods, clothing, construction and repair, children’s items, and much more. With Sbermegamarket, you can compare prices from different sellers, choose the best offers, and order items for delivery.

Recently, SberMegaMarket has been intensively expanding. As a result, in February 2022, they had many more tasks than their team could handle. [So they turned to Evrone for help](https://evrone.com/sbermegamarket), and we provided them with Go developers to help with tasks in the SEO and Ad-Gen departments.
NFT Staking Contract Based on Rarity- Need Some Advice on How to Implement it
Tags: web3, solidity, solidjs, beginners
Published: 2022-09-05 12:19:03

So am working an NFT staking Contract. But wants the contract to reward based on the rarity on the Nft. so the NFT rarity will be used has the hash rate to earn a reward token. the more rare a users NFT is the more reward they get.

So if anyone here has some advice for me on how to implement this. I will very much appreciate it.
Definitive Guide to Redirects
Tags: seo, redirects, devops, webdev
Published: 2022-09-12 23:26:48

---
title: Definitive Guide to Redirects
published: true
date: 2022-09-05 12:00:00 UTC
tags: SEO, Redirects, DevOps, Webdevelopment
canonical_url: https://johandejong.dev/blog/definitive-guide-to-redirects
---

Redirects are a SEO experts biggest friend but at the same time something that can kill your SEO scores when done wrong. This guide will explain which types of redirects there are, how they work and when to use them properly.  
  
Read full article at [https://johandejong.dev/blog/definitive-guide-to-redirects](https://johandejong.dev/blog/definitive-guide-to-redirects)
React: change css variable with useEffect?
Tags: react, javascript, beginners
Published: 2022-09-05 11:33:01

Hi!

I'm stuck with an issue. In my component, I have div with className="mask" (covering the entire screen).
Inside the css-class is a variable: --mouse-x.
Now I am trying to change its value based on the mouse-x-position.

So far, I am able to get & alter the mouse-x & mouse-y positions by using useState & useLayoutEffect (I understand it will run after the DOM has been rendered, which is why I use it here):

`const [globalCoords, setGlobalCoords] = useState({x: 0, y: 0});`

`useLayoutEffect(() => {
    //get global mouse coordinates
    const handleWindowMouseMove = event => {
      setGlobalCoords({
        x: event.screenX,
        y: event.screenY,
      });
    };
    window.addEventListener('mousemove', handleWindowMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleWindowMouseMove);
    };
  }, []);`

I guess what I am looking for here is a way to target the dom element with the className "mask," but so far I am stuck.

Could someone please tell me how to do this properly?
I am looking to do something like this:

`mask.style.setProperty('--mouse-x', globalCoords.x + '%');`
FE React Course Content
Tags: javascript, react, css, styledcomponent
Published: 2022-09-05 11:25:27

**What's in this course?**

- Basic JavaScript (Optional)
- A thorough introduction to React.js (What is it and why would you use it?)
- All the core basics: How React works, building components with React & building UIs with React
- Components, props & dynamic data binding
- Working with user events and state to create interactive applications
- Detailed explanations on how to work with lists and conditional content
- React Hooks (in-depth)
- Working with built-in Hooks and building custom Hooks
- How to debug React apps
- Working with "Fragments" & "Portals"
- Dealing with side effects
- Class-based components and functional components
- Sending Http requests & handling transitional states + responses
- Handling forms and user input (incl. validation)
- Handling forms with react hook
- Styling React apps with "Styled Components" and "SCSS"
- Redux & Redux Toolkit
- Routing with React Router
- Deploying React Apps
- Implementing Authentication
- Browser Storage Handling
- React with TypeScript
- Adding Animations
- Tons of examples and demo projects so that you can apply all the things you learned in real projects
- React Best Practices
- React Performance
- And so much more 



**Bonus - (optional)**

- Git Basic
- TypeScript
- StyledComponents
- Axios
How To Resize Your VM Processor Manually Using Oracle VM Virtual Box Manager
Tags: vm, beginners
Published: 2022-09-05 11:17:40

 As a beginner, one of the things I struggled with was resizing my VM Processor after creating it because the Virtualization option in my BIOS wasn't enabled yet.

If you manually create a VM using Oracle VM Virtual Box Manager and will like to resize it, the following steps will help you achieve that seamlessly (I am using an HP EliteBook):



**Step 1**: Go to your Oracle VM Virtual Box Manager
**Step 2**: Click on the VM you want to resize
**Step 3**: Click on settings (this is on the right pane just above where you see the details of your VM)

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

**Step 4**: Go to Version and use the drop-down arrow to select your desired processor size and click on Ok.

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


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

Voila! The processor of your machine has been resized.
Smart contract development in Rust
Tags: rust, achimschneider, web3
Published: 2022-09-05 11:11:42

We are live!!! Join Achim Schneider of 
@ParityTech
 for an insightful workshop on smart contract development in #Rust.

Join on Zoom: https://tinyurl.com/4cb725vu
Join on YouTube: https://youtube.com/watch?v=BBSyAI_X7Zw

#Web3
Django SQL cheatsheet
Published: 2022-09-05 11:11:33


## SELECT
### filtering

```python
# filter students by ID
Student.objects.get(pk=1)

# get array of students
Student.objects.filter(enrolled=True)

# filter by pk
Student.objects.filter(school__pk=1) # school_id = 1

# is null
Student.objects.filter(photo__isnull=True)
```


### order by, distinct
```python
# get distinct last_name
Student.objects.order_by("last_name").distinct()

# order by desc/multiple fields
Student.objects.order_by("-pk", "last_name")
```

### get result as an array

```python 
>>> Student.objects.values_list("last_name", flat=True)
["Smith", "Johnson", "Williams"]
```

* `values` return a dict
* `values_list` returns a tuple, but with `flat=True` option returns an array

see also: https://stackoverflow.com/a/41085356/9644490

### count

```python
>>> Student.objects.filter(school__pk=2).count()
120
```

### exists

```python
Student.objects.filter(photo__isnull=True).exists()
```

## CREATE

```python
s = Student(last_name="Smith", first_name="John", school_id=1)
s.save()
```

## UPDATE

```python
s = Student.objects.get(pk=1)
s.last_name="Wilson"
s.save()
```

## DELETE

```python
s = Student.objects.get(pk=1)
s.delete()
```

## all, none

```python
Student.objects.none()
Student.objects.all()
```
Build Fullstack Shopping/online store Website 🔥 [ Video Tutorials ]
Tags: javascript, webdev, css, html
Published: 2022-09-05 11:04:03

Hello there, Today in this blog we'll see some of my tutorials I made in past on e-commerce website. E-commerce website or online store can be a very good project in web development cuz it covers a lot of topics of web development and deal with frontend and backend.

Well in past when I thought of making this site, I saw in youtube there are lots of tutorial on E-commerce website but those were only the frontend part, they just made the HTML, CSS part and that's it.

That's why, I created a fullstack tutorial on shopping / e-commerce / online store website. Which covers frontend as well as backend. It has lots of features. 

✅ Home page
✅ Dynamic Product Page
✅ Working Search Page
✅ Working Cart system
✅ Login / Signup options for consumers
✅ A dashboard for seller where he can add/edit/delete products
✅ Dedicated add product page to add the data to database
✅ Checkout page
✅ Stripe Payment Gateway too, to make payment easily.
✅ Buyer can add review for products
✅ Much more....

Oh god! isn't its lot of features.

If you ask for demo well, I can't use codepen as it is for frontend only, so unfortunately there is no demo I can give in this blog but you can watch videos below, to see the website in full features.

#Videos

This is the 1st video of 5. The tutorial is in 5 parts, covering all the features.

###01

{% youtube vHCSnaUdNkE %}

###02

{% youtube SB-oPvvd6F4 %}

###03 

{% youtube xvUXDyEwq5c %}

###04

{% youtube yFqed0qdz5Y %}

###05

{% youtube E2lVRe4yhvQ %}

This was my latest Ecom series on YouTube, If you want more updated versions Ecom site with different features and look. Make sure to follow me on my [YouTube](https://www.youtube.com/c/modernweb?sub_confirmation=1) and tell me in comment.

Wait, My latest ecom series ?? Do I have more than 1 ecom series. Well yes, I do have a lot of fullstack projects on my [channel](https://www.youtube.com/c/modernweb?sub_confirmation=1).

###The E-commerce 1.0

{% youtube 0-NF3JMs4E8 %} 

This is also a 1st video of the [playlist](https://www.youtube.com/playlist?list=PLqm86YkewF6S45smPYeNv01aFFKWZSgYD). This version of mine was kind of a success for me, as is the only video over 100K+ views on my channel. (Yeah it crossed 100K+ view if you think this or any other of my video deserves more, just show the support by [subscribing](https://www.youtube.com/c/modernweb?sub_confirmation=1) my channel 🙏)

Okay, I hope you found this blog helpful. I just want to share this (in hope of getting views 😎). Along with that I do a lot of fun website tutorials on my [channel](https://www.youtube.com/c/modernweb?sub_confirmation=1). Make sure to give it a visit. I assure you, you want regret 😉.

So with that, Thanks for reading and giving your valuable time.

>By the way if you are interested in the [Source code](https://www.patreon.com/posts/fully-working-by-64572469) of the E-commerce Site.
Coping with Distributed Complexity
Published: 2022-09-05 10:55:09

---
title: Coping with Distributed Complexity
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rvrckkucu822gay1byc.png
# Use a ratio of 100:42 for best results.
canonical_url: 'https://kevwe.com/weekly/202236'
---
As developers, the last couple of years have been forcing on us a strong focus on Security.


This is not by choice, but because the raising reliance on distributed applications has also brought an incentives for cyberthreats/cybercriminals in breaking existing systems.


Most of the systems are not perfect. 


The fact being that the distance from perfection moves asymptotically with costs: you have to draw the line somewhere.


As of old this "somewhere" was pretty much the same as the shipping line: implement it, put it on a CD, ship it to the customer: Done.


We can no longer afford this in most of the cases, and that means that there are costs that we used not to factor in an application implementation, together with the risks.


Microservices and fancy frontends, beside their upsides, present a huge attack surface, and while I believe the industry has mature solutions for securing the backends such as API and data, the frontend is still living a dangerous time where there is still a lot of experimentation and a dangerous variety of creative approaches.


Complexity is still an enemy of Security, and when we're at solving complex problems, that's something we need to deal with.


But sometimes we bring in complexity for the sake of it: long term this might cost you much more than you think, if you're not careful:


https://kevwe.com/weekly/202236