teleren/devto huggingface dataset:
Weekly web development resources #82
Tags: weekly, webdev
Published: 2021-07-28 06:35:19



______

##[excalidraw-claymate](https://github.com/dai-shi/excalidraw-claymate)
[![excalidraw-claymate](https://wweb.dev/weekly/content/82/excalidraw-claymate.jpg)](https://github.com/dai-shi/excalidraw-claymate)
A tool based on Excalidraw to create stop motion animations and slides.

______

##[SVG Gobbler](https://www.svggobbler.com/)
[![SVG Gobbler](https://wweb.dev/weekly/content/82/svggobbler.jpg)](https://www.svggobbler.com/)
A browser extension to download icons, logos, and vector SVGs from any site.

______

##[Back to the Future with RSS!](https://ncase.me/rss/)
[![Back to the Future with RSS!](https://wweb.dev/weekly/content/82/rss3.jpg)](https://ncase.me/rss/)
An article about how to save the open web, & get (re)started with RSS.

______

##[Salvia-kit](https://www.salvia-kit.com/)
[![Salvia-kit](https://wweb.dev/weekly/content/82/salve-kit.jpg)](https://www.salvia-kit.com/)
Cool dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js.

______

##[graphlatte](https://github.com/graphlatte/graphlatte)
[![graphlatte](https://wweb.dev/weekly/content/82/graphlatte.jpg)](https://github.com/graphlatte/graphlatte)
A Next.js template with GraphQL, Urql, Prisma, Nexus and Tailwind.

______

##[wobbles and bubbles](https://codepen.io/cassie-codes/pen/GRmrogP)
[![wobbles and bubbles](https://wweb.dev/weekly/content/82/wobbles.jpg)](https://codepen.io/cassie-codes/pen/GRmrogP)
A nice scrolltrigger demo.

______

##[:fullscreen](https://css-tricks.com/almanac/selectors/f/fullscreen/)
[![:fullscreen](https://wweb.dev/weekly/content/82/fullscreen.jpg)](https://css-tricks.com/almanac/selectors/f/fullscreen/)
A CSS pseudo-class that allows you to style any element that is currently in fullscreen mode.

______

##[Maker Stations](https://www.makerstations.io/)
[![Maker Stations](https://wweb.dev/weekly/content/82/maker-stations.jpg)](https://www.makerstations.io/)
A website to explore home office setups from makers across the globe.

______

##[My First CSS](https://engineering.kablamo.com.au/posts/2021/my-first-css)
[![My First CSS](https://wweb.dev/weekly/content/82/graphlatte.jpg)](https://engineering.kablamo.com.au/posts/2021/my-first-css)
An article about some base concepts of CSS.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
How to execute an angular library independently without the shell UI
Published: 2021-07-28 06:20:16

Hey Guys,

We have shell UI where all the angular custom libraries developed by our developers will be integrated. 
The problem here is, whenever the developers wants to some development in the library they have to do in the integrated environment with shell UI and have to do the following steps which takes some time,
1) yarn build --watch in the library 
2) yarn link <lib> in the shell UI app.
The shell UI will set the user authentication and user context which helps the library to execute on that context.

Is there any way that the library can be run independently by stimulating the user context in the library level ? So that this will save some time for the developers not to do development in the integrated environment.
HTML tags | code
Tags: html, tags, code
Published: 2021-07-28 06:17:00

It is used to **indicate small pieces of code**. In case you want to show a larger fragment, enter `<code>` inside a `<pre>` tag.

The browser will display the text **using the default monospaced font**, unless it is overwritten with CSS.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) | [Support](https://caniuse.com/mdn-html_elements_code)
Openssl by Example
Tags: security, tooling, linux, openssl
Published: 2021-07-28 06:11:17

## Table of contents
- [Symmetric key](#symmetric-key)
    - [Encryption](#encryption)
    - [Decryption](#decryption)
- [Asymmetric key](#asymmetric-key)
    - [Key Generation](#key-generation)
        - [Public key](#public-key)
        - [Private key](#private-key)
    - [Encryption](#encryption-1)
    - [Decryption](#decryption-1)
    - [Sending signed messages](#sending-signed-messages)
    - [Reading signed messages](#reading-signed-messages)
    - [Encrypting private key](#encrypting-private-key)
- [Others](#others)
    - [Find openssl version](#find-openssl-version)
    - [List ciphers](#list-ciphers)

## Symmetric key

### Encryption

```bash
$ echo "top secret text" | openssl enc -aes-256-cbc -base64
enter aes-256-cbc encryption password:
Verifying - enter aes-256-cbc encryption password:
<< encrypted text >>
```

### Decryption

```bash
$ echo "<< encrypted text >>" | openssl enc -d -aes-256-cbc -base64
enter aes-256-cbc decryption password:
top secret text
```

## Asymmetric key

### Key Generation

#### Public key

```bash
openssl genrsa -out private.pem 2048
```

#### Private key

```bash
openssl rsa -in private.pem -pubout -out public.pem
```

### Encryption

```bash
openssl rsautl -encrypt -in secret-transmission.txt -out secret-transmission.txt.enc -inkey public.pem -pubin
```

### Decryption

```bash
openssl rsautl -decrypt -in secret-transmission.txt.enc -out secret-transmission.txt -inkey private.pem
```

### Sending signed messages

```bash
openssl rsautl -sign -in secret-transmission.txt -out secret-transmission.txt.enc.signed -inkey private.pem
```

### Reading signed messages

```bash
openssl rsautl -verify -in secret-transmission.txt.enc.signed -out secret-transmission.txt -inkey public.pem -pubin
```

### Encrypting private key

Never store private key in clear text format!

```bash
openssl rsa -in private.pem -des3 -out private-enc.pem
```

## Others

### Find openssl version

```bash
$ openssl version
LibreSSL 2.6.4
```

### List ciphers

```bash
openssl list-cipher-commands
```
Rust | References and Borrowing
Tags: rust, borrowing, ownership
Published: 2021-07-28 05:59:07

#การอ้างถึง (Reference)
การใช้ References ทำให้เราสามารถเข้าถึงข้อมูลได้โดยที่ไม่ต้องเป็นเจ้าของข้อมูลนั้นก่อน

- '&' ampersands คือเครื่องหมายการอ้างถึงข้อมูล
- การใช้เครื่องหมาย '&' ทำให้เราสามารถเข้าถึงข้อมูลได้โดยไม่ต้องเปลี่ยนเจ้าของมาเป็นเรา

ตัวอย่าง
```rust
let s = String::from("data");
println!(&s);
```
s ยังคงเป็นเจ้าของข้อมูล "data" อยู่ ฟังก์ชั่น println แค่ขอยืมการเข้าถึงข้อมูลนั้นเพื่อทำการปริ้น หลังจาก println ทำงานเสร็จ s ก็กลับมาถือครองข้อมูล "data" ดังเดิม

- ฟังก์ชัน println จะสามารถอ้างถึง ข้อมูล "data" ได้ตราบเท่าที่พารามิเตอร์ของฟังก์ชัน println ชีวิตอยู่

#การยืม (Borrowing)
การยืมใช้สำหรับการขอสิทธิเข้าถึงข้อมูลดังตัวอย่างด้านบน 
หากเราต้องการยืมด้วย และมีสิทธิในการแก้ไขด้วย ต้องใช้การยืม แบบ `&mut s`
ทั้งนี้ s ต้องประกาศเป็น mut ถึงจะสามารถทำได้

```rust
fn main(){
    let mut s = String::from("data");
    print(&mut s); // ยืมแบบสามารถแก้ไขข้อมูล "data" ได้ด้วย
    println!("in main: {}", s);
}

fn print(n: &mut String) {
    println!("in print : {}", n);
    n.push_str(" change here");
}
```

ผลลัพท์
```
in print : data
in main: data change here
```

โปรแกรมสามารถยืมได้แค่ทีละตัวแปร ไม่สามารถยืมได้พร้อมกันหลายตัวแปรได้ถ้าหากมันเป็น mut คือข้อมูลที่สามารถเปลี่ยนแปลงได้ [ตามกฎ](https://dev.to/anuchito/rust-5b2c)
Do you know these data-types in JavaScript  
Tags: javascript, programming, node
Published: 2021-07-28 05:54:16

Besides all the known data types in javascript like Stings, Arrays, and Objects, there are some other types that are not widely used. 

In this article, I will explain Two data types in JS 
- Maps
- Sets


## Maps
Maps are collections of key-value items, and yes this is similar to Objects. 
However, there are some differences that make the **Maps** data type unique :sunglasses: .
- **Objects Keys** are always one of type `String or Symbol`, you can not have a key in an object with any other type
- **Maps Keys** can be any type of data

Let's see some examples for object keys
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p04z03lnrcrvtrm2srfp.png)

As we can see in the above example, objects keys are converted to type string even if they are **not strings**
so the keys are converted like this 
- `1` will be ` '1' `
- `'string'` will be `'string'`
- `{'key':'value'}` will be `[object Object]` which is the  output from conversion of object to a string


Now let's see how the Maps types handle this issue 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mzzeq7t9zbp5316ijds.png)

as we can see the keys of the Map remain the same without any conversion in type.

In the below table, there is a comparison between Map and Object

|  | Maps | Objects |
|---|---|---|
| Keys | Can be any data type | Any key should be of type string or symbol |
| Define | `let map = new Map();` | `let obj = {}` |
| Set pair (key-value) | `map.set(key,value)` | `obj[key] = value` |
| get value of key | `map.get(key)` | `obj[key]` |
| remove value by key | `map.delete(key)` | `obj[key]=undefined ` |
| get keys | `map.keys()` <br>returns an iterable for keys | `Object.keys(obj)`  |
| check if has key | `map.has(key)` | `obj.hasOwnProperty(key)`  |
-------------
## Sets

Sets is another data type in JS, it is a collection of values where each value occur only once.

Let's see an example 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfs3xy5lz9u88spcirzg.png)

An interesting application for this is to remove the duplicate values from array. For example
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwtiz33hf2gt4xgwvsvm.png)


You can know more about Maps and Sets from [here](https://javascript.info/map-set)  :sunflower:

Finally, it is great to know more about all the types of Javascript as you can need them in the future.
even if you rarely use them, having the knowledge of these types will expand your ability to have different solutions for some problems :tada:
9 Steps to a Successful Web Design for Your Company

Tags: webdesigncompanydubai, websitedesign, websitedevelopment
Published: 2021-07-28 05:41:48

Before creating a website, most people and businesses should think about a few things. Web design is both an art and a business. Getting the “formula” right is critical to success. Your website can look great, but you won’t see any results if you don’t get the fundamentals right.
So here are some steps to grow your  Business Online.

https://redberries.ae/9-steps-to-a-successful-web-design-for-your-company/
Creating vite vue ts template: Setup pre-commit
Tags: precommit, vite, vue
Published: 2021-07-28 05:28:34

## Create pre-commit configuration

1. `pre-commit sample-config > .pre-commit-config.yaml`
1. Add prettier hook to `.pre-commit-config.yaml`
    ```diff
    +-   repo: https://github.com/pre-commit/mirrors-prettier
    +    rev: ''  # Use the sha / tag you want to point at
    +    hooks:
    +    -   id: prettier
    ```
1. Add eslint hook to `.pre-commit-config.yaml`
    ```diff
    +-   repo: https://github.com/pre-commit/mirrors-eslint
    +    rev: ''  # Use the sha / tag you want to point at
    +    hooks:
    +    -   id: eslint
    +        additional_dependencies:
    +        -   eslint@7.31.0
    +        -   typescript@4.3.5
    +        -   "@typescript-eslint/eslint-plugin@4.28.5"
    +        -   "@typescript-eslint/parser@4.28.5"
    +        -   eslint-plugin-vue@7.14.0
    +        -   vue-eslint-parser@7.9.0
    +        -   eslint-config-prettier@8.3.0
    ```
1. Update eslint hook to run for `*.js, *.jsx, *.ts, *.tsx and *.vue`

    > By default only \*.js files are taken into consideration. If you want to use eslint on TypeScript codebases you need to start from this template

    ```diff
         hooks:
         -   id: eslint
    +        files: \.([jt]sx?|vue)$  # *.js, *.jsx, *.ts, *.tsx and *.vue
    +        types: [file]
    ```

1. `git add .pre-commit-config.yaml`
1. `pre-commit autoupdate`
1. `pre-commit run --all-files`
1. `git add -u`
1. `git commit -m 'setup pre-commit'`

## Links

-   https://pre-commit.com
-   https://github.com/pre-commit/mirrors-prettier
-   https://github.com/pre-commit/mirrors-eslint

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
31 Front-End Development Study Topics to Improve Your Code Quality
Tags: javascript, webdev, html, css
Published: 2021-07-28 05:20:02

If you spend a lot of time doing front-end development, you know how big the the world of HTML, CSS and JavaScript are. I came up with this list of topics after chatting with several different front-end developers over the past nine months. Some of the topics also came from my own experiences working as a full-time front-end engineer for the past three years.

The list (written in no particular order) may feel a bit intimidating now, but I am remaining optimistic about being able to continually grow my knowledge about each of these topics and hopefully commit them to memory as I use them in the wild. I actually decided to create this list after feeling a bout of imposter syndrome today at work. Now, I'm feeling excited to continue digging into each topic further!

1. The Document Object Model (DOM) and CSS Object Model (CSSOM)
2. The JavaScript Event Loop, Promises, Asyc/Await
3. CSS `position` Property
4. CSS Flexbox Layout
5. HTML Roles
6. Common Accessibility Issues to Always Check For
7. Unit & Integration Testing (Jest, Mocha, Chai, Cypress, Axe-Core)
8. Form `action` and `target` Attributes
9. [JavaScript Design Patterns](https://dev.to/twinfred/design-patterns-in-javascript-1l2l)
10. Closures and Thunks
11. CSS Variables and Preprocessors
12. JavaScript as a Statically Typed Language (TypeScript)
13. Mutable and Immutable Types in JavaScript
14. JavaScript Passed by Reference / Passed by Value
15. JSON Data, JSON-LD, JSON Schemas & UI Schemas
16. HTML Meta Tags (Especially Viewport)
17. Different Ways Pages Zoom and How To Optimize For That
18. Front-End Frameworks (React, Vue, Angular)
19. HTML Templating (Handlebars, EJS)
20. Webpack / Babel
21. Git, Version Control and Rebasing
22. Jenkins, Docker, Continuous Integration
23. Caching
24. CSS Methodologies (i.e. BEM)
25. JavaScript Array Methods: `.sort()`, `.filter()`, `.map()`, `.reduce()`
26. JavaScript Object Methods: `.keys()`, `.entries()`, `.values()`
27. Front-End Performance Optimization & Speed
28. CSS Specificity and Inheritance
29. State Management (i.e. Redux)
30. Semantic HTML
31. Communicating with RESTful APIs

Feel free to leave a comment below if you have any suggestions for more topics to add to the list. Also, feel free to [hit me up on Twitter @Contimporary](https://twitter.com/Contimporary) to follow my journey to become a senior developer!
Learning Python-Basic course: Day 23, String Methods Part-2
Tags: python, learningpython, tutorial, codenewbie
Published: 2021-07-28 05:15:14

Today we cover more about string functions.
---
____
String functions are inbuilt methods to modify and change strings. In case you missed yesterday's part, [click here](https://dev.to/aatmaj/learning-python-basic-course-day-22-string-methods-part-1-9j8).

## String functions for GUI. 
>
- isalpha()- to check if all characters are alphabets.
- isalnum()- to check if all characters are alphanumeric.
- isdigit()- to check if all characters are digits.
- islower()- to check if all characters are lower case.
- isspace()- to check if all characters are blank spaces.
- istitle()- to check if all characters [follow title rules](https://www.w3schools.com/python/ref_string_title.asp#:~:text=The%20title()%20method%20returns,be%20converted%20to%20upper%20case.).
- isupper()-to check if all characters are upper case.


The methods above are useful especially when we deal with GUI. For example, when we want the users to enter only alphanumeric values for passwords, alphabets for names and only digits for pin-codes These are useful to prevent errors in complex operations like OOP, GUI or file reading which we will cover in the next module.

```python

txt=" Computer Academy"
print(txt)

#Returns True if all characters in the string are alphabets
print("1.", "\tisalpha()\t", txt.isalpha())


#Returns True if all characters in the string are only alphanumeric
txt="Level1"
print("\n",txt)
print("2.", "\tisalnum()\t", txt.isalnum()) 


#Returns True if all characters in the string are digits
txt="1154"
print("\n",txt)
print("3.", "\tisdigit()\t", txt.isdigit()) 


#Returns True if all characters in the string are lower case
txt="computer academy"
print("\n",txt)
print("4.", "\tislower()\t", txt.islower()) 


#Returns True if all characters in the string are whitespaces
txt="computer academy"
print("\n",txt)
print("5.", "\tisspace()\t", txt.isspace()) 


#Returns True if the string follows the rules of a title
txt="Computer Academy"
print("\n",txt)
print("6.", "\tistitle()\t", txt.istitle()) 


#Returns True if all characters in the string are upper case
txt="PYTHON PROGRAMMING"
print("\n",txt)
print("7.", "\tisupper()\t", txt.isupper()) 
```

Output-
```
 Computer Academy
1. 	isalpha()	 False

 Level1
2. 	isalnum()	 True

 1154
3. 	isdigit()	 True

 computer academy
4. 	islower()	 True

 computer academy
5. 	isspace()	 False

 Computer Academy
6. 	istitle()	 True

 PYTHON PROGRAMMING
7. 	isupper()	 True

```

## Exercise-
Write a program to check if a string is alphabetic, numeric or alphanumeric or none.. answer in the [Learning Python repo](https://github.com/Aatmaj-Zephyr/Learning-Python)
____
So friends that's all for this part. 😊 Hope you all are enjoying.😎 Please let me know in the comment section if you liked it or not. 🧐 And don't forget to like the post if you did. 😍 I am open to any suggestions or doubts. 🤠 Just post in the comments below or gmail me. 😉
Thank you for being so patient.👍
Pegasus, everything you need to know
Tags: vscode, tutorial, programming, python
Published: 2021-07-28 05:03:27

Even if you listen news for 10 mins a day , you must heard about a software Pegasus and it's hacking through WhatsApp call.


 

In this article I will be sharing everything about Pegasus. Stay here.

Pegasus, is not a new thing . Pegasus is a product of a company named NSO , an Israel based Company. 
NSO made this legally because NSO(Niv ,Shalev and Omri Groups) is responsible for making softwares for surveillance . 

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

Of course this is not for common man. , NSO sell this to Govt Intelligence agencies only . 

Basically, it uses some codes which comes to your phone and takes root access of your mobile and then self destruts itself and you won't know it was present earlier or not.

But how it will take root access of phone so easily ? 

Ans - No onw knows it except the company NSO and the intelligent agencies who have access to this.

Basically these type of attacks in phone caused by exploiting securities vulnerabilities .

Suppose , I  made an android app and I have done something with the help of it I have access to read and write on your SD CARD.
And suppose a Signal comes to your phone through my App and this signal will execute that particular script which have access to Read and Write on your SD CARD.

HOW THIS PROGRAM SELF DESTRUCTS ITSELF? 

If this comes to your memory and copied everything in the memory then copied code have power to delete the original code.

Let us see an example : 

I opened VS CODE and created a file named "pegasus.py"
So in my PC it's visible in the folder. 
See the screenshot (Image 1)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxoyfovznsn59nh10ucz.png)
 
Then I had written a simple Python code :

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1te7vu3pgm35twom7tcd.png)
 

After running it , my file "pegasus.py" has been deleted from the folder.

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

How it will enter ?
 May be due to vulnerability in the app or in android.

So, always be aware when you are using a new link from unknown sites / sources .

Go for two factor authentication for Gmail , Instagram , Facebook , Twitter etc.

Thanks ,
Rounit
Solo Week + React (Pt. 3)
Published: 2021-07-28 04:59:16

I didn't intend for this to be a series, but at three installments, I think we're there.

##React tidbits
I usually drop things like this below my prose, but today I'm bringing it to the light.

- **Curly braces** within the render function need to go inside an html element like `<div> {this.example} </div>` otherwise they won't be recognized as jsx (or if that's not quite right, let's just say it won't work).

- Back in the day I wrote a post on `.forEach` and using it in a solution. Another dev.to user [helpfully suggested](https://dev.to/zbretz/be-careful-with-foreach-2k0d/comments) using **`Array.prototype.some()`** to examine an array to produce a boolean condition. Well, it came in handy today - I used it to search a product registry for whether items were in stock (did any items have a non-zero count?). It's so gratifying to apply things you've come across and to see them work their way into your work. Really great.

- I worked with React `select` inputs today and got some good learnins in there. Maybe I can follow up in part four on what I picked up.

##Where I'm at on the FEC Project

I'm assigned to the 'overview' component. It has a lot of moving parts and I've gotten a lot of hands-on practice with state, props, etc. I've touched every sub-component minus one, and have those working at an MVP level. I'd like to add more functionality to those elements, and bring them to near completion tomorrow (although I'm sure Thursday is more likely).

The one element that I've neglected is near-identical to a piece of my teammate's component. I'd like to reuse team code to the greatest extent possible, so I'll check in with him and see what I can borrow. If I have anything that they can borrow, I'll insist that they do.

##We're I'm at with my Blog project
I haven't covered any new ground. It's not quite frustrating - I have enough else going on and am feeling productive - but it's not what I want. Incremental progress would be great. Writing this blog eats into the available time. Grrrr.

##Entrepreneurship
I had a conversation today with an HR graduate who is pursuing the entrepreneur's path. It was a little difficult talking with him as he wasn't willing to discuss the idea he's working on. He suggested that I refrain from sharing my ideas too.

I disagreed. Ideas are cheap, right? What's the threat - that someone is gonna hear my brilliant idea and drop what they're doing to pursue it? That's not going to happen. That doesn't mean being careless with it. But holding too tightly that you can't workshop it, and hear criticism and reflections - man that's too tight.
Day 3 - Rotate Image
Published: 2021-07-28 04:48:25

###Day 3 - Rotate Image - Leetcode problem

Problem and my solution can be found in my Github repo along with all other problems I have solved till date.

[Leetcode problem](https://leetcode.com/problems/rotate-image/)
[Github link to problem and solution](https://github.com/abh1navv/leet-code/tree/master/rotate-image)

You can connect with me at &nbsp;
[LinkedIn](https://www.linkedin.com/in/abh1navv)
[Twitter/@abh1navv]
(https://www.twitter.com/abh1navv)