teleren/devto huggingface dataset:
Intro to 11ty
Published: 2022-03-13 23:11:46


What is 11ty?  It is a static site generator that converts markdown, Nunjuck, or JS files into HTML and CSS.  This is great for those new to web development and just want to create a site as fast as possible. 

# Hello World
To get started, open terminal to a directory you’d like the site to exist. Enter the following commands, `touch Readme.md` and `code .`. This should create the a markdown file and open vs code.  To get started add a file header such as `# Hello There` and some basic text below. like what I have here.  To generate html it takes 2 commands, `npx @11ty/eleventy` and `npx @11ty/eleventy —serve`.  This will generate a directory called __site white will contain html and —serve will cause a server to spin up.  Open the localhost port displayed and go to `/readme/index.html` to see your site!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6adchjt74d0ajc1xn8da.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p7fdfmzwhdt0m70v5co.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ykvqu80momwungxy7l4.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy6yz16s8zwj74btvyf3.png)
    
# Template Blog

Say you want a more professonal looking site without having to do a lot of extra work, you’re in luck!  11ty has a community that has created templates that are available at [this site](https://www.11ty.dev/docs/starter/).  For this example, we will use the [eleventy-base-blog](https://eleventy-base-blog.netlify.app/), make sure to go to [this repo](https://github.com/11ty/eleventy-base-blog) and select the **USE THIS TEMPLATE** button to make a copy of the project in your namespace.

Once you have cloned and pulled the repo to your machine, open the folder in VS Code.  You want to look in the posts directory and here you is where you can add/update posts.  I decided to clear out the posts and change them with my own dev.to posts.  When ready to view the code again there are two commands to run: `npx eleventy` and `npx eleventy —serve`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4arz13i3zrqkxzb7um9h.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byweaw8zbej08nov93ak.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2iv65qhvxjyhrhtqx1zk.png)
   

Feel free to add more files and get more creative styling!  Now that you know the basics, what are you waiting for, start coding!

**Links:**
**11ty Hello World Repo:** [https://github.com/liljimmyk99/11ty-Hello-World](https://github.com/liljimmyk99/11ty-Hello-World)
**11ty Hello World gh-page:** [https://liljimmyk99.github.io/11ty-Hello-World/](https://liljimmyk99.github.io/11ty-Hello-World/)
**11ty Basic Blog Repo:** [https://github.com/liljimmyk99/eleventy-basic-blog](https://github.com/liljimmyk99/eleventy-basic-blog)
OpenPGP Proof
Published: 2022-03-13 23:10:49

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/AED52F32870CB1D3B7A4670DAB75E92968566C6E) to [this dev.to account](https://dev.to/scuba323). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:AED52F32870CB1D3B7A4670DAB75E92968566C6E]
AudioSign: Converting audio to animated sign language (P1)
Tags: hackwithdg, showdev, ai
Published: 2022-03-13 23:05:18

### 📝Introduction
Having a category solely for expressing ideas you can't yet fully achieve is something new & it's a great addition to the hackathon space.

The applications of AI have always been interesting so naturally I had a couple of ideas to explore, some of which I would have loved to build but a month would not be enough to accomplish due to my limited experience. So, I decided to build something light and then write about the more technical project. 

Eventually, I landed on writing about a project that aims to help the deaf have better interactions through signing.

### 💭 My Deepgram Use-Case
In the next post I'll be talking about how deepgram could help in achieving this.
Learning Terminal (Notes) Day #4 [Standard output]
Tags: beginners, linux, terminal, productivity
Published: 2022-03-13 22:09:35

##Standard output

I just learned something very cool! You can save the command result just typing `> name_archive.txt` next to the command, ok this is not work for every command but works with the commands that provide a text output.

**Example**: If you want a list of your directories and save what do you have in just type `ls directory_name > file_name.txt` (_I've just learned how to specific code here too ^^_)

This command overwrite the text file every time you use it (if use the same file name) if you want to add text but no overwrite use the operator _>>_ instead of _>_

[Here let you more information about all of this](https://linuxjourney.com/lesson/stdout-standard-out-redirect)

##Pipe operator |

Pipe operator allows you run a command that his standard out put change as standard input to another command and this allow us to make another features.

**echo**: Generate an standard output from anything we type in terminal

**Example**: `echo "Hello World"`

With standard out put we can save the command's result to a file text but with pipe we can get that result and give it to another command like cat to visualize the result in out console command without save it.

**Example**:  `ls -lh | less`

And if we want to save the result in another file like before but after seeing it with less we just to have add another pipe operator but with command **tee**.

**Example**: `ls -lh | tee output.txt | less`
(Like this generate the file first and then visualize it with less)

We can add filters too like sorting filter

**Example**: `ls -lh | sort | tee output.txt | less`
Storing booleans in mySql database as integers/boolean/text for true and false?
Tags: database, mysql, html
Published: 2022-03-13 22:04:36

I came across an interesting issue. I've had a habit a long time ago to store my boolean values as 1 and 0 in the database, it has many advantages. However I came across a silly trouble, that took lot of my free time to work out. (I'm the kind of coder, who has a backlog but able to work on an issue for weeks if I find the logic to be dodgy, sometimes even change the code back to database level if I feel that'll help me in the long run.) 
The trouble is - or correct me if I'm wrong, I looked it up and found no solution - that a html checkbox doesn't understand 0 and 1, it returns false for 1. 
I've got lots of switches in my application, that can be turned on and off so the best is to handle this case for once and for all. I am considering testing storing simply boolean values and see what the api returns to the frontend. 
How do you store your booleans?

___
Update: I've tested the mysql boolean, and it returns 0 or 1 LOL.

___
Update2:
Sending true/false to the database is totally cool, returns no error, stores as 1 and 0. So it doesn't need to be 'translated back' to int from true/false.
output.target vs. output.chunkFormat in Webpack5
Tags: webpack, bundler, javascript, node
Published: 2022-03-13 21:48:10

- `output.target` ( **default:web** [_if no browserlist installed_] | _[other values](https://webpack.js.org/configuration/target/)_) –  meant to denote the output (bundle) **format** ;
> NOTE : the `target` is relatively global configuration , may be overwritten by `output.chunkFormat`, unless the `.chunkFormat()` set to false (default) to accept global target configuration !

- 'output.chunkFormat' (**default:false** _other values:  'array-push' | 'commonjs' | 'module' | <any string>_) – **by default it listens for global of** `output.target` _unless specified other than default value_ .

---

**<u>ENQUIRY</u>** : if you found it useful, please upvote [this](https://github.com/webpack/webpack.js.org/issues/5917)
Building networks
Tags: 100devs, programming
Published: 2022-03-13 21:13:53

Community i am looking to network with software developers who are currently working in the field. This is a requirement for my class. If you have *15 mins*, i would appreciate your time.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dabuyo30a7m263zq8bcn.jpeg)
"Squashing" commits
Tags: git, github
Published: 2022-03-01 18:06:41

## Why to squash commit?
In this article, we will cover how to squash commits but before that let's understand why would we want to do this. The most beneficial aspect of squashing commit is during the PR review where instead of having multiple commits to check we will have only one:

**PR with 4 commits**
![Pull Request with 4 commits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1djzpzrnlyy26ci2fjx.png)
In the above example, we could have only the commit message "Created component Main".
## Squashing the commit
First let's check how many commits we will have to squash:
```git log```

![Git commits history](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxf13b4xh6kw7nwe9kxj.png)
In this example, we have 4 commits in our branch develop. Let's squash them with
```git rebase -i HEAD~4```

This will open our default editor with the following content:
```
pick 8bfae95 Created component Main
pick 614f223 Created style for compoent Main
pick f94c037 Bugfix on component Main
pick 5f23279 Changed some styles on component
```
We have a legend explaining the options available here but for the squash just leave the first line with "pick" and change all other ones to "squash" or "s". 
![Git commits listed on rebase-todo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw1i122rkwtdv55vcmbr.png)
Save your file and the next file with the commit messages will appear:
![List with git commit messages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knzdm4xyxjln5ok4bel7.png)
In our case we'll exclude all messages and leave only the first one:
![List with git commit, now with only 1 commit message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luiv4oz2kcbwe1ohajza.png)
After saving your file we now have only one commit in our local branch:
![Git log with one commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqt7cqnxyb8ii5porc6y.png)
Now let's push this to create our new PR - the -f here was used because now we are behind the remote branch:
```git push origin develop -f```
And now we have a PR with only one commit :)
![PR with only one commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21yn7p4ybkrrtf1xzujj.png)
Some lines from me - Web Development for Toddlers
Tags: beginners, webdev
Published: 2022-03-13 19:52:56

I know the title's clickbait, but since I've been writing web applications for a couple of years I think it's about time I give back to the community.

If you'd like to follow along with me through these guides, we'll end up writing apps in HTML, CSS, JavaScript, Vue.js, Laravel with MySQL and Firebase and will host them over Netlify, Firebase (yes it does that as well, in case you didn't know) as well as boot up an Ubuntu instance with LEMP (that's Linux, Nginx, MySQL, and PHP).
You could totally ignore these if they seem too foreign to you. We'll catch up with all of them as we progress.

## So what's the purpose of this article

You could skip this if you'd like, but I'd like to present my views on why you should learn to make web applications and why to choose the stack that I work with.

I consider writing code a fun activity. People frequently ask what would you be doing if money wasn't a factor (which is a very unreal scenario considering that we live in a capitalist world), and my answer would be, ... I'd be writing code.

If writing code doesn't spark something in you, then it'd be just another maths class for you (assuming you didn't like all mathematics lessons lol).

And if you're still here, then why choose web development?
Why not Android, iOS, or systems applications?

Should you rather be designing web interfaces in Figma or Adobe Illustrator?
Should you rather be using WordPress to build the blog you want?
Should you rather use a landing page tool just to show some contact information or your photography portfolio?
Should you rather be using Shopify or WooCommerce to build your e-commerce store?

Or do you want to do it yourself? Want to go through writing thousands of lines of code, in various languages, staring at the screen for hours while stuck on a single bug.
Would it tire you? Do you still want to do it? Do you still have that spark left?

And if yes, then we'll start with HTML in the next part of this series!

[Link to part #2 of this series](https://dev.to/devsaurabh/web-development-for-toddlers-2-introduction-to-html-3e4m)
Top 15 libraries you should use for every Node Express backend project.
Tags: node, expres, javascript, typescript
Published: 2022-03-13 18:01:29

Let's take a look at the top 15 libraries you should consider using for your next Node/Express backend project. 


#Security 
- [helmet](https://www.npmjs.com/package/helmet)
- [express rate limiter](https://www.npmjs.com/package/express-rate-limit)
- [xss-clean](https://www.npmjs.com/package/xss-clean)
- [express-validator](https://express-validator.github.io/docs/)
- [cors](https://www.npmjs.com/package/cors)


#Compression
- [compression](https://www.npmjs.com/package/compression)


#Caching
- [redis](https://www.npmjs.com/package/redis)
- [apicache](https://www.npmjs.com/package/apicache)


#Logging
- [winston](https://www.npmjs.com/package/winston)
- [bunyan](https://www.npmjs.com/package/bunyan)
- [morgan](https://www.npmjs.com/package/morgan)


#Performance Optimization
- [cluster module](https://nodejs.org/api/cluster.html)
- [pm2](https://www.npmjs.com/package/pm2)


#Environment Variables
- [dotenv](https://www.npmjs.com/package/dotenv)
- [cross-env](https://www.npmjs.com/package/cross-env)
Longest Strictly Increasing Then Decreasing Sublist
Tags: cpp, algorithms, programming
Published: 2022-03-13 17:59:55

# Description

You are given a list of integers `nums`. Return the length of the longest sublist such that its length is at least `3` and its values are strictly increasing and then decreasing. Both the increasing part and the decreasing part must be non-empty.

**Constraints:** 

- `n ≤ 100,000` where `n` is the length of `nums`

## Example 1

### Input

```
nums = [7, 1, 3, 5, 2, 0]
```

### Output

```
5
```

### **Explanation**

```
The sublist [1, 3, 5, 2, 0] is strictly increasing then decreasing.
```

---

## Example 2

### Input

```
nums = [1, 2, 3]
```

### Output

```
0
```

---

## Example 3

### Input

```
nums = [3, 2, 1]
```

### Output

```
0
```

---

## Example 4

### Input

```
nums = [1, 2, 1, 1]
```

### Output

```
3
```

---

# Intuition

- increase array
    - `inc[i]`: increase length from `0` to `i`
- decrease array
    - `dec[i]`: decrease length from `i` to `end`

# Implementation

```cpp
int solve(vector<int>& nums) {
    int n = nums.size();
    vector<int> inc(n, 1), dec(n, 1);
    // inc[i]: increase length from 0 to i
    for (int i = 1; i < n; i++) {
        if (nums[i] > nums[i - 1]) {
            inc[i] = inc[i - 1] + 1;
        }
    }
    // dec[i]: decrease length from i to end
    for (int i = n - 2; i >= 0; i--) {
        if (nums[i] > nums[i + 1]) {
            dec[i] = dec[i + 1] + 1;
        }
    }
    int res = 0;
    for (int i = 0; i < n; i++) {
        if (inc[i] > 1 && dec[i] > 1) {
            res = max(res, inc[i] + dec[i] - 1);
        }
    }
    return res;
}
```

## Time Complexity

- Time: O(n)
- Space: O(n)
Bitcoin Hacker?
Tags: fiction, copywriter, bitcoin
Published: 2022-03-13 17:52:22

Ben's finally getting married! He's been a "shag them and leave them" kind of guy since freshman year in college. I can't believe it even though I just got home,  jeans covered in glitter from the stripper at his bachelor's party.  _Damn, it's really happening._ 

Feeling a little bit tipsy but way too edgy to sleep, I play around with the dapp I'm currently building. Solidity - what a novel concept. 2 hours in and I can barely keep my eyes open. Alright..time to call it a night.

I wake up with a pounding headache, grab some tylenol & orange juice, time to check my coins. I log in to my wallet and almost spill juice all over my keyboard. "Holy shit!! What the hell?!" 500000 BTC and 100+ NFTs including 15 bored ape guys? Is this some kind of a joke?
![Bored Ape Yacht Club NFT #8585 sold for a breathtaking 696 ETH ($2.7 million)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2d3vhsbnmwzxirmdrq1.png)
I blink rapidly. Log out and log back in. Yep, still there. Someone's gotta be messing with me. I check the address. The numbers are unfamiliar. Wait!...this isn't my wallet.

But..how's this even possible? Thoughts swirling..how did I get access? 
_Holy shit! Did my drunken binge suddenly turn me into the 1st Bitcoin hacker? Should I report this? Transfer everything to my wallet? I mean anyone who has this kind of money must be into some really bad shit right?_
Traversing a DOM tree
Tags: javascript, html, programming, beginners
Published: 2022-03-13 17:51:43

There was a need at work to apply inline styles to each DOM element in a page.This was a rare occasion to actually traverse a tree, an exercise many of us have done, I am sure, to practice for interviews or as part of homework.

My solution was as follows

```
const app = document.querySelector("#app");

const inlineStyles = (node) => {
  const clone = node.cloneNode();
  const computedStyles = window.getComputedStyle(node);
  Object.keys(computedStyles).forEach((key) => {
    clone.style.setProperty(key, computedStyles.getPropertyValue(key));
  });

  return clone;
}

function traverseDOM(node) {
  if (!node) {
    return;
  }

  const updatedNode = inlineStyles(node);
  for (let child of updatedNode.children) {
    const updatedChild = traverseDOM(child);
    updatedNode.appendChild(updatedChild);
  }

  return updatedNode;
}
```

The operation performed on each node is `inlineStyle`. It gets the computed styles of a node and applies them as inline styles. 

This is a DOM tree so it is not built in a specific order and each node has many children, so it is not a binary seach tree.Were it a binary search tree, then our traversal order would be pre-order; We perform the operation on the root node first and then traverse on the children from increasing index position, i.e. from left most to right most.
6 trendy UI /UX designs that make your website modern
Tags: design, showdev, ux, webdev
Published: 2022-03-13 17:38:16

At the beginning of the new year, we noticed new UI/UX designs raised, In this article, I will show you 6 trends of UX/UI designs , that make your website modern and elegant. 

- **Big and bold  typography:**
The big and bold typography became more trendy in 2022, many designers prefer to make the hero or main section with big bold typography, to capture the attention of their users and to communicate their messages effectively.

![Big and bold  typography](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jup3ozm6m2nnk5ph6gxr.PNG)


- **Advanced cursor interactions:**
The user usually looks at the spot the cursor is placed. for that, change the shape and size of cursors, add smart and unique interactive animated effects, that react to this cursor, to make a good user experience

![Advanced cursor interactions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvhar6333wsmo8643dmf.PNG)

 - **Custom Illustrations**
The use of custom illustrations has become more popularly. By using them, you can tell a story that influences the user experience and explains products and services. Additionally, they create a friendly and inviting environment that ensures a better user experience.

![Custom Illustrations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4jc3bzg0r29s254j6qs.PNG)

- **Dark Mode:** the majority of websites and applications have a dark mode because it makes them look modern and elegant, also improves the readability of text  ,besides to  reduces blue lights

![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24plp6a3kmehz5ckcgl0.PNG)

- **animation** is one of the most trendy UI/ UX designs, nowadays because it improves user immersion and experience, for that, add it to websites and mobile applications to make your content more interesting and fun.

![animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttzeghp1fgdo6pdp0o3s.PNG)
If you enjoyed this article you can follow me on [Twitter](https://twitter.com/chemlali_assia) where I Tweet about Web Development Tips & Resources.
Hosting website from centos
Published: 2022-03-13 17:15:09

- Install http using command
`sudo yum install httpd`

- check status of server
 `systemctl status httpd`

- start the httpd service
 `sudo systemctl enable httpd`
 `sudo systemctl start httpd`

the go the /var/www/html/
 `cd /var/www/html`

create new index.html 
 `vi index.html`

write html code here and save the code

now your site is hosted in your ip or localhost.
How a voxel engine will drive multi-modal travel in the UK
Published: 2022-03-13 17:14:07

https://www.youtube.com/watch?v=S7Q9q56kFlc

Stations and transportation hubs shall be digitised in 3D with 10 cm spatial resolution using Lidar and depth cameras, across England from 2023. Creating the [digital twins of station areas](https://polaron3d.com/Features/) with the Help of the [Polaron World Engine](https://polaron3d.com/). The goal is to improve situational awareness and thereby elevate the multimodal travel experience for passengers. Harmonizing long-distance train and air travel, focusing on current and future micro mobility options. Travelling at a low cost with excellent customisation. The Polaron engine connects through 5G to passenger phones for centimetre-accurate interior guidance:
- Always take the correct exit;
- As the train approaches the station, stand near the door;
- Routes tailored to one's needs, whether it luggage or impairment;
- Increase activity and reduce CO2;
- Plan a coffee takeaway route and timing.

https://www.youtube.com/watch?v=1eEJq6HSZmk

5G enables low-latency 3D walkthroughs and AR guided visualisations overlay on smartphone camera photos. Large bandwidth to allow smartphone cameras to accurately relay back station views. So the data will show blocked entrances or malfunctioning escalators. For precise and hassle-free routes for the next hours and day.
Create Drawer With Title Header in Flutter
Published: 2022-03-13 17:08:35

## Create Scaffold 
At home class, create a scaffold widget and inside that widget add drawer.
```
Scaffold(
	drawer: const CustomDrawer(),
	body: ....
)
```

## Create CustomDrawer
```
...
Widget build(BuildContext context) {
	return Drawer(
		child: ListView(
			children: [
				SizedBox(height: 80, child: 
					child: DrawerHeader(
						child: Image.network("url", fit: BoxFit.contain),
					),
				),
				ListTile(
					onTap: () {}
					horizontalTitleGap: 0.0,
					leading: Icon(Icons.add, color: Colors.black, height: 16),
					title: Text("Add New", style: TextStyle(color: Colors.black),),
				),
				const Divider(
					height: 1,
					thickness: 1,
				),
				 const Padding(
					 padding: EdgeInsets.all(16.0),					
					 child: Text('Header'),
				 ),
				ListTile(
					onTap: () {}
					horizontalTitleGap: 0.0,
					leading: Icon(Icons.add, color: Colors.black, height: 16),
					title: Text("Add New", style: TextStyle(color: Colors.black),),
				),
			]
		),
	);
}
...
```

Follow me @slimpotatoboy : [Twitter](https://twitter.com/slimpotatoboy), [Instagram](https://www.instagram.com/slimpotatoboy/)