teleren/devto huggingface dataset:
Javascript vs Ruby: Syntax Edition
Published: 2022-09-16 17:14:16

Transitioning from consistently working with javascript to moving straight into ruby might be difficult due to adjusting our eyes to look at a new way of writing code and with that changing our habits.

Lets start simple...

##Javascript Syntax##

```javascript
function jsFunction(param) {
  console.log("Look how Im written");
  return param + 5;
}
```
Lets jot down a couple things we see with js syntax 

1. Use starter keyword **function** to show the code is a function
2. **jsFunction** is the variable name (we use this term to refer to the code wherever we please)
3. NEED parentheses **( )** right after the variable name to place any parameters we might have in them.
4. **param** is the variable name for the functions parameter that will be used when the function is later passing an argument and being invoked. 
5. Next, curly brackets **{ }** is a MUST to indicate the body of the function
6. **console.log()** is what will be displayed in the terminal
7. **return** is different in which it is not specifically for the terminal. We use this so that our function can have a return value when it is called on. For this example we have param plus 5.  

How to check function !

```javascript
const jsFunctionReturnValue = jsFunction(3);
// => ""Look how Im written"
console.log(myFunctionReturnValue);
// => 8
```

Above we just called the jsFunction and passed an argument of 3 and assigned that to a variable called jsFunctionReturnValue. This in turn displays my earlier console.log in the terminal. When I console.log the new variable I made, I get the number 8 due to the 3 + 5.

##Ruby Syntax##

```ruby
def rb_method(param)
  puts "Look how Im_written"
  param + 5
end
```
Lets see what makes ruby different:

1. Use starter keyword **def** to show the code is a method
2. We use **snake case** for the variable name of the method. This just means the words are separated by an underscore (_). While JS uses camel case.
3. Parameters still come after the method name, **parentheses are optional**
4. Since we don't need curly braces here like in js, we use the keyword **end** after the code to identify where the code finishes.
5. The **return** keyword is not needed in Ruby but you can use it. It is just known to ruby that the last line will the the return value.

Now to check Ruby code, you need to run IRB and put your previous code, press enter then check with the following:

```ruby
rb_method_return_value = rb_method(10)
# Look how Im_written
# => 15
rb_method_return_value
# => 15
```

Here we can see the argument of 10 being passed into our method and being assigned to a new variable which then we can call on and we get 15 because of 10 + 5.

<u>**Fun fact**
</u>

![jsrb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0apqjun5639idch06h1m.jpeg)
Active Record - brief introduction for beginners
Published: 2022-09-16 17:11:55




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



Active Record: What is it?
Let's take a moment to briefly explain the purpose of Active Record if you are unfamiliar. We deal with classes and objects in Ruby because the language adheres to the object-oriented paradigm. In most circumstances, we have a relational database at our disposal, even if it would have been good to work with some object-oriented database in conjunction with our object-oriented Ruby classes.

You will use ActiveRecord methods throughout the whole development process of a Ruby on Rails app, starting from scratch. There are a lot of them, and it's beneficial to get to know them well (if not by heart).

Even though practically everyone employs AR techniques to create almost all apps, there are still a lot of techniques that are not well-known. Many of these can keep your code tidy and save you time (and, to be honest, sometimes even your stress). Some helpful instances that are wise to be familiar with can be found below.


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

With a focus on retaining the ability to audit the changes made to a database, migrations offer an organized approach of adding and changing database tables. While manually creating migration files is possible, doing so necessitates keeping in mind the specific order of the migrations, prefixing filenames with, for example, 01_, 02_, 03_, etc., and being extremely careful to stick to a numerical pattern. If we have a lot of migrations to maintain, this might get very laborious.

We may utilize the Rake gem, install it, and define it in our Gemfile to expedite the creation of migrations. Then, having the correct filename, we can simply run the following command in a Terminal window:

rake db:create_migration NAME=create_artists



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

For every database table, maintain a separate migration file.
While handling numerous database table migrations with a single migration file may seem appealing, it is not recommended for a number of reasons. For instance, if we need to subsequently modify a particular table, dealing with several table migrations in a single migration file makes troubleshooting more difficult.
Best UI Component Library for Desktop Keyboard support?
Tags: webdev, ux, discuss, css
Published: 2022-09-16 17:08:07

Hey web developers, 

I'm needing some help.

What is the best UI element toolkit you have found for desktop keyboard support?

For desktop power users that prefer a keyboard vs a mouse.

Working within the browser, so needs to be a web UI kit.

(Tab enter, up-down arrow for select, etc.)

Thank you!
VSCode snippet: React Reducer
Tags: javascript, react, vscode, webdev
Published: 2022-09-16 17:04:20

No matter how many times I visit the React docs... I always doubt which is the skeleton for reducer functions. 

There are VSCode extensions that do this exact thing. the thing is, I have already installed tons of extensions so, there is a code snippet instead:

{% embed https://vimeo.com/750433519 %}

Just open `Snippets: Configure User Snippets` and add the following section to the JSON: 

```json
	"react-reducer": {
		"scope": "javascriptreact,typescriptreact",
		"prefix": "\\reducer",
		"body": [
			"function reducer(state, action) {",
			"\tswitch(action.type) {",
			"\t\tcase \"${1:foo}\": {",
			"\t\t\treturn {",
			"\t\t\t\t...state,",
			"\t\t\t\tfoo: action.foo,",
			"\t\t\t};",
			"\t\t}",
			"\t}",
			"\tthrow Error('Unknown action: ' + action.type);",
			"}"
		],
	},
```

Note: I use a custom prefix to name my custom snippets (`\\`); this way I'm able to locate _my_ snippets quicker in the suggestion box.

--

Cover image from [unDraw](https://undraw.co)

Thanks for reading.
💚
10 Free Resources to learn JavaScript
Tags: javascript, webdev, programming, opensource
Published: 2022-09-16 16:59:05

## 1. FreeCodeCamp
FreeCodeCamp is one of the biggest and most exceptional communities for anyone who wants to learn to code.

🔗 [freecodecamp](https://www.freecodecamp.org/)

## 2. JavaScript 30
Build 30 things in 30 days with 30 tutorials.

🔗 [JavaScript 30](https://javascript30.com/)

## 3. JavaScript info
On this website, you can learn JavaScript from basics to advanced topics with very detailed explanations.

🔗 [JavaScript info](https://javascript.info/)

## 4. Learn JavaScript Online
On this Website, you can read short lessons about JavaScript topics and then try to implement them in their Interactive environment.

🔗 [Learn JavaScript Online](https://learnjavascript.online/)

## 5. MDN docs
MDN doc is an excellent resource for learning JavaScript. Here you can find a very detailed explanation of topics with code samples.

🔗 [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

## 6. Javascript Essentials
This is a free JavaScript Course available on udemy where you can learn all the basic and essential topics in JavaScript.

🔗 [Javascript Essentials](https://www.udemy.com/course/javascript-essentials/)

## 7. Scrimba
Learn the basics of JavaScript by solving 140+ interactive coding challenges and building three fun projects.

🔗 [Scrimba](https://scrimba.com/learn/learnjavascript)

## 8. Intro to JavaScript ES6
This Youtube playlist teaches you about all new concepts that are introduced in ES6 JavaScript.

🔗 [Intro to JavaScript ES6](https://www.youtube.com/playlist?list=PL-xu4i_QDSxcoDNeh8rx5-pHCCTOg0XsI)

## 9. JavaScript DOM Manipulation
This freeCodeCamp tutorial will teach you how to manipulate a DOM Tree in JavaScript.

🔗 [JavaScript DOM Manipulation](https://www.youtube.com/watch?v=5fb2aPlgoys&feature=youtu.be)

## 10. Javascript Crash Course
Recently Traversy Media drops a 1-hour-long JavaScript course on their Youtube Channel.

🔗 [Javascript by Traversy Media](https://www.youtube.com/watch?v=hdI2bqOjy3c&t=5279s)
📌 Live - Diving into an NPM Package Vulnerability
Tags: livestream, programming, javascript, security
Published: 2022-09-16 16:22:04

---
title: 📌 Live - Diving into an NPM Package Vulnerability
published: true
description: Clarkio hosts a livestream to share work he's doing on open source software.
tags: livestream,programming,javascript,security
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Hey there and thanks for checking out this post. I'm building the habit of sharing what I have planned for upcoming livestreams. I have one scheduled for today, Friday, September 16th, 2022. If you're interested in joining our welcoming community as we learn together drop by the stream starting at 12:30pm ET ([time zone conversions](https://time.is/1230PM_16_Sep_2022_in_ET/PT/UTC)).

### Stream Plans
Here's an outline of what you can expect on the stream today:

1. Celebrating community wins
2. Wordle and [Words on Stream](https://wos.gg) game together
3. Diving into a vulnerability in a widely used npm package - [csurf](https://www.npmjs.com/package/csurf)

#### Wins of the Week
If you've not joined us for the livestream before you might be wondering what this is all about. It's the beginning segment of the show where we take time to reflect on the past week and look to find the positive things that happened for which we're grateful.

The idea behind this is that I personally have had a tendency to dwell on the negative things. This exercise has helped me to break out of that habit (not all the time but more often now than before). My hope is that it'll help folks dealing with the same thing.

#### Wordle and Words on Stream
We do this as a transition segment where I hide the chat and turn off the text-to-speech feature of my chatbot (something we built on stream) so folks don't spoil the game. Viewers seem to have fun laughing at my frustrations as I try to solve the puzzle.

#### Technical Topic
After we're warmed up from the previous two segments we dive into a technical topic for the day. This can vary from stream to stream but for this particular one we're going to dive into and understand this [recently disclosed vulnerability](https://security.snyk.io/vuln/SNYK-JS-CSURF-3021144) in the npm package [csurf](https://www.npmjs.com/package/csurf).

### How to Join
If any or all of that interests you and you'd like to see what this community is all about you can join us over on [Twitch](https://twitch.tv/clarkio). Hope to see you there 🙂👍

✌ Clarkio
WP Watercooler EP429 – do_action: WordCamp US 2002 Contributor Day
Tags: speaking, wordpress
Published: 2022-12-01 19:01:52

---
title: WP Watercooler EP429 – do_action: WordCamp US 2002 Contributor Day
published: true
date: 2022-09-16 16:15:27 UTC
tags: Speaking,WordPress
canonical_url: https://courtneyr.dev/2022/09/16/wp-watercooler-ep429-do_action-wordcamp-us-2002-contributor-day/
---

![6KbCssSp Uw jpg](https://courtneyr.dev/wp-content/uploads/2022/09/6KbCssSp_Uw-jpg.webp "WP Watercooler EP429 – do\_action: WordCamp US 2002 Contributor Day 40")

![6KbCssSp Uw jpg](https://courtneyr.dev/wp-content/uploads/2022/09/6KbCssSp_Uw-jpg.webp "WP Watercooler EP429 – do\_action: WordCamp US 2002 Contributor Day 39")

<!-- wp:embed {"url":"https://youtu.be/6KbCssSp_Uw","type":"video","providerNameSlug":"youtube","responsive":true,"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->

https://youtu.be/6KbCssSp\_Uw

<!-- /wp:embed -->

<!-- wp:mamaduka/bookmark-card {"url":"https://wpwatercooler.com/wpwatercooler/ep429-do_action-wordcampus-2002-contributor-day/"} -->

[
 ![](https://wpwatercooler.com/wp-admin/admin-ajax.php?action=rank_math_overlay_thumb&id=8377&type=play&secret=052ac5f5c0014ca648ad6fc844adcbce)

EP429 - do\_action: WordCamp US 2002 Contributor Day - WPwatercooler

This week on the show we are going to be discussing the contributor day that happened just after WordCamp US 2022 in San Diego. Joining us this week is a returning guest Courtney Robertson who is a web design dev advocate at GoDaddy Pro and WP Training team co-rep.

 ![](https://wpwatercooler.com/wp-content/uploads/fbrfg/favicon-32x32.png)wpwatercooler.com

](https://wpwatercooler.com/wpwatercooler/ep429-do_action-wordcampus-2002-contributor-day/)

<!-- /wp:mamaduka/bookmark-card -->

This article first appeared on:  
 ![](https://courtneyr.dev/wp-content/uploads/2022/09/6KbCssSp_Uw.jpg)  
[Courtney Robertson -](https://courtneyr.dev)  
by [<span class='p-author h-card'>Courtney Robertson</span>](https://courtneyr.dev/author/courane01/)
Tooltip on hover - A step-by-step guide
Tags: css, html, webdev, tutorial
Published: 2022-09-16 16:02:11

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

## <u>HTML</u>
For HTML, we only need a container with button and div element with "tooltip" class and text inside.

```html
<div class="container">
    <button>Hover me!</button>
    <div class="tooltip">This is a tooltip</div>
</div>
```

## <u>CSS</u>
For CSS, first we'll align everything using flexbox.

```css
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
```

Now we'll style the button. We'll set colors and border radius to 20px.
Then add some paddings and cursor to pointer.
We'll set the z index to 1 so this element is on top of the "tooltip" element.
Lastly, transition, so that the hover effect, which we'll add later, is nice and smooth, and font size to 20 px.

```css
button {
    background-color: rgba(0, 0, 0, 0.652);
    border: 1px solid rgba(117, 255, 211, 0.928);
    border-radius: 20px;
    padding: 10px 50px;
    color: rgba(117, 255, 211, 0.928);
    cursor: pointer;
    z-index: 1;
    transition: 0.3s;
    font-size: 20px;
}
```

Button on hover will increase a bit.
Don't forget the transition.

```css
button:hover {
    transform: scale(1.1);
    transition: 0.3s;
}
```

For tooltip, first, we'll set the opacity to zero. We'll set it to 1 later on button hover.
Now we'll set some basic styling (colors, border) and paddings and margins.
Then we'll set position to relative, scale to 0.1 with transition so that on hover it increases size smoothly.

```css
.tooltip {
    opacity: 0;
    background-color: rgba(0, 110, 75, 0.404);
    border-radius: 10px;
    padding: 5px 15px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.652);
    position: relative;
    transform: scale(0.1) translateY(-50px);
    transition: 0.3s;
}
```

Using before pseudo element, we'll create an arrow for tooltip that will point to button.
We'll create it by setting content and position to absolute.
We'll set width and height to 10px, and using clip path we'll create a triangle which we'll rotate by 45 degrees with transform rotate.
Then we'll align it on top of tooltip, using top and left properties.

```css
.tooltip::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(0, 110, 75, 0.404);
    clip-path: polygon(0 0, 0% 86%, 86% 0);
    border-radius: 1px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -4px) rotate(45deg);
    transition: 0.3s;
}
```

Now we'll simply set tooltip's opacity to 1 on button hover, and scale to it's original size (1).

```css
button:hover + .tooltip {
    opacity: 1;
    transform: scale(1) translateY(0px);
    transition: 0.3s;
}
```

And that's it.

You can find full code with video tutorial [here](https://designyff.com/code/hover_tooltip).

Thank you for reading this article. ❤️
Sibling selector & 4 other webdev tips you may want to know 🚀
Tags: webdev, javascript, html, css
Published: 2022-09-16 16:15:03




## 1. CSS sibling selector

You can use the adjacent sibling combinator (`+`) to target a sibling that comes directly after the first target. Or you can use the general sibling combinator (`~`) to target any sibling that comes after the first target


![CSS sibling selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43f60tsc34qr0va7apxc.jpg)


&nbsp;
## 2. The capture attribute

You can open a device camera directly from the HTML using the “capture” attribute.
Set it to “user” if you want the selfie cam or to “environment” if you want the rear cam.


![The capture attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hamq3klymnc8z1fg7xjj.jpg)


&nbsp;
## 3. Know how many fingers are touching the screen

Did you know that you can know how many fingers are touching the screen in javascript like this:

![Know how many fingers are touching the screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejq8kzvq133r4sp8te1i.png)


&nbsp;

---

Hey there! I tweet daily about the things I learned in my 6+ years journey in web development, so if you like these tips consider following me on Twitter [@theAngularGuy](https://twitter.com/TheAngularGuy).

---



&nbsp;
## 4. Triple equality special cases

In javascript triple equality (`===`) is usually enough for equality comparisons. But it has two special cases: `NaN` and `-0` `+0`. 
Hopefully `Object.is()` does not:


![Triple equality special cases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nd3d58bwfkj6yxconc53.jpg)



&nbsp;
## 5. Tuple in typescript

The difference between these two function is the type of the first one will be inferred as `number[]` while the type of the second will be a tuple of `[number, number]` (actually `readonly [number, number]`)


![Tuple in typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mfhdgxjjkrxfoctictn.jpg)





&nbsp;
&nbsp;

### Let's connect

That's it for this week. I hope you liked it. If you did, please share it with your friends & colleagues and follow me on Twitter [@theAngularGuy](https://twitter.com/TheAngularGuy) where I tweet about web development and computer science 🚀

Cheers!



### What to read next?

{% embed https://dev.to/mustapha/responsive-images-for-better-performance-start-using-srcset-and-picture-11kc %}
C++ operatorlari
Published: 2022-09-16 16:11:03

Operatorlar o'zgaruvchilar va qiymatlar ustida amallarni bajarish uchun ishlatiladi.

Quyidagi misolda biz ikkita qiymatni qo'shish uchun + operatoridan foydalanamiz:

```cpp
int x = 100 + 50;
```
Yuqoridagi misoldagi kabi + operatori ko'pincha ikkita qiymatni qo'shish uchun ishlatilsa ham, u o'zgaruvchi va qiymatni yoki o'zgaruvchini va boshqa o'zgaruvchini qo'shish uchun ham ishlatilishi mumkin:

```cpp
int sum1 = 100 + 50;        // 150 (100 + 50)
int sum2 = sum1 + 250;      // 400 (150 + 250)
int sum3 = sum2 + sum2;     // 800 (400 + 400)
```
Belgilash operatorlari
Published: 2022-09-16 16:07:37

> O'zgaruvchilarga qiymat berish uchun tayinlash operatorlari qo'llaniladi

Quyidagi misolda x deb nomlangan o'zgaruvchiga 10 qiymatini belgilash uchun tayinlash operatoridan (=) foydalanamiz:

Example

```cpp
int x = 10;
```

Qo'shishni tayinlash operatori (+=) o'zgaruvchiga qiymat qo'shadi:

```cpp
int x = 10;
x += 5;
```
UPnP Port Forwarding
Tags: networking, cli, upnp
Published: 2022-09-16 16:07:23

> Universal Plug and Play (UPnP) is a set of networking protocols that permits networked devices to seamlessly discover each other's presence on the network and establish functional network services. [_Wikipedia_](https://en.wikipedia.org/wiki/Universal_Plug_and_Play)

### miniupnpc

Assuming your router already supports UPnP, you need to install a client to configure the port forwarding.

I'm from a mac so I use [miniupnpc](http://miniupnp.free.fr/).
You can install it using brew:
```sh
brew install miniupnpc
```

### Port forwarding

Let's say your server is running on your local-network on `192.168.0.10:5000`, and you want to access it from the internet.

You need to forward an incoming request on your public address to your local one, matching the port number.

Using miniupnpc:
```sh
upnpc -a 192.168.0.10 5000 7000 tcp
```

This means "Forward any incoming tcp requests on port 7000 to the local address 192.168.0.10, using port 5000".

That is! You can test it by accessing your public IP (you can google it)

```sh
curl http://your-public-ip:7000/
```

### Other commands

Remove entry by port number
```sh
upnpc -r 5000
```

List entries
```sh
upnpc -l
```
Luos at NuttX online workshop 2022
Tags: opensource, microservices, nuttx, luos
Published: 2022-09-16 15:58:53

🗓 We are pleased to announce that Luos will be attending the NuttX conference on September 24th and 25th.

Nicolas Rabault will present what the Luos engine is technically with these features, how Luos and NuttX share the same vision, our upcoming projects connecting the Luos technology with NuttX and our latest news.

Thanks to Alan Carvalho de Assis for the invitation and for his confidence, see you at NuttX! 🙂

Workshop Committee: Espressif, Sony, Verge Aero, Technolution, NscDg, PHI Innovations, IQ-Analog, Sony Corp, Xiaomi.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc9vtylz2m580pjvl8r7.png)
How I learned React in one Week as a vue developer
Tags: vue, javascript, react
Published: 2022-09-16 15:56:06

 first to get a bit of understanding to my background I worked with Vue for more than 3 years so I got bored of it a little bit and I wanna made a new portfolio so I decided to pick react, react router and react material

## 1- Change your mindset Vue is separated to

HTML, Style Script 
but React or JSX is HTML inside JavaScript you literally code inside JavaScript Function  with a return () like this
you can write methods or the equivalent is normal arrow function above the return 
you can bind data {} single bracket and v-model is the same and
the props is passed on the functions
in the end you should export default the function 

    `import {useState, useEffect} from 'react'
    const MyFunction = ({myProp})=>{
    const myMethod = ()=>{
    console.log("working react method")
    }
    return(
    <div>
    <h1>working {myPorp}</h1>
    </div>
    )
    }
    export default MyFunction
`

## 2- Learn Hooks
I just used useState and useEffect basically useEffect is the same as mounted in vue
useState is to change the value of the variable this is way more different than anything in vue
       **useState**
       first you have to declare a variable but not the normal way you declare
       let [variableName, ChangeFunction] = useState('your Value')

then you can change it by ChangeFunction(variableName = 'my new Value')

that's it is react from a vue developer perspective I am still learning it and I really love it I will follow this roadmap
https://roadmap.sh/react

if you wanna see my project I developed in react 
www.hamouda.tk
still have room to work and improvement but I like to share my progress with you
thanks for reading please tell me if there is something I missed