teleren/devto huggingface dataset:
LightDM Web Greeter 3.0.0 arrives
Tags: linux, showdev, lightdm, webdev
Published: 2021-07-28 17:27:46

LightDM is a light display manager for Linux, which have lots of different greeters/themes to choose. The previously known **lightdm-webkit2-greeter**, a greeter that allows themeing with web technologies like HTML and JavaScript, has been abandoned since 2017-2018, before transitioning to **web-greeter 3.0.0**.

So, I decided to fork it and continue the Antergos team work, and finally it is here, [web-greeter 3.0.0][web-greeter], a greeter that uses PyQtWebEngine to show gorgeous themes created with simple or very complex web technologies.

## Theming

See the [Glorious theme](https://github.com/manilarome/lightdm-webkit2-theme-glorious) by **Manilarome**~ It’s glorious.
![Glorious theme gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tso91g1na404900gju1r.gif)

Also, **web-greeter 3.0.0** comes with two great themes, [Gruvbox theme][gruvbox-theme] and [Dracula theme][dracula-theme]
![Gruvbox theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epjjuvlt9yt8nl4o57xr.png)

![Dracula theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8u8hbx41t9wfb6l2g7u.png)

See the [live demo][live_demo]

## New features!

- **Gruvbox theme** can show the battery and brightness status, two new optional, but great, features!

- As this release uses **PyQtWebEngine**, which relies in Chrome 83, themes have **support for ES2020**.

- Also, users can specify the cursor theme for web-greeter in the config file, inside `/etc/lightdm/web-greeter.yml`

## Changes
There are lots of changes since the [latest Antergos release][l_ant_release]. See the [3.0.0 release][l_release] for further info.

- Migrated from **C** to **Python**. **Webkit2Gtk** replaced with **PyQtWebEngine**
- Name changed to **web-greeter**
- Updated API usage for LightDM 1.26.0
- `lightdm-webkit2-greeter.conf` renamed to `web-greeter.yml`
- Themes are now installed inside `/usr/share/web-greeter/themes`

If you are using LightDM, I recommend you to use this greeter, try some themes and create your own!

[web-greeter]: https://github.com/JezerM/web-greeter "web-greeter 3.0.0"
[gruvbox-theme]: https://github.com/JezerM/web-greeter/tree/3.0.0/themes/gruvbox "Gruvbox theme"
[dracula-theme]: https://github.com/JezerM/web-greeter/tree/3.0.0/themes/dracula "Dracula theme"
[live_demo]: https://jezerm.github.io/web-greeter-themes/ "Live Demo"
[l_ant_release]: https://github.com/Antergos/web-greeter/releases/tag/2.2.5 "lightdm-webkit2-greeter 2.2.5"
[l_release]: https://github.com/JezerM/web-greeter/releases/tag/3.0.0 "Web-Greeter 3.0.0"
Fast and Easy Way to Upload Code to Github
Tags: github, webdev, beginners, tutorial
Published: 2021-07-28 17:17:19

In this quick tutorial we will look at how to get your existing project uploaded to Github, by using the Github interface and a few simple git commands.


### Only 4 simple Git commands:

First set the remote origin, meaning the url outside of your computer where you want to upload.
This is done through this command where you need to change _git-repository-url_ with your specific url:

- __git remote add origin *git-repository-url*__

#### Then only 3 more commands and you're done:

- __git add .__ (adds everything to staging)
- __git commit -m "Git message"__ (Commits staged changes with message inside quotes)
- __git push --set-upstream origin master__ (points to the place you want to upload your code to and push it to remote origin on Github)

{% youtube oGli9RjPpwY %}


I still use this method of uploading my project, because it's so simple and fast. I don't really have to remember anything except for the fundamentals of Git.

## Follow and support me:
I really appreciate subscriptions to my Youtube channel. A big thank you if you feel like subscribing. 
And if you want to follow me on Twitter, or just give some feedback that's awsome too! 👍

:tv: [YouTube](https://www.youtube.com/channel/UCAgVeIc8xD0ARLDOeN0Frag?sub_confirmation=1  ) 

:penguin: [Twitter](https://twitter.com/RedEyeMedia3) 


I try to get out new web dev content on Youtube every week, particularly about fullstack, and sometimes I write articles like this one.
Hope you enjoy!

## Other posts:
- [Simple Custom Hook In React](https://dev.to/redeyemedia/simple-custom-hook-3687)
My First Python Game
Tags: gamedev, python, programming, beginners
Published: 2021-07-28 17:17:12

Hello coders and developers! 
This is the first game I have made a Stone-Paper-Scissors-Game using Python. I have not used any library like PyGame. I have developed it using the *random module* in the **Python Standard Library**.

##Python Standard Library

Python Standard Library is a set of modules which are included with every Python installation.
One of them used in this game is random module.

##Random Module

Important functions in the random module are *randint()* and *choice()*.
In this game I have used the *choice()* function.
**1. randint()** ---> This function returns any random integer within the given arguments.
**2. choice()** ---> This function returns a random value from a tuple or a list.

Talking about my game, it takes a user input for stone paper or scissors and the computer chooses a random value i.e. stone paper or scissors. You know the rest rules I think 😉
So this was the simple logic I used.

The link for all the files is here. I have also converted the game into a module so that it looks clean 😁

Happy Coding! 👨‍💻👩‍💻

{% github JaiIrkal/Stone-Paper-Scissors-Game %}
LetsGrowMore Web Development Internship Experience
Tags: html, css, javascript, react
Published: 2021-07-28 17:14:30

**Hello everyone**, 
       I have successfully completed the web Development Internship at LetsGrowMore by completing the Task-1 and Task-2 assigned by them.

**Task-1 :** Single-Page Website
**Technologies used:** HTML, CSS, javascript, reactJs
**Code Editor:** Visual Studio Code
**Github Link:** [https://github.com/RaghulSayee/Lgm-Task-1]
**Website Link:** [file:///C:/Users/HP/Desktop/TASK%201/TASK%20-%201/index.html]

**Task-1 Experience:**
    I have learnt HTML, CSS and javascript for designing this website through w3schools. I faced some issues in coding for the responsiveness of the website. On the whole it was a great experience and I have learnt and cleared the issues about how to code to set our current responsive locations on maps for contact and for the responsiveness of the website. 


**Task-2:** Web Application Using Create-React-App
**Technologies Used:** HTML, React js, Javascript, CSS
**Code Editor:** CodeSandBox
**Github Link:** [https://github.com/RaghulSayee/Lgm-Task-1]
**Website Link:** [https://ixiy6.csb.app/]

**Task-2 Experience:**
 I learnt React JS to complete this Web Application. In this I have used API link to fetch the data to display. This is a simple Web Application to display the users of the brand while clicking in the get users button. This gave me a great experience attempting a new skills on Web Development.

**Conclusion:**
 I thank Mr. Aman Kesarwani and LetsGrowMore for giving me this opportunity to work on the projects based on Web Development. Through this Internship I have learnt and gained a lot of practical knowledge in the field of Web Development.
 To know more about LetsGrowMore Internships visit the site [https://letsgrowmore.in/] and [https://letsgrowmore.in/vip/].
Learn Command Line
Tags: commandline, bash, scripting
Published: 2021-07-28 17:08:43

---
title: Learn Command Line
published: true
description: A simple guide to command line.
tags: commandline, bash, scripting
//cover_image: https://direct_url_to_image.jpg
---

This is a cheat-sheet to go along with [the stream I did on Scrimba YouTube channel about command line](https://www.youtube.com/watch?v=kLmt437GfTY).

# Command Line notes

## Where am i? What's here? How do i console.log?

```sh
pwd
ls
echo 'hello Scrimba!'
```

## CRU(M)D

```sh
# create
mkdir cmd-session
cd cmd-session
touch script.sh

mkdir sub-folder

# read
ls sub-folder
cat script.sh

# move/update
mv script.sh sub-folder/script.sh
mv script.sh new-name-new-file.sh

# delete
rm script.sh
rm -rf sub-folder
```

## Execute

Create a `script.sh`, example:

```sh
# touch script.sh, open it and write something like:
echo "hello, running script!"
echo "where am i?"
pwd
echo "ok, let's go somewhere else!"
cd /code
pwd
echo "that's better"
```

To execute a script:

```sh
./script.sh

### oh no, permission denied! what now?
```

## Permissions

```sh
# see permissions
ls -l
# they are repeated, 3 times, for user (owner of the file), group of users, everyone else.
# -rwx - read, write, execute
# to change permissions
chmod u+x ./script.sh
```

## Alias

```sh
alias script='~/script.sh'
# is this an alias?
type script
```

## Getting help and Man pages

```sh
node --help # -- is how you indicate a flag, -h is a shorthand, so node -h is the same.
```

For linux's own utilities, --help wouldn't work, so they have `man` manual command.

```sh
man ls
```

For a more visually pleasant `man` pages:
https://explainshell.com/

## Bonus: Search

```sh
grep 'echo' ./script.sh

grep '<body>' ./
# grep: ./: Is a directory error, so you need to add recursive flag to search through directories
grep -r '<body>' ./
```
PHP __construct (🧙‍♂️Lesson 1: PHP Magic Methods)
Tags: php, code, programming, laravel
Published: 2021-07-28 17:04:55

{% user cleancodestudio %}

[![Twitter Follow](https://img.shields.io/twitter/follow/cleancodestudio.svg?style=social)](https://twitter.com/cleancodestudio) 

---

Today, we'll quickly cover the most popular PHP magic method - `__construct`.

{% youtube 4MLA6ssPHGA %}

---

## __construct magic method

---

> _PHP allows developers to declare constructor methods for classes. Classes which have a constructor method call this method on each newly-created object, so it is suitable for any initialization that the object may need before it is used._

---

## Using the PHP __construct magic method

---

```php
<?php

class User
{
    public $name;

    public function __construct($name)
    {
        $this->name = $name;
    }
}

$timmy = new User('Timmy');


echo $timmy->name;

// "Timmy"
```

{% user cleancodestudio %}


[__construct PHP Magic Method](https://www.cleancode.studio/series/php-magic-methods/episodes/1)


---

{% user cleancodestudio %}

--- 

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to 

https://cleancodestudio.paperform.co/
Looking for Code Organization Advice
Tags: discuss, javascript, typescript, graphql
Published: 2021-07-28 17:02:34

---
title: Looking for Code Organization Advice
published: true
description: A few questions regarding how you organize your code base: How do you like to organize your JavaScript, TypeScript, or GraphQL code base?  ...
tags: #discussion #javascript #typescript #graphql
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cem3pozfgqzo2td5mtcb.jpg
---
A few questions regarding how you organize your code base:

* How do you like to organize your JavaScript, TypeScript, or GraphQL code base?
* Have you written, or know of a post or documentation that details how you like to organize you JavaScript, GraphQL, and/or TypeScript?

Thanks for your thoughts and ideas!
Which Company Runs a Great Developer Relations Program?
Tags: devrel, opinion
Published: 2021-08-06 23:55:07

---
title: Which Company Runs a Great Developer Relations Program?
published: true
date: 2021-07-28 17:01:52 UTC
tags: DevRel,Opinion
canonical_url: https://maxkatz.org/2021/07/28/which-company-runs-a-great-developer-relations-program/
---

If you attended a Developer Relations, Developer Marketing conference, or meetup then you probably heard that Twilio and Stripe run excellent Developer Relations programs.

And they do, absolutely.

[![Ask Your Developer](https://katzmax.files.wordpress.com/2021/07/twilio_ask_your_developer.jpg?w=1024)](https://katzmax.files.wordpress.com/2021/07/twilio_ask_your_developer.jpg)<figcaption>Image credit: <a href="https://techcrunch.com/2021/01/15/twilio-ceo-jeff-lawson-says-wisdom-lies-with-your-developers/" target="_blank" rel="noreferrer noopener">TechCrunch</a></figcaption>

Both Twilio and Stripe have teams of passionate and helpful Developer Advocates, good developer experience, good documentation, getting started guides, sample apps, API reference, a place to get help (support), SDKs and vibrant communities.

Of course there are many other companies that do Developer Relations well but these two (Twilio and Stripe) tend to be mentioned the most.

Now, I think what is rarely mentioned is the fact that both Twilio and Stripe (and many other companies) offer a compelling product/service. They provide a service that helps developers solve a problem. For example, Twilio enables developers to add SMS capability to any app. And Stripe enables developers to add the ability to accept payments. Again, both provide a great value, they both solve a problem.

It’s hard to build a good Developer Relations program around a product or a service that doesn’t provide a lot of value. What do you think?
Pure CSS Olympic Rings 💫
Tags: html, css, webdev, dog
Published: 2021-07-28 16:57:15

## My little tribute to the Olympics.

In my last [streaming](twitch.tv/baumannzone) I created the **Olympics logo** in pure HTML and CSS.

It seems to be easy, after all they are only circles, but you will need to think twice and create your mental diagram to make each ring fit. As you can see, rings are intertwined.

It was a funny stream. I liked it a lot. Especially when I wasn't able to center the rings `<div>` and 4 (supposedly) senior devs were trying to help me.
That's the main reason by which I love doing live-coding. We are a team, we learn together.

Actually, it was me alone, doing some live coding alone through [codepen](https://codepen.io/baumannzone), but getting help from the community in the chat (as usual). _Love you, subs!_ 💜 

Finally, we managed to center it quickly. I believe it isn't the best solution, but it works. 
When you are doing live coding with people looking at you, it doesn't matter how you achieve it. Just do it!

![olympic rings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m7po2ulrbfc2yfg6k44.png)

🎨 The next day, I had in mind to animate the rings. We accomplished this task by creating 3 CSS animations and chaining them together.

The result was amazing. Don't you think?

![animated rings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76gju9n6e4mnqwv6p2vl.gif)

I'd be interested to hear what you think. Let me a comment below. 

👋 That's all. Hope you like it as much as I do. Stay safe!
Day 7 of Training: Make a Cash Register app
Tags: javascript
Published: 2021-07-28 16:48:20

Today was my Day 7 of training in Ryaz. The objective was to make a Cash register App.

* Your program has currencies of Rs. 1, 5, 10, 20, 100, 500, 2000.
* Your user enters a bill amount say Rs. 243.
* Your user then enters a cash given say Rs. 2000.
* Now, help the user by telling how can he/she return the change to the customer with minimum number of notes?

![Capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wwjgrzqyiv2q70v1964.PNG)

I've made this project in vanilla js. It was a good project to brush up the basics. The logic was to traverse the remaining change through the array. Most of my time has gone to designing and error handling.

The live project is on my [code sandbox](https://xlkqn.csb.app/)

The code for this project is updated on my [Github repository](https://github.com/SuryanshChopra/Cash-register-app)

AAAND THAT'S ALL!!
LaTeX & Maths: Math Commands, Spaces and Text in Math Mode, Math-Mode Fonts
Tags: codenewbie, latex
Published: 2021-07-28 16:44:15

Hello, how are you today? How are you going with LaTeX?

Today I will talk about ellipses, spaces in the math mode and I give you a link where you can check the commands of the Greek alphabet and some other math symbols. Let's start !!!

## Commands

I have talked about some commands before in [this](https://dev.to/latexteada/latex-maths-math-commands-for-basic-operations-b8a) post, here I give you some others like 

- **Ellipses** the commands are `\ldots`, `\cdots`, `\vdots` and `\ddots`
- **Over and under lining** `\overline{x+y}`, `\underline{a+b}`

> If you want to know more about symbols and the Greek alphabet you can check it [here](https://es.overleaf.com/learn/latex/List_of_Greek_letters_and_math_symbols). 

Of course, there are lots and lots of symbols, these are the most usual ones, so, if you can not find a symbol I encourage you to search it on internet, because as I said, there are tons of symbols

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84g8s96wq8yzi4zopq2x.png)

Produces 

![Screenshot from 2021-07-27 11-27-50](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6awd1uco724o45e66v0f.png)
 
## Spaces in Math Mode

Have you noticed that it does not matter how many spaces you put in the math mode, it does not produce any change in the equation? Well it is because you need to use special commands to create spaces, some of them are 

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

Produces 

![Screenshot from 2021-07-27 11-39-19](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6djz6qrin4qjfnysl4g.png)

The difference is the space between the characters 

## Text in Math Mode

Sometimes we need to put *normal* text inside an equation, the correct way to do this is with `\text{}`

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3d6jphj4phjntg3b3mc5.png)

Produces

![Screenshot from 2021-07-27 11-45-55](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92fcreoqwxhvxdtld140.png)

Did you notice? The font type changed, so it is better to use `\text{}` to differentiate between *math* letters and *normal* letters

## Math Mode Fonts

We have three different types of letters that can be used in the math mode, these are 
- `\mathbf{}` this is just for text (not symbols) Capital and lower case
- `\mathcal{}` only Capital letters
- `\mathbb{}` only Capytal letters

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

Produces 

![Screenshot from 2021-07-27 11-55-11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zfja828ww3odvuzdl7n.png)

This is all for today, thanks

Follow me on Twitter `@latexteada` Greetings :)
Ubuntu Focal 20.04 default scaling governor "powersave"
Tags: ubuntu, powersave
Published: 2021-07-28 16:13:01

Just recently upgrade to Ubuntu 20.04 and was so far quite happy with a reasonable regression free experience.

But then - as inevitable as it might be - I ended up going for the real stuff: building full system from source.

This felt awkwardly slow ... and then i found that my CPU was running under powersave governor... i fixed this by explicitly going for performance ....

For that I did:

```
/etc/default/cpufrequtils:GOVERNOR="performance"
```

Any better ideas on how to get back "ondemand" type of behaviour?
How List Rendering Can Cause Huge Cumulative Layout Shift
Tags: webperf, javascript, corewebvitals
Published: 2021-07-28 15:55:57

---
canonical_url: https://wicki.io/posts/2021-07-list-rendering-cls/
---

Do you...
- care about Core Web Vitals, especially Cumulative Layout Shift (CLS)
- use list rendering with a JS Framework (`v-for`, `*ngFor`, ...)

If you answered both with yes, then please read on.

![update-list-cls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nqaa33ozyiguxik84b6.gif)
 
JS frameworks—such as Vue, Angular or React—can cache DOM nodes of list items*. Filtering a list will therefore be faster, because DOM nodes of list items can potentially be reused. This reuse is done by moving the DOM nodes around, instead of re-creating them.

But when a list changes and the nodes of list items merely switch their positions, **the reused items are considered as a shift in the DOM (CLS) by Core Web Vitals on slow connection devices**.

*) Vue uses `:key`, React uses `key`, Angular uses `*ngFor` with `trackBy`

---

# Why only on slow connection devices?

CLS takes user interaction into account. When content is changing after a click, it's not counted towards the CLS until a grace period of 500ms. If the delay of content changing takes longer than 500ms, you'll be penalised with the full CLS score. 

Fast connection devices will usually finish updating the list before the grace period ends.

Keep an eye out in your Google Search Console for URLs that are frequented by countries that are further away from your servers/CDNs and have a lower average mobile bandwidth.

![gsc-urls-affected-by-lower-bandwith](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2pamtctg0jjnyljrdqp.png)

---

# Solution

Google's calculation of CLS [has been changed before](https://web.dev/evolving-cls/), so I would love to see this here too. Until then it's on us to not get penalised.

We'd have to make sure, that the DOM elements get re-created every time a list gets updated or filtered. I wouldn't advise to completely drop the unique key (`:key`). Rather think of a key for each list item that is tied to the request itself, e.g. `:key="item.id + "-" + requestQuery"`. The filtering itself will have a brief flash due to recreating the DOM node, but considering the Green URLs that Google will give you it's worth it. 

With this you can continue with infinite scroll and page navigation without perf loss.

---

Simon Wicki is a Freelance Developer in Berlin. Worked on Web and Mobile apps at JustWatch. Fluent in Vue, Angular, React and Ionic. Passionate about Frontend, tech, web perf & non-fiction books.

👉 [Join me on Twitter to follow my latest updates.](https://twitter.com/zwacky)
Basic Git commands for beginners
Tags: git, beginners
Published: 2021-07-28 15:50:55

Hello everyone!!

I am Nirbhay Parmar and I am a learning web developer. In this post I will be explaining some basic Git terminologies which is useful if you are entering into development field or want to contribute in any open source project on Github.

Now the first question arises from this introduction is that what is Git and why should I even care about it? Some of the beginners are also confused between Git and Github. So let me explain the Git first then I will explain about Github after it. 

Git is a version controlling software. It is used by developers for maintaining different versions of any project they are working on. In an ongoing development process there are many developers working on a single project. They are working with one or two features of that project. So they need a system that can keep track of the changes and commits made on a project and if someone broke the code while experimenting on any feature then there should a way to reverse that faulty code. So Git does the same. Git keep track on files and code used in a project and give a way to make different versions of same projects called "branches" to experiment without worrying about breaking the code. 

Now what is Github? Github is a place to store your code or your repository online to share it with your team or online. All open source projects are on Github and any who knows how to code can contribute to it. Another such service are Bitbucket and Gitlab.

Now some basic Git commands- 

1. **Git init -** Git init is used to initiate a local git repository. It is first command whenever we want to use git.

2. **Git status -** It shows the status of the working tree. Git status is used to show the changes made, any newly created file that is not added to repo.

3. **Git add -** As the name suggests it used add new files and folders to git.

4. **Git commit -** It is used to save changes to the repository. 

5. **Git clone -** It is used to setup a local git repo using any other remote git repo hosted on Github or Bitbucket.

6. **Git push -** It is used to push commits to your remote repo.

7. **Git pull -** It is used to fetch changes made by others to remote repo to your local repo.

So these are some common Git commands which we can use in your projects. 

There are so many other commands which I will discuss in upcoming parts of this series.