teleren/devto huggingface dataset:
Reversing Keyboard Driver: Part 1 (Introduction)
Tags: security
Published: 2021-08-21 20:00:05

## Tldr; (What is the series about)
This post is an introductory post to a series that will describe my journey to analyze and learn how the keyboard backlight driver on my laptop works, and then re-implement it on my own. I wanted a place to dump my thoughts and different things I try, and learn in the process. 
This post is just an intro to the series, if you're looking for the actual action, head over to the next post in the series!

## Why?
I recently upgraded to a new laptop **(HP Omen 15-en0037AX)**. The laptop has a four-zone RGB LED backlight on the keyboard. Like most laptops that ship with such a keyboard, the manufacturer shipped a preinstalled app **(Omen Light Studio)** on windows to customize the various lighting modes on the keyboard. 

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pgzdsm3ihnkyqxx4fhu.png">
  <figcaption>HP Omen Light Studio</figcaption>
</figure>

Unfortunately, this app is only available for Windows, which is a problem, as I am primarily a Linux user.

Since I have always been interested in cybersecurity and have taken part in multiple [CTF (Capture the Flag)](https://ctftime.org/ctf-wtf/) events, I have a basic understanding of how to Reverse Engineer C/C++ binaries using tools like [Ghidra](https://ghidra-sre.org/) but have never reversed an actual real-life application. In this series I want to (hopefully) achieve two things:
1. Reverse Engineer the Omen Light Studio App, and figure out how it interfaces with the hardware on the laptop to control the keyboard's lighting.
2. Re implementing the functionality on Linux (maybe in C/C++/Python/NodeJS) and possibly make a similar desktop app.

## Disclaimer
This series is going to be me documenting all my approaches (right or wrong), and also explaining various concepts I learned in the process. Currently, I have no idea where this will lead to or what tools/languages I need to know/learn, but all that begins from the next post. See you there!
1 Line Caesar Cipher
Tags: javascript, beginners, webdev
Published: 2021-08-21 19:36:06

In cryptography, a Caesar cipher, also known as Caesar's cipher, the shift cipher, Caesar's code or Caesar shift, is one of the simplest and most widely known encryption techniques. It is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on. The method is named after Julius Caesar, who used it in his private correspondence.[1]

The encryption step performed by a Caesar cipher is often incorporated as part of more complex schemes, such as the Vigenère cipher, and still has modern application in the ROT13 system. As with all single-alphabet substitution ciphers, the Caesar cipher is easily broken and in modern practice offers essentially no communications security.

For example, shifting each of the 26 letters of the English alphabet by 3 places to the left, is equivalent to shifting by 23 places to the right. A plain text message without encryption applied is below:

```
Plaintext:  THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
```
To take a look at what is going on, we can take the letter A. shifting A to the **left** by 3 places, with 1 shift, we get Z, with 2 shifts, we get Y and with 3rd shift we get X. With this cipher, this is done for all letters of the alphabet and shifted.

```
Ciphertext: QEB NRFZH YOLTK CLU GRJMP LSBO QEB IXWV ALD
``` 
To decrypt, one will need to shift each letter of the encrypted in the opposite direction to which it was shifted. So A is now X, to get back to A, we shift to the **right** by 3 to get back to A.

In order to do this computationally, this encryption uses  [modular arithmetic](https://www.khanacademy.org/computing/computer-science/cryptography/modarithmetic/a/what-is-modular-arithmetic) by transforming the letters to numbers. Computers use  [ASCII](https://www.rapidtables.com/code/text/ascii-table.html)  code. From ASCII tables, A is 65, counting incrementally until Z is 90, and a is 97, counting incrementally to z which is 122.

The complete code is given below:

```JS
const caesarCipher = (str, shift=13) => str.replace(
  /[A-Za-z]/g, char => String.fromCharCode(
    65 + ((char = char.charCodeAt()) & 32) +((char&~32) - 65 + shift) % 26
  )
)
```

The `char.charCodeAt()` merely transforms the given character, char to its ASCII number, while the `String.fromCharCode()` method transforms the given number back to its alphabetic form. Now using this inside the `Array.prototype.replace()` method, we are simply replacing a given English alphabet with a shifted ASCII alphabet, thus scrambling the message.

It is worth noting that Caesar cipher is one of the most famous encryption algorithms in simplicity and cannot offer any information security.
Do you Understand this... ?
Tags: javascript, webdev, 100daysofcode
Published: 2021-08-21 19:20:49

## What is *this* and what context is it used?

To understand this segment, we will have to head to an IDE. For simplicity, I will be using the Eloquent JavaScript IDE on  [this](https://eloquentjavascript.net/code)  link.


When the command `console.log(this)` gives access to the Window object. The Window object represents an open window in the browser. The browser creates a window object for the HTML document and also all the tags that make up the HTML document. Click this [link](https://www.w3schools.com/jsref/obj_window.asp)  to have a look at Window Object Properties and Window Object Methods. `console.log(typeof this)` returns Object. Below is the snippet of the actual window object logged.

![window.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628868362665/PzF7CXXPm.png)

They look very similar to W3Schools.com website link window objects properties and their methods.
`console.log(this.origin)` returns `https://eloquentjavascript.net`😎. Inside the window object, name leads to an empty string, hence `console.log(this.name)` returns nothing since it's an empty string. A made up name on the other hand: `console.log(this.anyName)` returns `undefined` since there has not been any declaration to anyName and it does not exist in the window object. However,  `let anyName = 'myName';   console.log(this.anyName)` returns `myName`🤓. 

### Context

When *this* is used inside a function, it refers to an object in which it is bound. It simply refers the function to where it should get its data from. 

![whyMe.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628872958981/y2zQBXX-V.png)

Calling this function: `let whyMe = 'It is getting clearer'; whatIsThis()` prints `It is getting clearer`. However, we still have access to the window objects when needed even inside a function. It is worth noting that whyMe() is now bound to the **global scope** and this.whyMe references that **global scope**.

![object.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628872694138/YmbrHWl4F.png)

In the above code, name, action, toy and Function are all properties of myObject. Accessing this properties we can use the `.dot` method. Hence accessing the function Function from myObject runs testing, which then receives **global scope** from the window and appends to the respective properties.

Hope this clears something the confusion for beginners.
Laravel Lardebug New Debugger Tool For Laravel With NodeJs
Tags: laravel, webdev, tutorial, beginners
Published: 2021-08-21 18:59:13

this is the link for the tool 
https://github.com/mahmoudshahin1111/lardebug

please support me with a report about any issues or any suggestions to improve the tool.🙏
you can report about issues or suggestions here https://github.com/mahmoudshahin1111/lardebug/issues or in comments i will be listen 👂
THE JAVASCRIPT "this" KEYWORD.
Published: 2021-08-21 18:42:24

Just as it is referenced in the english language, the "this" keyword refers to the owner of a function or method.
Take for instance in a JavaScript object method, using "this" keyword refers to the owner of the method that is the object itself. It could also apply to a function itself, the "this" keyword refers to the owner of the function.
However when using "this" without referencing any object or function, it refers to a global object or the owner becomes the windows global object [object Window].
In summary, the "this" keyword refers to the owner of either a method or function.
This was really useful for me in times of vanilla JavaScript and it paved a way with using object and constructors. I hope you find this useful ☺️.
Expanding Card in HTML & CSS (CSS Animations)
Tags: css, html, javascript, animation
Published: 2021-08-21 18:15:33

## HTML
```
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Expanding Cards</title>
  </head>
  <body>
    <div class="container">
      <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Explore The World</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Wild Forest</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
        <h3>Sunny Beach</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
        <h3>City on Winter</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Mountains - Clouds</h3>
      </div>

    </div>

    <script src="script.js"></script>
  </body>
</html>
```
## CSS
```
* {
  box-sizing: border-box;
}

body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  -webkit-transition: all 700ms ease-in;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}
```
## Javascript
```
const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})

function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}
```
Preview: ![CSS Animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqbjx20i653bcarnlpda.gif)

My Blog:- https://beginners-developer.blogspot.com/

Reference:- https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards

Preview:- https://50projects50days.com/projects/expanding-cards/
Animation React
Tags: react, javascript, webdev, gsap
Published: 2021-08-21 18:08:27

Today I'm bringing an animation made with GSAP/React, I won't post the entire code because it got a little big, but you can see in my github all the code.


GSAP is a library that facilitates the creation of animations, making it simple and intuitive.
With it we can animate (CSS properties, canvas library objects, SVG, React, Vue, Angular, generic objects, whatever) and also resolve countless browser inconsistencies, all with incredible speed (up to 20x faster than jQuery ), including automatic GPU acceleration of transforms.

The GSAP community is very active, and for those who have doubts about creating some animation, I recommend posting it on the GSAP forum <a href="https://greensock.com/forums/" target="_blank">https:/ /greensock.com/forums/</a>

Here's an example of an animation that I managed to create using GSAP to help me, I hope you like it:


![Gustavo Scarpim](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxy0wnii3wnw800jk43t.gif)

See the complete code here on GitHub <a href="https://github.com/GuScarpim/Cat-Animation/" target="_blank"><b>Click here</b></a>

Check out the Project in action <a href="https://cat-animation.netlify.app/"><b>Deploy</b></a>

Thanks for reading!
Top 5 vscode tips & tricks
Tags: vscode, react, html, javascript
Published: 2021-08-21 16:13:49

####If your are a developer for quite some times you will be familiar with these names. These top 5 vscode tips will make you code efficiently.

```
Emmet
```
**Emmet** is a life saver for any developer who is working with any kind of language. Emmet makes it easier to write code faster. Emmet is just a auto compelete tool. It auto compelete your syntax based on what your writing.

```
command Pallete
```
**Command Pallete** is shortcut way of finding any of the vscode functionality. It's the fastest way to open any thing in vs code without touching the mouse. Just type and open it.

```
SidePanel
```
**SidePanel** As a developer you are mostly engaged with the keyboard most often. And It make you efficient when you are using mouse less or not using it. So, It is a pain to open or close side panel. It's ctrl + b and it's done now you can go with your coding.

```
Prettier
```
**Prettier** Its a real pain when you have format your code. And prettier makes it easier to format your code and forget about formating. You need to just install prettier and your are done. set it to save on format. 

```
Bracket coloraizer 2
```
**Bracket coloraizer 2** is a extension which highlight your brackets. When their is too many code you find it difficult to find the specific bracket. And bracket coloraizer made it easier for you. If you need to now the a specific bracket opening and ending tag just select a tag and it will highlight the opening and ending of that tag.

Thanks for the patience.
Have a nice day
Cara Install Let's Encrypt di Ubuntu untuk Nginx
Tags: ubuntu, nginx, tutorial
Published: 2021-08-21 18:07:46

Pada artikel ini kita akan belajar tentang bagaimana [cara install Let's Encrypt di Ubuntu untuk Nginx](https://ruangkoding.id/cara-konfigurasi-https-nginx-di-ubuntu/). Secara default, Web server dikonfigurasi untuk menggunakan HTTP, tetapi untuk masalah keamanan kita ingin agar aplikasi yang kita jalankan menggunakan HTTPS, versi HTTP yang aman.

Jadi kita perlu melakukan sedikit prosedur yang melibatkan penggunaan Certbot untuk mendapatkan sertifikat SSL melalui Let’s Encrypt, lalu melakukan konfigurasi HTTPS Nginx.

Contact Saya
Website : [https://ruangkoding.id](https://ruangkoding.id)
Telegram : [https://t.me/s/ruangkoding](https://t.me/s/ruangkoding)
Tutorial Cara Install Redis di Ubuntu 20.04
Tags: ubuntu, redis, tutorial
Published: 2021-08-21 18:02:20

Pada tutorial ini kita akan membahas tentang bagaimana [cara install Redis di Ubuntu 20.04](https://ruangkoding.id/cara-install-redis-di-windows-ubuntu-dan-macos/). Selain itu, kita juga akan membahas tentang apa itu Redis dan fungsi dari Redis itu sendiri.

Contact Saya
Website : [https://ruangkoding.id](https://ruangkoding.id)
Telegram : [https://t.me/s/ruangkoding](https://t.me/s/ruangkoding)
Emotion Detection 😠🤢😱😇😐☹️😲 CNN using keras
Tags: keras, python, cnn, machinelearning
Published: 2021-08-21 17:42:47

We will use 7 emotions namely - We have use 7 emotions namely - 'Angry'😠, 'Disgust'🤢, 'Fear'😱, 'Happy'😇, 'Neutral'😐, 'Sad'☹️, 'Surprise'😲 to train and test(validation) our algorithm using Convolution Neural Networks. You can directly use kaggle kernel notebook, so that you don't need to download the dataset. Also, you can download your code and run it in your local device directly. 
Kaggle notebook -  https://www.kaggle.com/mayank7900/notebook0a0917a828/edit
<br> 
## Tools and Libraries used -  
* Install anaconda
* Jupyter notebook
* VSCode
* matplotlib 
* numpy
* openCV
* keras<br>
<br>
 

### Given dataset of different expressions:
https://www.kaggle.com/jonathanoheix/face-expression-recognition-dataset<br>![Screenshot (249)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bce37h888jv5mw9uu1k7.png)
 


Screenshot of some angry expressions from the dataset on kaggle:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro6l2u6nolark9a44atu.png)<br>
 
<br>
* source code - {% github mayankchaudhary26/Emotion_Detection_CNN_keras %}

![Screenshot (257)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4tg1roi2w74yy7ujk78.png)
<br> 
 
Emotion Detection — Classifying the emotion on the face as emotion_labels = ['Angry','Disgust','Fear','Happy','Neutral', 'Sad', 'Surprise']
![Screenshot (256)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqcvgpqpziy0a2fkh5dp.png)
 ![Screenshot (254)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95umy1el5pdy0jj3om76.png)
My Internship Goals for the HNGi8 Program
Tags: internship, codenewbie, hngi8
Published: 2021-08-21 17:34:44

Before October 2020, I never would have imagined a girl like me could write codes. I started learning to code in October last year, and this period has been an exciting phase of my life.

I love learning. I enjoy writing codes as much as I love writing. I am confident that I would be more proficient in software engineering at the end of [this](https://internship.zuri.team/) program. 

If I could go back in time, I would tell my younger self that I could do anything I set my mind to and that anyone could be an engineer.

I would love to get the experience I need to get set in the tech industry; this experience would help me learn more about working in a community of tech-related people.

This program would add a lot to my experience as I push to perfect my skills in software engineering.

My goal for [this internship program](https://zuri.team) is to
 
1. Improve my coding skills.
2. Improve my communication and collaboration skills.
3. To make progress towards my track as a Software Engineer.
4. Gain more experience of working in a community of 
   tech-related people.
5. By the end of 8 weeks, I would have achieved a wider knowledge and be in a better position than I was before I started this program. 

Through this internship, I hope to teach young people that it is not impossible to write codes, and all that's needed is to believe in themselves and have the determination and perseverance to push through. I hope to make resources readily available for anyone who has the interest to learn software development.

**See below some noteworthy tutorial references:**

1. Figma is one of the hot interface design application tools out there. It's made for collaboration and working with others on digital-based projects.
Here is beginner [tutorial](https://trydesignlab.com/figma-101-course/introduction-to-figma/#:~:text=Getting%20started%20in%20Figma%20is,and%20we'll%20get%20started!) for designing with Figma

2. HTML is the standard markup language for Web pages, with HTML you can create your own Website.
HTML is easy to learn!
Here is a [tutorial link](https://www.w3schools.com/html/) link for HTML.

3. Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people.
[tutorial link](https://www.freecodecamp.org/news/learn-the-basics-of-git-in-under-10-minutes-da548267cc91/) link for Git

4. JavaScript is the world's most popular programming language.JavaScript is the programming language of the Web.
[tutorial](https://www.w3schools.com/js/) link for js
Youtube [tutorial link](https://www.youtube.com/watch?v=PkZNo7MFNFg) for basic training in JavaScript

5. Node.js is an open source server environment. Node.js allows you to run JavaScript on the server.
[tutorial link](https://www.w3schools.com/nodejs/) link for basic training in node.js. Video tutorial for basic training in node.js
question a bout saas software
Tags: saas, startup, software
Published: 2021-08-21 17:17:55

Hi there,
I want to start a SaaS Start-up, that help students to organize their Study. The Software is something like clockify and monday.com, but all as an App and not a web based software.
My question is how to choose the right programming language for such an App?
I don't know if this question is a good question or a right question to ask, but it shows how inexperienced I am in software programming!
Macbook's Shopping Cart
Tags: 100daysofcode, javascript, beginners, webdev
Published: 2021-08-21 17:05:43

#100daysofcode [Day -11]
Hey, would you like to buy a MacBook? Click on the link below and set up the configuration and I will give it to you when I become a pro developer.
Today I created this shopping cart and you will get all the costs in the real-time update.
Live Preview: https://macbook-carts.netlify.app
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6bak6173pfbq81uu7v6.png)
#javascript # #developer #programming
How to Host a Website?
Tags: html, webdev, wordpress, programming
Published: 2021-08-21 16:09:15

Bringing yourself in front of the world and establishing your online presence is essential to achieving success in the digital world.

So, the best way to achieve this is by building and hosting a static HTML website.

This is a long process and takes time but, we've compiled this into a few steps.

All you've to do is:

1. Decide a Domain/Subdomain
2. Upload the .zip or HTML file at tiiny.host
3. Launch the HTML Page
4. Complete Registration

You can easily host free HTML pages and get your website online in less than 30 seconds!

You only need the basic technical knowledge to modify HTML files and nothing more. tiiny.host takes care of remaining hosting issues and necessities.

You can also read the implementation of complete steps at https://tiiny.host/blog/how-to-host-a-website