teleren/devto huggingface dataset:
Languages to learn Web development
Tags: webdev, web3, languages, programming
Published: 2022-09-19 16:10:20

Technology plays an integral part in our day-to-day lives. It surrounds us in the simplest of places to perform ordinary tasks and make room for great inventions. All the web pages and software that we use to make our lives easier are developed by Web Developers. However, the Web Development is still not clear to many of us, so let’s start there and learn more about which languages are required for Web Development.

## **1. HTML**
![HTML Logo](https://p.kindpng.com/picc/s/23-237381_java-html-language-logo-png-transparent-png.png)
HTML (_Hyper Text Markup Language_) is the most basic of all coding languages. If you are planning to develop a website or web app, HTML will provide you with a solid foundation for development.

## **2. CSS**
![CSS Logo](https://1000marcas.net/wp-content/uploads/2021/02/CSS-Logo.png)
CSS (_Cascading Style Sheets_) is a language that describe how to display HTML documents on screen, paper, or in other media. CSS enables designers to separate style from content.

## **3. JavaScript**
![JavaScript Logo](https://th.bing.com/th/id/OIP.8CuztOWUYzMlp6DOSMAdWwHaB2?pid=ImgDet&rs=1)
There is no doubt that JavaScript is the King of web development and probably the most popular language among web developers. The strength of JavaScript is not just it can run on browser and server using Nodejs. JavaScript contains _1 lakh+_ libraries. You can learn from [JAVASCRIPT](https://www.javascript.com/)

## **4. PHP**
![PHP Logo](https://th.bing.com/th/id/OIP.jss9RO1NMMokvXWlmNWJFgAAAA?pid=ImgDet&rs=1)
[PHP](https://www.php.net/) is one of the best programming languages when it comes to creating web applications. It's dynamic, server-side scripting language that makes it really easy to create fully functional web applications.

## **5. NODE.JS**
![NodeJs Logo](https://cdn.pixabay.com/photo/2015/04/23/17/41/node-js-736399_960_720.png)
[Node.js](https://nodejs.org) is an open-source, cross-platform, back-end JavaScript runtime environment that run on the V8 engine and executes JavaScript code outside a web browser.

## **6. RUBY**
![Ruby Logo](https://cheatsheet.dennyzhang.com/wp-content/uploads/2018/08/ruby.png)
[RUBY](https://www.ruby-lang.org/) is another programming language that is really great for web development. Similar to PHP and Python, Ruby is also easy to learn and go for beginners.

## **7. DJANGO**
![DJANGO Logo](https://www.djangoproject.com/m/img/logos/django-logo-negative.png)
[Django](https://www.djangoproject.com/) is a high-level Python web framework that enables rapid development of secure and maintainable websites. Built by experienced developers, Django takes care of much of the hassle of web development.


## **8. SQL**
![SQL Logo](https://lanetechnologysolutions.com/wp-content/uploads/2020/07/SqlServerless-5-1080x675.png)

SQL is a database computer language (Domain specific language) designed for the retrieval and management of data in a relational database. SQL stands for Structured Query Language.
groundcover is Live on Product Hunt!
Tags: apm, product, observability, ebpf
Published: 2022-09-19 16:03:46

Hey everyone!

We’re super excited to announce that we've just launched groundcover's free-tier APM for K8s on Product Hunt!

No engineer would question the importance of solid application monitoring in production. These tools help us sleep better at night, and solve that crazy sh*itstorm when it hits. And it always does.

Application monitoring solutions have taught us that we can have all the data we need to feel covered, all the time. Thing is, these solutions are so hard to integrate and they store so much data that they just can’t scale.

groundcover is here to disrupt the APM market and change the way these solutions work and operate, pulling together cutting edge technologies like [eBPF](https://www.groundcover.com/blog/what-is-ebpf).

Observability should be a tool to help companies scale and thrive. We make it effortless and scalable for developers, so they can focus on what really matters - building world-changing products.

With groundcover you can instantly get:

- Logs from all across your cluster.
- Metrics with mind-blowing granularity such as API latency, error rate, and throughput.
- Traces from protocols like HTTP, gRPC, Redis, Kafka, MySQL, PostgreSQL, and more.
- A map of all service dependencies.
- K8s infrastructure monitoring and tracking of K8s events.

Oh and we’re Prometheus-compatible, so if you’re working in Grafana we’re just a datasource away.

groundcover takes 1 minute to install on even the most heavy-duty K8s clusters.

Come check us out, and show us some support. We'd love to get your feedback!

https://www.producthunt.com/posts/groundcover
Stand UP: What are your goals for the week of 9/19?
Published: 2022-09-19 15:59:48

Ahoy, It's Talk like a pirate day, so What be ye goal for this voyage?

It's Monday, so what are your plans for this week?

- What are your plans for the week?   
- What are you building? 
- What will be a good end result by week's end?

**My Goals**
 
- Finish prepping a repo to help demo a side project. Almost done with this. (I think).
- Continue on the job search.
- Work some code challenges.
- Create some CSS art and blog about it.
- Blog on virtual/hybrid conferences I attended last week.
- Attend virtual events. One just got cancelled. 




```
-$JarvisScript git push
```
Sierpiński triangle
Tags: graphics, javascript
Published: 2022-09-23 07:23:39

---
title: Sierpiński triangle
published: true
date: 2022-09-19 09:46:00 UTC
tags: Graphics,JavaScript
canonical_url: https://drmsite.blogspot.com/2022/09/sierpinski-triangle.html
---

![Sierpiński triangle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5d8koe88gaaycqjm33om.png)

I was scrolling through TikTok a couple of evenings ago (I know, I'm probably far too old to do so, but now and again, there's gold!) and I came across the [following video](https://vm.tiktok.com/ZMFJCm8Rh/):

> <section> <a target="_blank" title="@flipperzer0" href="https://www.tiktok.com/@flipperzer0?refer=embed">@flipperzer0</a> <p></p> <a target="_blank" title="♬ Levels - Live Session - Sarah Coponat" href="https://www.tiktok.com/music/Levels-Live-Session-7052173894207145986?refer=embed">♬ Levels - Live Session - Sarah Coponat</a> </section>

 <script async src="https://www.tiktok.com/embed.js"></script>

Anyway, inspired to give it a go, I worked up a p5 test, and it works!

```javascript
const points = [
  [-75, 130],
  [-150, 0],
  [-75, -130],
  [75, -130],
  [150, 0],
  [75, 130],
  [75, 130],
]

const rand = (int) => Math.round(Math.random() * int)

const width = 600
const height = 600


function setup() {
  createCanvas(width, height)
  noStroke()
}

function draw() {
  background(0)
  fill(255, 255, 255)
  text(points.length, 50, 50)
  points.forEach(point => {
    circle(point[0] + (width /2), point[1] + (height /2), 1)
  })
  populateArray(10000, points)
}

const populateArray = (count, arr) => {
  for(let i = 0; i < count; i++){
    const target = points[rand(6)]
    const source = points[points.length - 1]
    const point = [
      Math.round((source[0] + (2/3) * (target[0] - source[0]))),
      Math.round((source[1] + (2/3) * (target[1] - source[1])))
    ]
    if(points.indexOf(point) === -1){
      points.push(point)
    }else{
      console.info('Duplicate removed')
    }
  }
}

```

~~For some unknown reason, and only every so often, the pattern goes wrong; does anyone have any idea why or how to fix it?~~ 

It's fixed now, you can find it [here](https://annoyingmouse.js.org/WireFrameJS/000-MISCELLANEOUS/SIERPINSKI/).
How to Make an eCommerce Website Using Html Css Js Tutorial 2022
Tags: css, javascript, beginners, tutorial
Published: 2022-09-19 15:52:18

{% youtube iHsVNWmcBAs %}

How to Make an eCommerce Website Using Html Css Js Tutorial 2022

This video will show you how to create (mobile-first) responsive ecommerce website html css javascript

[Github Repo](https://github.com/codewithsadee/booken)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/11Y3dz_jIa0tV3I7YKy3SLKUwjohDTRxG/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
5:01 - File structure
5:30 - Project initial
11:16 - Header
30:22 - Hero section
37:45 - Feature section
42:28 - Featured collection section
55:40 - Offer section
59:17 - Popular collection section
1:11:37 - Blog section
1:19:22 - Footer
1:29:14 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
5 embedded software architecture pitfalls
Tags: opensource, microservices, architecture, luos
Published: 2022-09-19 15:42:37

💬 “Every embedded system should have a software architecture that guides the developers on what they are building.” - Jacob Beningo

⏩ https://www.embedded.com/5-embedded-software-architecture-pitfalls/

At Luos, we use microservice architecture to gain agility in the development of embedded projects.

Check out this great article written in embedded.com giving you five tips to improve your embedded systems architecture.
Corporate Policy
Tags: adventofcode, alphabet, animation
Published: 2022-09-19 14:29:28

## [Advent of Code 2015 Day 11](https://adventofcode.com/2015/day/11)

## Part 1
1. Subtleties in the password rules
2. Practicing my ABC's

### Subtleties in the password rules
> one increasing straight of at least three letters

Could be four?
Could be five?

> at least two different, non-overlapping pairs of letters

Could be three?

Are these passwords valid?
- `aabbccde`: no `i,o,l`, three different, non-overlapping pairs, one increasing straight of at least three letters
- `abcdeeff`: no `i,o,l`, two different, non-overlapping pairs, one increasing straight of five letters

Good to know when determining my new password.

### Practicing my ABC's
Let's try figuring this out manually, frame-by-frame.

I was pretty certain I found it:
![Finding what I thought was the next password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q54kkffuba6yajm0dgzo.gif)

Sadly, that's not the correct answer to Part 1.

I re-traced my steps, and realized I overlooked an earlier password:
![Finding the actual next password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwmwgq0utln5qshe8zpp.gif)

Thankfully, that *was* the correct answer to Part 1!

## Part 2

### I think I already know this answer!
Because, thanks to my overlooking Part 1's answer, I already discovered it!

Indeed, the password I thought was Part 1's answer is Part 2's answer!

## I did it!!
- I solved both parts!
- Unknowingly, in reverse order!
- Without writing an algorithm, (un?)fortunately!

That's three parts in a row that I haven't written an algorithm to solve a puzzle.

I realize that is often the purpose of these puzzles: to do so using a codified algorithm.

But, as my series title states:
- My sole intent is to solve them
- Not to solve them solely by writing an algorithm

Because sometimes the most efficient - or fun - way to solve these is not by writing, but by some other equally creative means!
Custom calendar using HTML, CSS & JavaScript
Tags: javascript, beginners, webdev, programming
Published: 2022-09-19 15:12:38

Hello Guys! Welcome to [Coding Torque](https://codingtorque.com). In this blog, I'm going to explain to you how to make a custom calendar using HTML, CSS, and JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

## **Let's cover HTML Part**
We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML `<head>` tag. fontawesome is a library that is used for icons in a website.

```html
<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
```


Now let's import the fonts using Google Fonts API. Below is the code for `Poppins` Font. Paste the below code in `<head>` tag.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
```

```html
<div class="container">
    <div class="calendar">
        <div class="month">
            <i class="fas fa-angle-left prev"></i>
            <div class="date">
                <h1></h1>
                <p></p>
            </div>
            <i class="fas fa-angle-right next"></i>
        </div>
        <div class="weekdays">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
        </div>
        <div class="days"></div>
    </div>
</div>
```


[continue reading](https://www.codingtorque.com/2022/09/custom-calendar-using-html-css.html)
Ternary Operator in JS
Published: 2022-09-19 14:24:50

Ternary operator is a short-hand form in term of condition. 

For example, 
``` JavaScript

const score = 80;

if(score >= 80) {
console.log("Passed this step.");
} else {
console.log("Do it again.");
}

```

But re-write in term of the ternary operator.
``` JavaScript

score >= 80 ? console.log("Passed this step."): console.log("Do it again.");
```
Music Monday — What are you listening to? (Live Music Edition)
Tags: watercooler, discuss, music
Published: 2022-09-19 15:02:52

_cover image source: [classicrockroller](https://giphy.com/classicrockroller)_ 

**This week I wanna put the focus on live music! Who's your favorite live band? Or maybe it's a solo performer? Tell us about the last live show ya went to. Maybe there's a specific recorded live show (album or video) that ya wanna share with us. Whatever angle ya take, make sure the focus is on live music. Shoutout to @citizen428 for suggesting this prompt!**


![Elton John dressed up in colorful feathers, hiding his face behind a feathery hand fan before flinging it over his shoulder to expose his face.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsankz4z0dhc7zasno5x.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

***

So, what kinda live music are ya into? _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

I look forward to listening to y'all's suggestions! 👂 🎶
Data Science 101: Install miniconda and rstudio on a Mac
Tags: datascience, miniconda, rstudio, quant
Published: 2022-09-19 15:02:44

So, you want to start your Data Science journey to become a Quant developer but you have a Mac and you're not sure how to configure your environment to install miniconda and rstudio? Stay tuned, this is your post.

Step 1: install **Xcode Developer Tools** by running `sudo xcode-select --install` (you need at least Xcode 11.4) 

Step 2: download and install **rstudio** from [its website](https://www.rstudio.com/products/rstudio/download/#download) but do not open it yet.

Step 3: donwload **miniconda** from [its website](https://docs.conda.io/en/latest/miniconda.html) and follow the wizard steps.

> with miniconda installed now you have a new command to use: `conda`. The idea behind conda is to create isolated environments where you can install not only different pypi libraries _(as venv or virtualenv does on Python)_ but also install different versions of Python (or R, etc). This way you can create a conda env with python 2.9 and other conda env with python 3.10 on it.

Now it's time to open the **Terminal** to create a new conda env for **R** but first, to get the latest version we need to set the right channel.

`conda config --add channels conda-forge`

then you need to set the priority level as follows:

`conda config --set channel_priority strict`

Note: to undo this changes you can check [these answers](https://stackoverflow.com/questions/48547046/resetting-conda-channel-priorities)

> At the time I'm writing this post default channel does not have R version >= 4.0 you can check it by running `conda search r-base`

Now you are good to create a new env like this:

`conda create -n r-env r -y`

this way you are creating a conda env called `r-env` which by default got latest `r` installed and `-y` flag to accept the terms.

to activate this env you should run:

`conda activate r-env`

> once you finish your job you can deactivate it by doing:
> `conda deactivate`
> and if you want to delete this env you can do it this way:
> `conda env remove -n r-env`

Now you are good to open rstudio and start working from there.

Happy coding!

PS: if you are running R on a M1 Mac, check [this page](https://mac.r-project.org/) for more information.
How To Set Up an OpenVPN Server on Linux Server (Ubuntu)
Tags: ubuntu, linux, devops, openvpn
Published: 2022-09-19 14:54:04

### You can easily follow this steps to have your own VPN on your server.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lamjumzz8wdsoqd48l3.gif)
1 . Install docker in your server
```
sudo apt install docker.io
```
2 . Make a directory with this command
```
mkdir /opt/openvpn
cd /opt/openvpn
```
3 . Pick a name for the `$OVPN_DATA` data volume container
```
OVPN_DATA="ovpn-data"
```
4 . Initialize the `$OVPN_DATA` container that will hold the configuration files and certificates. (replace `VPN.SERVERNAME.COM` with your server IP)
```
docker volume create --name $OVPN_DATA
docker run -v $OVPN_DATA:/etc/openvpn --rm kylemanna/openvpn ovpn_genconfig -u udp://VPN.SERVERNAME.COM
docker run -v $OVPN_DATA:/etc/openvpn --rm -it kylemanna/openvpn ovpn_initpki
```
5 . Start OpenVPN server process
```
docker run -v $OVPN_DATA:/etc/openvpn -d -p 1194:1194/udp --cap-add=NET_ADMIN kylemanna/openvpn
```
6 . Take a rest, drink water, walk :))

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

7 . Generate a client certificate without a passphrase (replace CLIENTNAME with what you want!)
```
docker run -v $OVPN_DATA:/etc/openvpn --rm -it kylemanna/openvpn easyrsa build-client-full CLIENTNAME nopass
```
8 . Retrieve the client configuration with embedded certificates
```
docker run -v $OVPN_DATA:/etc/openvpn --rm kylemanna/openvpn ovpn_getclient CLIENTNAME > CLIENTNAME.ovpn
```
You can also use a trick for making ovpn 
Make a bash file, name it `script.sh` and wirte these in it
```
OVPN_DATA="ovpn-data"
docker run -v $OVPN_DATA:/etc/openvpn --rm -it kylemanna/openvpn easyrsa build-client-full $CLIENTNAME nopass
docker run -v $OVPN_DATA:/etc/openvpn --rm kylemanna/openvpn ovpn_getclient $CLIENTNAME > $CLIENTNAME.ovpn
```
Now if you want to make ovpn for 10 people you can run this command
```
for i in {1..10}; do export CLIENTNAME=user$i && sh script.sh ; done
```
9 . Now you can find your .ovpn file in `/opt/openvpn`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei9hdz5v02wbz2lydw9w.gif)
10 . (Optional) Just copy files to your machine ,go to your local machine and run this command 
```
scp root@<your-server-ip>:/opt/openvpn/*.ovpn /home/azibom
```

If you have any questions, you can ask here:)
Share with your friends if you like
Using a Headless CMS to send email newsletter?
Tags: help, headless, cms, javascript
Published: 2022-09-19 14:44:27

I'm exploring if I can use a Headless CMS to manage the content for a regular email newsletter. I havn't discovered any tools that will allow me to quickly build this out.

Keen to know if anyone has tried to build this and what their stack or setup is? My ideal process:

1. Create new post in Headless CMS such as Sanity to be published on certain date.
2. Content is compiled into a HTML newsletter automatically (an email builder which allows you to output certain content where you want it including title, body etc would be perfect).
3. Email is scheduled for send and ultimately sent.

Note: A Headless CMS allows you to 'decoupled from the presentation layer' meaning that the content is front-end agnostic, meaning that your content is raw and can be published anywhere, through any framework.
React Hooks and Component Libraries
Published: 2022-09-19 14:23:40

To Add:
style components


React 
useState - declares a 'state variable' whose value can be preserved _between_ function calls. 
```
const [count, setCount] = useState()
```

useEffect - call a function (side effect) after the component has rendered
```
useEffect(() => {
    fetch("http://localhost:4000/leaders")
    .then((r) => r.json())
    .then(setUserResults);
    },[])
```
 

React Router DOM Library
useNavigate - navigate the broswer programmatically

Supplementing {Router, Routes, Route}
useParams - returns an object of key/value pairs of the dynamic params from the current URL that were matched by the <Route path>.
Router, Routes, Route
C++ haqida boshlang'ich tushunchalar
Tags: beginners, programming, cpp, tutorial
Published: 2022-09-19 13:47:04

**C++** dasturlash tili IT olamida oʻz oʻrniga ega boʻlgan dasturlash tilidir.C++ dasturlash tili **C** tillar oilasiga mansub bo'lib, dasturlashga endi qadam qoʻygan ilmiy jihatdan yosh dasturchilarga C++ dasturlash tilini oʻrganish maslahat beriladi.
  C++ dasturlash tilida yozilgan eng sodda dasturlardan birini tahlil qilib bermoqchiman.

Masalan

```cpp
#include <iostream>
using namespace std;
int main(){

cout<<"Hello World";

return 0;
}
```
Yuqorida C++ tilida yozilgan dastur bo'lib,Ushbu kodda yozilgan bazi element va operatorlar bilan tanishtirib o'taman.
  1.`#include <iostream>`- ushbu ko'rinishda C++ da kutubxona e'lon qilamiz.Har bir operatorning o'z kutubxonasini kodning yuqori qismida yozish kerak bo'ladi.Ushbu kod bo'yicha tahlil qiladigan bo'lsak `cout` operatori kutubxonasi `iostream`
kutubxona e'lon qilishning umumiy shabloni esa `#include <>` ko'rinishida va kutubxona nomini `<>`lar orasiga yozishim talab etiladi.C++ da ko'p ishlatiladigan kutubxonalarni sanab o'tsam,`iostream,iomanip va cmath` kabi kutubxonalardir
 2.Kod yozishda ishlatilgan `int main()` va `return0` har bir C++ tilida yozilgan kodda mavjud bo'ladi va siz ular haqida siz keyinchalik **funksiyalar** mavzusida chuqurroq tanishib olishingiz mumkin.
  `cout<<"Hello World";`
 `cout<<""` ushbu shablon C++ dasturlash tilida chiqarish operatori deyiladi va **console**ga `""` ushbu qo'shtirnoqlar orasiga nima yozadigan bo'lsak shu holatda _terminalga_ chiqarib beradi.

```
Hello World
```

P.s Yuqorida C++ dasturlash tili bilan qisqacha tanishtirib o'tdim.


### [Telegram](http://t.me/meyliyev_blog)
 
                     

### [GitHub](http://github.com/JamolMeyliyev)
JS & CSS snippet to detect and style if dark mode
Tags: javascript, css, snippet, webdev
Published: 2022-09-19 13:46:27

This JavaScript snippet detects if the user is in dark mode. And if so, it returns true.

```
const isDarkMode = () =>
  globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Usage
isDarkMode();
```

The `prefers-color-scheme` CSS media feature lets you detect if the user's system is set to dark mode or light mode.

```
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}
```