teleren/devto huggingface dataset:
Weekly web development resources #106
Tags: webdev
Published: 2022-01-26 06:52:00



______

##[TinyBase](https://tinybase.org/)
[![TinyBase](https://wweb.dev/weekly/content/106/tinybase.jpg)](https://tinybase.org/)
A JavaScript library for a smarter way to structure your application state.

______

##[edit.photo](https://edit.photo/)
[![edit.photo](https://wweb.dev/weekly/content/106/photoedit.jpg)](https://edit.photo/)
A free, privacy friendly photo editor in your browser.

______

##[Polka Dot Generator](https://screenspan.net/polka/)
[![Polka Dot Generator](https://wweb.dev/weekly/content/106/polka.jpg)](https://screenspan.net/polka/)
Generate polka dot patterns using CSS custom variables for background images.

______

##[Tidy Free](https://freebiesbug.com/code-stuff/tidy-free/)
[![Tidy Free](https://wweb.dev/weekly/content/106/tidy-template.jpg)](https://freebiesbug.com/code-stuff/tidy-free/)
A free HTML, React and Vue template.

______

##[Form Validation](https://blog.openreplay.com/form-validation-using-javascript-s-constraint-validation-api)
[![Form Validation](https://wweb.dev/weekly/content/106/javascript-form.jpg)](https://blog.openreplay.com/form-validation-using-javascript-s-constraint-validation-api)
An article on form validation using JavaScript's constraint validation API.

______

##[Compress Images Online](https://www.webutils.app/image-compress)
[![Compress Images Online](https://wweb.dev/weekly/content/106/compress.jpg)](https://www.webutils.app/image-compress)
A privacy first and fast way to compress images online.

______

##[Two.js](https://two.js.org/)
[![Two.js](https://wweb.dev/weekly/content/106/twojs.jpg)](https://two.js.org/)
A two-dimensional drawing api geared towards modern web browsers.

______

##[Charm](https://charm.sh/)
[![Charm](https://wweb.dev/weekly/content/106/charm.jpg)](https://charm.sh/)
A bunch of various cool command line tools.

______

##[Beercss](https://www.beercss.com/)
[![Beercss](https://wweb.dev/weekly/content/106/beercss.jpg)](https://www.beercss.com/)
A cool CSS library to build material design interfaces fast.

______

##[Git History](https://githistory.xyz/)
[![Git History](https://wweb.dev/weekly/content/106/githistory.jpg)](https://githistory.xyz/)
A tool to quickly browse the history of files in any git repo.

______

##[Shapefest](https://www.shapefest.com/)
[![Shapefest](https://wweb.dev/weekly/content/106/shapefest.jpg)](https://www.shapefest.com/)
A library with a lot of free 3D shapes.

______

##[Chirpy](https://chirpy.dev/)
[![Chirpy](https://wweb.dev/weekly/content/106/chirpy.jpg)](https://chirpy.dev/)
A privacy-friendly, customizable and open-source Disqus alternate.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
JavaScript Ternary Operator
Tags: javascript, webdev, beginners, programming
Published: 2022-01-26 06:44:47

JavaScript list of operators containing question marks might surprise new developers approaching the language for the first time. 
We already discussed how the [nullish coalescing operator (??)](https://medium.com/@lorenzozar/javascript-ternary-operator-b76a02c90850) works. 
In this post, we will talk about the conditional operator, also known as the ternary operator.

## JavaScript Ternary Operator

Following MDN definition, "The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy".

```
condition ? expression1 : expression2
```
You can read this operator as follow: IF the condition is true execute expression1 else execute expression2. 

This is not entirely accurate but before diving into truthy and falsy let's see an example with a condition that can only be true or false.

```
let condition = true;
console.log(condition ? 'exp 1' : 'exp 2'); // exp 1
```

Since we defined a variable called condition as true, the ternary operator executes the first expression which is a simple string "exp 1". 

The console.log() around the ternary operator logs the result of the ternary operator and it logs "exp 1".
This is the core concept of the ternary operator.

## Ternary operator with truthy and falsy
As I said above, you can read this operator as follow: IF the condition is true execute expression1 else execute expression2. But this is not entirely accurate!

So, what is the problem?

When talking about Javascript Ternary Operator, MDN talks about truthy and falsy instead of true and false.
```
condition ? expression1 : expression2
```

IF the condition is **truthy** execute expression1 else (**falsy**) execute expression2.


In simple terms, 
- Truthy values are equal or can be converted to true. Which values are truthy? All values unless they are defined as falsy. Thanks…
- Falsy values are equal or can be converted to false. (i.e. false, 0, -0, 0n, "", null, undefined, and NaN).


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

See some more examples using the [ternary operator with strings and numbers](https://medium.com/@lorenzozar/javascript-ternary-operator-b76a02c90850).
Jak uprofesjonalnić swój poboczny projekt w pracy
Published: 2022-01-26 06:16:48

Załóżmy że nie jesteś programistą, ale udało Ci się zautomatyzować część zadań za pomocą małego skryptu. Gratuluję! Utrzymujesz kod na produkcji i dostarczasz wartość za jego pomocą. Z tego artykułu dowiesz się, jak możesz wprowadzić swój kod na nowy poziom i uzyskać wartościowe umiejętności programistyczne.

## Zaczynamy!

Najprawdopodobniej, Twój kod:

– to zbitka fragmentów kodów znalezionych w internecie;
– działa w większości przypadków, ale czasami ulega awarii;
– może być obsługiwany tylko przez Ciebie.

Na dodatek masz wrażenie, że to nie jest prawdziwe programowanie.

## Możliwe ulepszenia

Jest kilka rzeczy, które możesz poprawić w takim kodzie. Korzyści będą dla obu stron:

– firma będzie mogła korzystać z kodu, nawet kiedy opuścisz swoje aktualne stanowisko,
– Ty będziesz miał możliwość uzyskać cenne umiejętności & zademonstrujesz je w praktyce.

Rzeczy, które możesz dodać do Twojego projektu:

1. kontrola wersji – na przykład git,
2. dokumentacja,
3. testy automatyczne,
4. ciągła integracja (continuous integration).

## Kontrola wersji
Kontrola wersji jest standardem przy każdym programowaniu na poważnie.  Pozwala Ci ona dokumentować zmiany w miarę postępów i szybko przywrócić przeszłą wersję kodu. Jeśli nie używasz kontroli wersji, marnujesz firmowe zasoby (Twój czas) i ryzykujesz bez potrzeby własną frustrację. Aktualnie GitHub i GitLab oferują darmowy hosting, również dla prywatnych projektów.

## Dokumentacja
Ulubiony temat developerów do narzekania – albo dlatego, że muszą pisać dokumentację, albo dlatego, że pracują na nieudokumentowanym kodzie. Najlepiej zacznij przynajmniej z `README` i w miarę jak projekt będzie się rozwijać, poszukaj sposobu, żeby dokumentować różne jego fragmenty.

## Testy automatyczne
Najważniejsze to zacząć testować jak najwcześniej. Zawszę są pilniejsze rzeczy niż testowanie, ale możesz przynajmniej zbudować infrastrukturę do testowania i zacząć pisać testy jeden po drugim. Na pewno będą one wartościowe, kiedy projekt zrobi się bardziej skomplikowany lub będzie go przejmować ktoś inny.

## Ciągła integracja (CI)
To trochę sporo, jeśli pracujesz zupełnie sam, ale robi się naprawdę ważne, kiedy inny zaczynają pracować nad kodem. CI obniża próg wejścia do projektu – oprócz Twojego komputera jest jeszcze jedna maszyna, na której system działa. W miarę jak inne osoby będą dołączać do projektu, będziesz mieć centralne miejsce, w którym zmiany będą weryfikowane – bez angażowania Ciebie, autora aplikacji.

## Linki
* [oryginaly artykuł po angielsku](https://how-to.dev/how-to-professionalize-your-little-work-project)

## Podsumowanie
Żeby sprofesjonalizować poboczny projekt w pracy, możesz użyć listy przedstawionej w tym artykule i powoli zacząć dodawać te elementy.
How to access submitted form data value from request in ExpressJS
Tags: node, javascript, angular, express
Published: 2022-01-26 06:44:02

**Project**: [`Codever`](https://github.com/CodeverDotDev/codever) - **File**:  `user.router.js`

The values are present in the `request.body` which contains key-value pairs of data submitted in the request body.

In our case we access the `userDisplayName` with the following expression `request.body.userDisplayName` as in the example below:

```javascript
usersRouter.post('/:userId/bookmarks/upload', keycloak.protect(),
  uploadBookmarks.single("bookmarks" /* name attribute of <file> element in your form */),
  async (request, response) => {
    userIdTokenValidator.validateUserId(request);

    const userDisplayName = request.body.userDisplayName;
    const importResponse = await browserBookmarksImportService.imporBrowserBookmarks(request.params.userId, request.file.buffer, userDisplayName);

    const str = JSON.stringify(importResponse, null, 2); // spacing level = 2
    console.log(str);

    return response.status(HttpStatus.OK).send(importResponse);
  }
);
```

In angular the `userDisplayName` value has been appended to the `FormData` and submitted to a post request
via the Angular Http Client:


```javascript
  uploadBookmarks(userId: String, bookmarks: File, userDisplayName: string): Observable<any> {
    const formData = new FormData();
    formData.append('bookmarks', bookmarks);
    formData.append('userDisplayName', userDisplayName);

    return this.httpClient.post(`${this.usersApiBaseUrl}/${userId}/bookmarks/upload`, formData);
  }
```

<span style="font-size: 0.9rem">
  <strong>Reference - </strong>
  <a href="https://expressjs.com/en/api.html#req.body" target="_blank" style="font-weight: lighter">
     https://expressjs.com/en/api.html#req.body
  </a>
</span>

<hr/>

> Shared with :heart: from [Codever](https://www.codever.dev/snippets/609ec1b0d89230173165956f/details). Use :point_right: [**copy to mine**](https://www.codever.dev/snippets/609ec1b0d89230173165956f/details) functionality to add it to your personal snippets collection.
OSI Model Cheatsheet
Published: 2022-01-26 06:31:54

## OSI Model
Open systems interconnection (OSI)

-It is used to describe how the data is 
 transferred over network.
-It provides lots of functions and 
 services.
-It has 7 layers. 

        **##Seven layers of OSI Model**

	1) Application Layer:
           human interaction softwares and 
           protocols (zoom, https, FTP, 
           DNS, DHCP, telnet, email)
	
	2) Presentation layer: 
           presentation of data in 
           multiple formats eg: text, 
           MP4,JPEG, png . Responsible for 
           encryption/decryption and 
           compression/decompression

	3) Session layer: Create and 
           maintain sessions.


	4) Transport layer: End to end 
           to delivery of data using TCP 
           and UDP protocol. It converts 
           data into segments and set port 
           no(source and destination) to 
           each segment

	5) Network layer:  set ip address 
           information ( router works on 
           network layer)

	6) Data link layer: set MAC 
           address ( switch works on data 
           link layer)

	7) Physical layer: Responsible for 
           ecoding and decoding. cables, 
           signals , connectors(media)


**TCP ( Transmission Control Protocol )**
It grantee the delivery of data.
It is reliable.
It retransmit the data if it gets failed...
It provides acknowledgement.. 
Used in e-mail services

**UDP ( User Datagram Protocol )**
It doesn't grantee the delivery of data.
It is fast as compared to TCP
Not reliable
It doesn't retransmit data.
It doesn't provides acknowledgement
Used in video conferencing


**PDU ( protocol Data Unit )**
Application, presentation, session- Data
Transport- segments
Network - packets
Data link - frames 
Physical me - bits


**Port no:** Identify the service
A port number is a way to identify a specific process to which an internet or other network message is to be forwarded when it arrives at a server. All network-connected devices come equipped with standardized ports that have an assigned number. These numbers are reserved for certain protocols and their associated function. Hypertext Transfer Protocol (HTTP) messages, for example, always go to port 80 -- one of the most commonly used ports.


**Note:**
An IP address identifies a machine in an IP network and is used to determine the destination of a data packet. Port numbers identify a particular application or service on a system.

        **Datalink sub layers:**
	1) LLC ( logical link control ) - 
           helps to connect with network 
           layer. 
	2) Mac layer : set source and 
           destination Mac addresses

**Note:**
computer works on all the layers.. 
Network - resource share
Kernal - resource manager
Server - combination of hardware and software

**Abbreviation**
DNS - Domain Name service
TCP - Transmission Control Protocol
Ip- Internet Protocol
UDP - User detagram protocol
ARP- Address Resolution protocol
RARP- Reverse address protocol
FTP- file transfer protocol
Mac - media access control access
IANA - Internet Assigned numbers authority
Here goes
Published: 2022-01-26 06:20:06

Hoping this will add some clarity for my future self. I'm going to be writing here at the end of work so I don't lose my momentum between gaps (baby girl #3 is on the way after all).

Tonight I finished messing around with the stupid pregame material. It looks ok. Good enough.

Then I investigated actually making the pregame stage actually happen. I did that by adding a flag to bsGameState called "IsPregameInstance" which is fed to the level on load as a parse option in bsGameMode. When that is true, bsEnemy actors will self-destroy. I still need to make it not do a lot of other stuff, game mode related I imagine. I think I should also have it destroy asteroids, leave any "crystals" that might be there though to lure players aim.

Decide how the player flow works. I think I'll just spawn players automatically to keep things moving and place them on the right side randomly, with them spaced out a bit from each other. With only crystals available as obstructions, no one should have a bad position. 

Once their ship is spawned, player should be able to fire right away. None of the player ships will collide to keep things simple. Player closest to the wall goes first in the resulting game, player further to the wall goes last in the resulting game. Pregame should have a "timer" to keep things moving. 30 seconds? 

With that done, then there's a level transition and a the level is reloaded without the "IsPregameInstance" parse option. I'm guessing I can store the player order in bsGameMode or bsGameState?
Use Tin to quickly set up Headless WordPress
Tags: programming, tutorial, productivity, devops
Published: 2022-01-26 06:17:24

WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw1xj479u20x63swbmnt.png)

Usually you need to download and install Docker first if you want to use Headless WordPress. But with Tin, you can use this project without downloading Docker.

Tin is a product of TeamCode that can generate executable applications instantly without manual environment configuration. Users can click to run project directly in the cloud. 

**Login to Tin and clone the Headless WordPress**
1. Click the Tin URL of Headless WordPress.
https://www.teamcode.com/tin/clone?applicationId=273434815208255488
Users who have not logged in should sign up first.
2. Log in to Tin with your email, Github account, or phone number.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j67iludb77hitv8au5m1.png)
3. (Optional) After logging in, you can change the “Application Name” or “Tag”。
4. Click "Clone" button to clone the Tin app to your workspace.
Note: Tin will give new users a free trial for a certain length of time, which is determined by the instance size. After the free trial time, the Tin app will automatically stop working. You will not be charged for the whole process. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxbhr2ur8ck02axxvs5f.png)
5. Click "RUN NOW" to initiate the application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9r8smwuigoz8vtgd01t.png)
6. Click the "Primary Endpoint" button and you will visit Headless WordPress immediately.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ciqzc4jpctkxt4z4z32.png)

**You can try Headless WordPress now.**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kunu8vubo5xsr07w2kxv.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cpyw7w8ojf0l7h4ygza.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77dr5ryoj9t3xx074ezr.png)

You can also use the Tin to quickly set up other open source projects, see the guide: https://www.teamcode.com/docs/en-US/tin/create-tin
Wordle with Python
Tags: wordle, python, begginer
Published: 2022-01-26 06:15:25

I got this as my first task in Codecademy's Portfolio project in CS 101 and in the meantime Wordle was a very popular game on twitter.

I used the Spellchecker module to search for existing words.
Tried to be as friendly as possible and addes emoticons to be more playful.

I will add classes to keep track of the player and its games.

Hopefully this will turn out as a real twitter bot.

You can follow the project on [Github](https://github.com/latostadorano/wordle_py)
[Solved] gpgkeys: protocol `https' not supported
Tags: tutorial, linux
Published: 2022-01-26 06:12:22

Problem: 

```bash
sudo apt-key adv --fetch-keys 'https://mariadb.org/mariadb_release_signing_key.asc'
Executing: /tmp/tmp.o2I4wt3O3r/gpg.1.sh --fetch-keys
https://mariadb.org/mariadb_release_signing_key.asc
gpgkeys: protocol `https' not supported
gpg: no handler for keyserver scheme `https'
gpg: WARNING: unable to fetch URI https://mariadb.org/mariadb_release_signing_key.asc: keyserver error
```

Method 1: Install gnupg-curl

```bash
apt-get update
apt-get install gnupg-curl
```

Method 2: If the above does not resolve the issue, then get the key using CURL and add it manually

```bash
curl 'https://mariadb.org/mariadb_release_signing_key.asc' | apt-key add -
```

Method 3: If you trust the server, then use `-k` option to skip CA cert verification

```bash
curl -k 'https://mariadb.org/mariadb_release_signing_key.asc' | apt-key add -
```

The method 2 worked for me on Ubuntu Xenial.

Comment if it helped you or if you are aware of a better solution.

Thanks.
[Solved] E: Unable to correct problems, you have held broken packages.
Tags: tutorial, linux
Published: 2022-01-26 06:07:28

```bash
$ apt-get install mariadb-server
Reading package lists... Done
Building dependency tree       
Reading state information... Done
Some packages could not be installed. This may mean that you have
requested an impossible situation or if you are using the unstable
distribution that some required packages have not yet been created
or been moved out of Incoming.
The following information may help to resolve the situation:

The following packages have unmet dependencies.
 mariadb-server : Depends: mariadb-server-10.5 (>= 1:10.5.13+maria~focal) but it is not going to be installed
N: Ignoring file 'maria.key' in directory '/etc/apt/sources.list.d/' as it has an invalid filename extension
N: Ignoring file 'apt-key' in directory '/etc/apt/sources.list.d/' as it has no filename extension
E: Unable to correct problems, you have held broken packages
```

### Install aptitude

```bash
sudo apt-get install aptitude
```

### Use aptitude to install packages

```bash
sudo aptitude install mariadb-server
```

Use the Yes or No options to find the right combinations of the packages and set them up.

Comment if you know any other efficient solutions.
thanks.
Use VS Code 💡😆 to check in with yourself
Tags: vscode, webdev, agile, programming
Published: 2022-01-26 06:02:35

Even before the prevalence of hybrid and distributed-first working, the regular standup meeting has established itself as the pulse that keeps our teams moving. The name “standup” is an artifact from the intentional activity of conducting the team meeting while standing together.

> If you want to skip ahead please [install this free extension](https://marketplace.visualstudio.com/items?itemName=stateful.stable) to enable VS Code to regularly apprise you of progress.

If you don't regularly attend team meetings such as standups, checking in with yourself regularly is still useful. It will help you understand if your efforts are helping to achieve your goals and enable you to identify distractions.

## Let VS Code do the heavy lifting 🦾 for you

These days, it’s safe to say that most of us (accelerated by this global pandemic) are joining standups sitting in a chair from the comfort of our home via Zoom. What we’ve come up with is basically a way for VS Code to automate your standup contributions. Right from within VS Code.

![Stateful Standup CLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjj56n3nr96pi1efc6ko.png)

## Check out the stateful CLI 💻 for your terminal

If you are a native of terminal. We've got you covered, too. You should give the `standup` CLI a spin. Install instructions for both CLI and the VS Code extension are [available here](https://www.stateful.com/standup).

![Stateful Standup CLI](https://media.graphcms.com/tbBTExekT2m26yux2qVH)

## Give us a shout 📮

We intentional decided to release Stateful early to get your feedback. Please don’t hesitate. The good, the bad, and, of course, the funny. Email us at hello@stateful.com, leave a comment, or find us on Twitter at [@statefulhq](https://twitter.com/statefulhq).

Cheers,
Sebastian
Wordpress Block Plugin
Tags: wp, wordpress, blocks, design
Published: 2022-01-26 05:55:17

---
title: Wordpress Block Plugin
published: true
description: Plugin for WordPress Blocks
tags: wp, wordpress, blocks, design
//cover_image: https://direct_url_to_image.jpg
---

Hey guys, 

I work only with WordPress and now I search for a template to make easy new wordpress blocks. I use only a selfmade template with the plugin acf to get my customers websites ready. 

In the future I will use WordPress Blocks. Have anybody a good tip for a Blank Template?

Thank you
How to make text responsive
Tags: beginners, tutorial, css, todayilearned
Published: 2022-01-26 05:54:49

Currently was developing a furniture website landing page which is but at that time i was struggling to make text responsive.

And just found a perfect result on google from W3Schools.

![Found it](https://media.giphy.com/media/89xKvICc067ZnQl5KB/giphy.gif)

We can use "viewport width" to make any text responsive on web page.

[click checkout whole experiment with output](https://www.w3schools.com/howto/howto_css_responsive_text.asp)