teleren/devto huggingface dataset:
Day 3: Diving In
Published: 2022-07-28 05:35:00


![Man Diving In Water](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7l8ieivouwj9lisbdud.jpg)

##JavaScript##
Today was a bit of a mixed bag of things.  I coded along with a JavaScript practice and created a key-based drum kit. This was my first time touching JavaScript and I had a lot of fun, it will be my focus for the next little bit.  I picked up some of what was going on, although most of it was over my head.  

![kid spraying himself in face](https://media0.giphy.com/media/3NgcLVc9B2tEPUUCMz/giphy.gif)

##What I got##

**Key Events** 
- returns the value you set for the key pressed.
- I used the key as a class to assign sounds for the drumkit, was it more in-depth than that, of course.  Did I understand the “more”, nope, but I liked the challenge as a jumping-off point to dive into learning JavaScript.

**Playing Audio**
- assigning audio to the class and set it up to play when a set key is pressed.
- what to do with audio if an unassigned key is pressed.
        - *if*(!audio) *return*;
- Listening for transition end event
    - sequence of CSS events that started at the end of the sound
        - function removeTransition(*e*) {
        - *if* (*e*.propertyName !=='transition') *return*; *//skip it if it is not a transition*
        - this.classList.remove('playing');
        


##What they Taught##
… alot more. 

![kid dropping more than he picks up](https://c.tenor.com/v9mkfA1Org0AAAAM/cute-kid.gif)



##In Other News##
I am continuing to learn more about the Terminal, today was traceroute. 

**Traceroute** - you can see how many and what stops /computers your request took. 
- traceroute (mac)
- tracert (PC)

The rest of the day was going over things I already knew, which was not as exciting but somewhat reassuring.  If I’m watching and am ready for them to move on it must mean I’m catching on…right?

![man saying right](https://media2.giphy.com/media/Vr8xM1OgUYhtAtLp6n/200.webp?cid=ecf05e47w0j7s3vzo78sa8jyu1h86v5l78rmp6csm85551fd&rid=200.webp&ct=g)
NewKidOnTheBlock
Tags: beginners, webdev
Published: 2022-07-28 05:32:00

I feel a whole new vibe coursing through my veins as I write this blog article. Of course, being a blockchain writer for several months now, this is not my first rodeo.  

However, I'm here with a different kind of vibe entirely. The freedom to write freely without the air of so much seriousness: few things can compare to that.

Anyways, today is my first day on this journey, one I hope I will have the discipline to be consistent with it.

What journey? Of course, I knew you'd ask that.

Well, I'm starting a software engineering course with Alx's fully funded program on the 15th of August. Yeee!!! Well, my head wants to say, "don't get too excited. This is like the umpteenth time you're starting a programming course..." But hey! A man's got to keep trying.

This time, though, I'd like to do all within my power to succeed first in learning and then become a great programmer. 

As a writer, though, I intend to first start as a technical writer and work my way into becoming a full-time programmer. In all my three years of experience as a content writer, I discovered my best work all involved understanding and then simplifying content for an audience. I thus look forward to doing just that in the software development/engineering field as well.

I'll restart my journey in software development tomorrow by starting out any front-end project on which I can lay my hand. Having prerequisite and partial knowledge of HTML, CSS, JavaScript, Python, and, of course, stack overflow and Google will surely go a long way.

I hope to document my progress weekly to help me remain consistent. All the best to me!
Pure CSS Woody Harrelson
Tags: codepen, html, css, webdev
Published: 2022-07-28 05:24:45

---
title: Pure CSS Woody Harrelson
published: true
tags: codepen,html,css,webdev
---

{% codepen https://codepen.io/AsyrafHussin/pen/WNzZVgw %}

<p>Speed Code Video
<a href="https://twitter.com/asyrafhussin4/status/1552519976304553985" target="_blank">https://twitter.com/asyrafhussin4/status/1552519976304553985</a></p>
242. Leetcode Solution in Python3
Tags: python
Published: 2022-07-28 05:11:19

```
class Solution:
  def isAnagram(self, s: str, t: str) -> bool:
    if len(s) != len(t):
      return False

    dict = Counter(s)

    for c in t:
      dict[c] -= 1
      if dict[c] < 0:
        return False

    return True

```

#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/valid-anagram/
Hero page With html & css
Tags: webdev, css, html, web3
Published: 2022-07-28 05:07:11


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


Tutorial Link: [https://www.youtube.com/watch?v=3CkXf2jYcO0&t=326s](https://www.youtube.com/watch?v=3CkXf2jYcO0&t=326s)

If you like this comment below
direnv allow with no hands
Tags: neovim, direnv
Published: 2022-07-28 05:00:36

---
title: direnv allow with no hands
published: true
description: Подгружаем .envrc прямо из редактора
tags: 
 - neovim
 - direnv
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Отличный инструмент [direnv](https://direnv.net/), хранит переменные, которые нужны в конкретном проекте/каталоге, позволяет не грузить их прямо в `.bashrc`/`.profile` и не требует (почти) дополнительных телодвижений, чтобы переменные грузились. 

«В смысле — почти?» А в том смысле, что когда мы отредактировали свой `.envrc`, он обязательно нам напомнит «файл поменялся! Вы ему доверяете?» И всё бы хорошо, всё бы правильно, если редактировал файл кто-то другой, или пришёл он из другого репозитория, и мы понятия не имеем, что в нём лежит, ок. Но что делать, если мы сами часто редактируем этот файл и нас уже начинает задалбывать вежливое напоминание?

На этот самый случай я написал автокоманду для `neovim` (я пользуюсь этим редактором и мне вполне себе заходит):

```lua
-- autocmds/direnv.lua

local au = require("kaineer.autocmd").au

au("DirEnv", function(cmd)
  cmd("BufWritePost", {
    pattern = ".envrc",
    callback = function ()
      -- Указываем вторым параметром direnv полный
      -- путь к текущему каталогу
      vim.cmd(":!direnv allow " .. vim.fn.expand("%:p:h"))
    end
  })
end)
```

Обвязку `kaineer.autocmd` можно посмотреть [здесь](https://github.com/kaineer/nvim-lua-config/blob/28635f1a5fe2071d711b407e87e0914e2654af84/lua/kaineer/autocmd.lua)
Cấu trúc cơ bản của URL
Tags: javascript, url
Published: 2022-07-28 04:56:00


# Cấu trúc cơ bản của URL
URL (Uniform Resource Locator) là một mã định danh duy nhất được sử dụng để định vị một tài nguyên trên Internet. Trong ngữ cảnh của **HTTP** nó còn được gọi là `địa chỉ Web` hoặc `link`. Trình duyệt sẽ hiển thị Url trên thanh address bar, Ví dụ: `https://facebook.com`.

Một Url có nhiều thành phần cấu tạo nên chúng. Sau đây mình sẽ giới thiệu một cách tổng quan về các thành phần này.

`URL` bao gồm các phần khác nhau, một số phần bắt buộc và một số phần khác tùy chọn. Hình dưới đây là cái nhìn bao quát về các thành phần trên URL

### 1.Scheme
  `Scheme` là thành phần đầu tiên của URL


  sẽ cho biết giao thức mà browser sẽ sử dụng để yêu cầu tài nguyên. Các loại `scheme` thường gặp bao gồm

   

   * **HTTP**: xác định các hành động của máy chủ với thao tác của người dùng trên trình duyệt web bằng các lệnh nhất định. HTTP sẽ sử dụng Port 80 để giao tiếp.
   * **HTTPS**: sử dụng SSL (Secure Socket Layer) để đảm bảo truyền dữ liệu an toàn giữa web server và trình duyệt website. HTTPS sẽ sử dụng port 433 để truyền dữ liệu. (phiên bản an toàn hơn của HTTP)
   * **FTP**: chuyển đổi file qua lại giữa trình duyệt và web server.

Thông thường, không nhất thiết phải gõ `scheme` trước tất cả các URL. Vì khi gõ phần URL còn lại bất kỳ thì browser sẽ tự lựa chọn phương thức phù hợp.

    
### 2.Authority

 ![Docusaurus logo](/img/auth.png)

  Chúng được tách khỏi `Scheme` bằng kí tự `://`
  - Nếu Authority chứa tên miền. Ví dụ `www.google.com` thì sẽ được mặc định hiểu là đang chạy dưới cổng **80** tương đương với hình trên.
  - Thông tin người dùng: Chứa tên người dùng và mật khẩu. Ví dụ: 
  
    `admin:password@www.google.com`, trong đó, `admin:password` chính là thông tin đăng nhập của tài khoản, được liên kết với host `google.com` bằng “@”.
  - Có thể có `subdomain`

### 3.Path 
  `/path/to/myfile.html` là đường dẫn đến tài nguyên trên máy chủ Web. Trong những ngày đầu của Web, một đường dẫn như thế này đại diện cho một vị trí tệp vật lý trên máy chủ Web. Ngày nay, nó chủ yếu là một phần trừu tượng được xử lý bởi các máy chủ Web mà không có bất kỳ thực tế vật lý nào.

  Đường dẫn này được bắt đầu bằng dấu gạch chéo. Những dấu gạch chéo này sẽ tiếp tục thể hiện phân chia giữa các thư mục và thư mục con (subfolder). Ví dụ như: www.example.com/folder/subfolder/filename.html

  Nếu URL đưa bạn đến đúng máy chủ thì Path sẽ đưa bạn đến đúng thư mục hoặc file trên máy chủ đó.
### 4.Parameters
  `?key1=value1&key2=value2` là các tham số bổ sung được cung cấp cho máy chủ Web. 

  Các tham số đó là danh sách các cặp `khóa / giá trị` được phân tách bằng ký hiệu `&` và được bắt đầu bằng kí hiệu `?`. 
  
  Web có thể sử dụng các tham số đó để thực hiện các công việc query để trả về dữ liệu. 
### 5.Anchor

  `Anchor`được bắt đầu bằng một dấu thăng (#) và được sử dụng để xác định vị trí cụ thể của trang web.

Many Thank !!!

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL
Let’s do fabform…
Tags: forms, webdev, javascript, learning
Published: 2022-07-28 04:47:09

## What is fabform?

[Fabform](https://fabform.io/) is a smart form endpoint for developers who are using the forms in the web apps on a day-to-day basis.

[Fabform](https://fabform.io/) provides an endpoint to play around with their neat APIs.

## How to create the fabform API id?

- Signup to fabform.io

![form1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqp7ec3jc2cipt0m7gjl.PNG)
  
- Click on `Create endpoint`

![form2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s30hohl76lbduue4694j.PNG)

- Provide a meaningful name to create an endpoint.


![form3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1i38fv9a492jhqx2y51n.PNG)

And that is it. You are done

## How to play around with the fabform API?

Once you create an endpoint, you can simply click on `Test Form` to try the API.


![form4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mysnwu49ozzjoi533lty.PNG)

You will see the input boxes asking for `First Name`, `Last Name` and `Email` to be entered. Once you enter the fields click on the `Test Form` button.


![form5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkg7rpfcipo8k7evvrey.PNG)

Once you click on the `Test Form` button, information is saved corresponding to the API ID that you had created earlier.

![form6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfmmexswb1ym1hv6znz3.PNG)


## Conclusion

Try this new tool to save the form data via their API. It’s easy to use.


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


Thanks in advance for reading this article...🚀

*I am more than happy to connect with you on*

- [@twitter](https://twitter.com/_nitinreddy3)
- [@LinkedIn](https://www.linkedin.com/in/nitinreddy3/)

*You can also find me on*

- [@Github](https://github.com/nitinreddy3)
- [@DEV](https://dev.to/nitinreddy3)
This is how functions work internally...
Tags: functional, beginners, programming
Published: 2022-07-28 04:14:14

Hey folks, it’s mesmerizing how functions work internally, what happens in memory, how the calling mechanism works and much more….

So, before knowing what happens, we should know about :

**a. Program Stack**: A stack is a special area in memory which is used to store data temporarily. For functions, it holds all the function calls with bottom element as the main function because it’s the first function in a program that is executed and goes to the bottom of the stack.

It works on LIFO (first-in-last-out) principle i.e. what goes in first comes out last.

**b. Stack Frame** : It is a buffer memory which is an element of program stack and it has the data of the called function i.e. Return Address, Input Parameter, Local Variables, Register Savings.

**c. Stack Pointer**: It is the pointer which points to the stack frame in the program stack i.e. the most recent function called.

These three elements can be visualized as :

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

Now, let’s get to the interesting part :

Whenever a function is called, a new stack frame of the function is created with all the functions data in it.
The stack frame is pushed into the program stack.
The stack pointer that always points to the top of the stack points to the stack frame pushed recently.
When the function who’s stack frame is at the top finishes execution, it’s stack frame is popped (deleted) of the stack i.e. the functions data is deleted.
Now the control passes back to the function caller from where it was called or it can be said that the control goes to the stack frame which is now at the top after the frame that was above it got popped off.
The above process can be explained via the pseudo-code :

```
main_function() {
    
    func1();
}

func1() {
    
    func2();
}

func2() {
 
    // does some operation and returns
       back the results to func1()
}

```

![The working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os573q8z21rb04b7mebs.png)

As we know, _main_function_ is always executes first in a program and according to the pseudocode above, (see in fig. a) it called _func1()_ and as it was called, it’s stack frame was generated with all it’s data and was _pushed_ (inserted) in the program stack with the stack pointer pointing to it as it is the frame pushed recently. When _func1()_ started executing, (see in fig. b) it called _func2()_ and similarly it’s stack frame also got _pushed_ into the stack and the pointer points to it. When _func2()_ finishes it’s execution, it’s stack frame consisting all it’s data got _popped_ (deleted) off the stack (see in fig. c) and the stack pointer started pointing to _func1()_ which is the function that called _func2()_ and also it’s stack frame is at the top. And when each function’s execution will get over, their frames will be _popped_ and the stack will be emptied.

Hope you understood….

Thanks for reading❤️
Today I Learned
Tags: todayilearned, github, npm, community
Published: 2022-07-28 04:12:00

# Today I Learned (from yesterday)

1. Read css tricks article by Chris and understood about technical writing [here](https://css-tricks.com/advice-for-technical-writing/)
2. npm is owned and maintained by github and they are working on improving security of npm packages with bringing in workflow improvements for package owners and users
3. Github projects is a feature that allow developers to track their project with features (like Jira/linear/monday etc.) such as issue assigning and tracking, table and board view, reports, actions on issue status change and more. It was released last year as a beta and is now available for public
4. Github community! It is actually the github homepage that we usually ignore. At first glance it looked something like dev.to. You can post discussions or any posts under any category and people can react or comment on it. It could also be used as a stack overflow alternative, since it has the feature of marking the answer.
5. [Cyber attacks glossary at mozilla blog](https://blog.mozilla.org/en/internet-culture/cyberattacks-glossary-of-terms-ransomware-ddos/)
Build an Expense Tracker with Asp.Net Core MVC
Tags: webdev, dotnet, csharp
Published: 2022-07-28 03:48:16

In this video, we're building an expense tracker application from scratch. The main agenda behind this tutorial is to learn how to build an enterprise application with the Asp.Net Core with help of Syncfusion Component Library.

Syncfusion: https://syncf.co/3uJ70q2
Asp.Net Core UI components: https://syncf.co/3Ry1yA8
MVC UI Components: https://syncf.co/3az6yEd
Documentation: https://syncf.co/3zo3mVi
Community License: https://syncf.co/3zkisLM

{% youtube zQ5eijfpuu8 %}
Venturing into the world of Developer Experience (DX) | Docker Extension
Published: 2022-07-28 03:46:00

[Docker Extensions](https://www.docker.com/products/extensions/) lets you use third-party tools within Docker Desktop to extend its functionality. There is no limit to the number of extensions you can install. With Docker Extensions, you can seamlessly connect your favourite development tools to your application development and deployment workflows. You can even augment Docker Desktop with debugging, testing, security, and networking functionalities, and build custom add-ons using the Extensions SDK.

You can explore [the list of available extensions](https://hub.docker.com/search?q=&type=extension) in Docker Hub or in the Extensions Marketplace within Docker Desktop.

Melonnie is a Berlin-based Product Designer. She is currently working as a Senior Product Designer at Docker, Inc. She loves problem-solving and building simplified interfaces over complex systems. In her talk, Melonnie talks about Docker Extensions and ventures into the world of Developer Experience (DX).

Click the below image to watch the video.




[![Watch the video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4xfsxidq1dhelgu5qp8.png)](https://www.youtube.com/watch?v=A6iVQxvZWS0)


## Useful Links
- [A Curated List of Docker Extensions](https://collabnix.github.io/docker-community-extensions/)
- [Introducing Docker Extension](https://www.youtube.com/watch?v=BClJ0i9lXIY)
- [Introduction to Docker Extension](https://docs.docker.com/desktop/extensions/)
- [How to create your own Docker Extension](https://docs.docker.com/desktop/extensions-sdk/)
- [Create Your First Extension](https://docs.docker.com/desktop/extensions-sdk/tutorials/initialize/)
- [Minimal frontend extension tutorial](https://docs.docker.com/desktop/extensions-sdk/tutorials/minimal-frontend-extension/)
- [Minimal React extension tutorial](https://docs.docker.com/desktop/extensions-sdk/tutorials/react-extension/)
Where does css placed in html : 3 places for css
Tags: css, webdev, beginners, programming
Published: 2022-07-28 03:30:01

Article is originally published @ [bepractical](https://bepractical.tech/where-does-css-placed-in-html-3-places-for-css/)

Hey developers , in this article I am going to show you where does css can be placed inside your html file .

So let’s get started : )
Method to place css in html file

- External css
- Internal css
- Inline css

## External css
In this method , you have to write css in an external file and then link that css file in html file .

Let’s assume that you have made an `style.css` file in your html file directory , and wrote some css code in it . Then in html file you can link the css file like below example

```
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>My Home Page</title>
</head>
<body>

<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>

</body>
</html> 
```

`<link />` tag is used to link css files in html file . Attribute href is used to give location of css file .

Your style.css does not contain any html tags and file will look something like this

```
#banner{
  background-color: lightblue;
}

#banner p{
  color: navy;
  margin-left: 20px;
}
```

Let’s move toward the second method i.e., Internal css

## Internal css

This is the second method to place css in html file . In this method there is no need to make an external file for css and link it to the html file .

In this method css is placed inside the html file inside `<style>` tag of `<head>` tag like the below code .

```
<!DOCTYPE html>
<html>
<head>
<style>
#banner{
  background-color: lightblue;
}

#banner p{
  color: navy;
  margin-left: 20px;
}
</style>
<title>My Home Page</title>
</head>
<body>

<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>

</body>
</html> 
```

## Inline css

In this method all the css is applied in the style attribute of that tag like the example below . Style attriubte can contain any number of css properties .

Read full article here 👉 https://bepractical.tech/where-does-css-placed-in-html-3-places-for-css/
Welcome Thread - v184
Tags: welcome
Published: 2022-07-28 03:12:49

---
title: Welcome Thread - v184
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Kristen Bell saying "come on in"](https://media.giphy.com/media/KczqttEJqm55hE1ccU/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Which of the three research directions of AI+WEB security, AI model security, and malicious traffic detection is recommended?
Tags: security, webdev, python, cpp
Published: 2022-07-28 02:42:25

As an undergraduate student of computer science, I have the foundation to do web security. Now I am a master and I am ready to choose a research direction, but the entanglement in these three research fields is mainly due to the problem of producing research results. Also please give some comments, thank you.
How to execute Cypress Test Case in Docker Container
Tags: devops, docker, javascript, cypress
Published: 2022-07-28 02:37:00

How to execute Cypress Test Case in Docker Container

This blog covered how we can use the Docker container to run our Cypress tests suite.

Why Docker?
Developing apps today requires so much more than writing code. Multiple languages, frameworks, architectures, and discontinuous interfaces between tools for each lifecycle stage create enormous complexity.
Docker simplifies and accelerates your workflow while giving developers the freedom to innovate with their choice of tools, application stacks, and deployment environments for each project.

**To understand more about docker with cypress please follow the link**


https://qaautomationlabs.com/how-to-execute-cypress-test-cases-in-docker-container/
HTML Input: add plus and minus buttons with JavaScript (or jQuery)
Tags: javascript, jquery, html, webdev
Published: 2022-07-28 02:22:00

> This is a translation from my spanish version written on my personal blog: [https://viktormorales.com/diseno-y-desarrollo-web/html-input-agregar-botones-mas-y-menos-con-javascript/](https://viktormorales.com/diseno-y-desarrollo-web/html-input-agregar-botones-mas-y-menos-con-javascript/)

A customer asked me to add plus (+) and minus (-) button before and after an HTML Input of type "number" for his WooCommerce store.

## Add plus and minus buttons with jQuery
As the customer website is running on WordPress and as this platform has the library jQuery on it, I developed a solution using that library:

{% codepen https://codepen.io/viktormorales/pen/rNdyjzJ %}

## Add plus and minus buttons with JavaScript
So I was happy with the result but I wanted to code it in plain JS as well:

{% codepen https://codepen.io/viktormorales/pen/LYdyoLb %}

🍻 Cheers!