teleren/devto huggingface dataset:
User-friendly way to set your CSS font size
Tags: todayilearned, css
Published: 2020-07-13 18:33:34

Today I learned that from the perspective of accessibility, it's bad practice to hardcode a root font size in your application in pixels 🙈
```css
html {
font-size: 10px
}
```
Why? Some users may have increased the default font size in their browser settings to help with the legibility. By hardcoding the root font size in your CSS with pixels, the web browser won't have an effect on your site and the user may end up struggling or resorting to manual zoom. And that's just bad UX.

**So, how to solve the situation when you want your app's root font size to differ from the default 16px?**

We need to tell our CSS to calculate it as a percentage from the default. If 16px is 100% then 10px is 62.5%.
```css
html {
font-size: 62.5%
}
```
With this set-up, you can now set up the rest of your app's elements with rem:
```css
.btn {
    font-size: 1.6rem;
}
```
**Everyone wins!**
* Your app has its custom settings
* Your app also listens to default browser settings and takes the user's chosen font size as the new root font size to make calculations from

*****

💻 Information from Jonas Schmedtmann's [Advanced CSS course] (https://www.udemy.com/course/advanced-css-and-sass/)
LibreBadge, Free and Open Source ID Badging
Tags: contributorswanted
Published: 2020-07-13 18:25:08

My name is Micah and I am a high school student, class of 2022. A friend and I decided to create LibreBadge (formerly energized-id) after seeing the shortfalls of our school's outdated and expensive ID badge solution. My friend made the initial proof of concept solution that used hard coded ID badge templates and data models. I decided to continue on and pursue user swappable data models and templates. LibreBadge is written in Python Django and I could use some help with front end and back end development. I am currently stuck trying to design and implement a proper front end user interface that is not only modern and stylish but also robust enough to compete with HID Asure ID and EntrustDatacard IDCentre. As soon as I meet that goal, I want to expand LibreBadge to be able to manage and integrate with physical access control solutions, RFID magstrip and smartcard credentials and add secure digital credential issuance and remote credential verification. If you're interested in contributing, check out the project's website [librebadge.com](https://librebadge.com), [github](https://github.com/LibreBadge/LibreBadge) or email me at [memtech3@gmail.com](mailto:memtech3@gmail.com).
Mitrhril request...
Published: 2020-07-13 18:13:15

Using Mithril is just using Javascript.
I continuously look other awesome libraries like Sinuous, Solid, Surplus, Hyperapp, Svelte, but I can't leave Mithril for those :-)

```js
let app = document.getElementById("app");

const urlapi = "https://randomuser.me/api/?results=10";

let Titre = m("div.w3-white.cust-div-titre.w3-padding", "Users");

const cardUserCss = "div.w3-panel.w3-card.w3-teal.cust-div-user";
const imgUserCss = "img.cust-img-user";
const spanUserCss = "span.cust-span-user";
const listContainer = "div.cust-div-container";

let User = function () {
  return {
    view: ({ attrs: { user } }) =>
      m(
        cardUserCss,
        m("p", [
          m(imgUserCss, { src: user.picture.medium }),
          m(spanUserCss, user.name.first),
          m(spanUserCss, user.name.last),
        ])
      ),
  };
};

let users = [];
let createListUsers = (user) => m(User, { user });

let App = function () {
  return {
    oninit: m.request({ url: urlapi }).then(function (data) {
      users = data.results;
    }),
    view: () => [
      Titre,
      (users && m(listContainer, users.map(createListUsers))) || "Loading....",
    ],
  };
};
m.mount(app, App);

```
You can test it here : [Users](https://flems.io/#0=N4IgzgxgTg9gNnEAuA2gBgDQEY0A4B0aAnCUbgCwDs5WATFlgLoYgBmAlnAKZjIqgA7AIYBbLshD4AFgBcRiFhBgCZXFRIA8UrkIAmAPgA6AjXHYCA1gAIoXOAF5D4GQE9uYbVxlOrU260cQWRkABzAkAHoIgHdY-GiAZkgpGHgwfCURGISIMDAI8myMvKcjEwjtPTLjDV12ADcrdl1AoRCQ0o0IuvqykBYwOy4IGXZlXiQQciQ0EABfDEFRcUn8ACteRWVVdUnuGSs2kKt7K10YCABXMRV8AHMvAFFuG5kAIRcASV0ACicjpwASgA3MZjEoBGADpcoHA2uwTlYnMEwpEIlAhAJziJLoMoPgxBF4REAPy2MCXOAyMD2HBOUECYz7KwAFXYMlsiJEfxAPXiCQAtNEpOyuBlcTIBT0BaMOWLEgKQno6gI7k4MEiQABVPFgIEM8HjA4QIRQXQ6rhQADCeURTj5CqVAjs-IFJrNrtUQjg4qhUoaAtxlvphshB3YIjuFutttOTgjd19koTgbxIYEEKhVjATujNrAdvATqTApzmNTwZADMzBzMUKt2yE5kthb5Vz90ohMibzqg6aZXis0cRrEuGdGyisP0BVmAxisNi8MIEs-nC6s9XYXGiSCnwEOMg54VnViDUCscwvM-sZXX6+5a7vC-d5rx+Ywj6fD5AHX6VhQn5PlY3IJnmeQavuYBQBAu5nvgITsCMMJimIdTXFeH4rkB94-GWAhgWAGpwcIYj4BwUBQoCmHYTheEEUReL4CRYpwpR1HYYwgKAVYVFrnMDL8WCAjMmeBanCgjAMsy0A6KoAAy7BQtGYlTme176MBPzRhBp54leBrCYOACC7QjmOIxjCu06rlhtgyMuNl3so5jsruIj4LYACOlw8DIPz7jCcCwbC8JXvgMjaAIPyjuOllTroQjdjOc5YXeomIgl3YeTwlLUgyd5zLxqUbluO5Tup-7cWycrsXePzpQAZA1ml1jIDYqD2loMZa6QiG0PwyYlXAKUpuqAuNVgAD6TZqckwHo5iJvgy3qp+zB8QJDLuSIMBjn5RwaiZIQgsY-TgEMFnjBIaAzAK5A3bMCxLGIEjFJsIBdmoMive2kqdo2zbnilC59VAdzmDKMAhLudBoCEAAewILsYcxCSW0pno5VjRM0EW7gAbGgcOI2uoPgwIMyHJcMgwPlwGmuTAoAEYwIeMAiDDxMCWjv0CimmPA1YLNmpaAoYmhx4AKxoAApHTZMQ1A7B3LInMI9zjICCW-N4kgKT1C2gtXBRMBQLuIQwOYqhQBrxglnhFZA2udQ5nCLi7uYZjOszcAXBYSOkwzivK6rViS+ryMCKjmv206jtIORfr7NbWOqPDkocpiYCsKbHMmgh3ZmAAXlwtta7z0qypygs09DaB0xbYDspZu4cPDXC6HTOO6HjOCy3TOcqKW7Al7uCS0Ora5p5K3rKxTVgQF9loCWdgzcJdkISAkCRIPQ8zMCAXsWBM-AgMxEgiOyficGdgUSCi4RRGOIQWImmQRJfEVK3AAACWD4P-fGH8r7f3WO9VwIQVjgGgOwEI305iMDmEAA)
It's time to give some love to your ex
Tags: webdev, gatsby, react, cms
Published: 2020-07-13 18:11:52

I'm talking EXPERIENCE, btw, for both developers and editors. What did you think we were talking about? ;)

Join our very own [James Vidler](https://twitter.com/jameskvidler) + [Josh Comeau](https://twitter.com/JoshWComeau) from [Gatsby](https://gatsbyjs.org) in this live webinar!

### WHAT WILL YOU LEARN?

- Why the Editor Experience is important
- What Editors don't like
- How to address Editor issues

### WHO SHOULD ATTEND:

- You are into JAMstack, but wary of how this changes the Editor Experience
- You are using Gatsby and you want to learn about Gatsby Cloud/Preview
- You want to learn about the power of Agility CMS Page Management

**Host**: James Vidler, VP of Product Agility CMS. VR game enthusiast. Dog person.

**Guest**: Josh Comeau. Staff software engineer at Gatsby Inc. Instructor at Concordia Bootcamps. Beat Saberer. Cat person. :) 

Check out [Josh's blog here](https://joshwcomeau.com/)!

[REGISTER HERE](https://agilitycms.com/resources/events/develop-faster-give-love-to-your-ex?source=top-bar-site)
Principles of Object Oriented Programming
Published: 2020-07-13 18:06:23

Object Oriented Programming involves using objects to model real world things that we want to represent inside our programs.
An **object** is an instance of a class that has methods and properties.
A **class** is a blueprint of an object.Classes can have many objects.
Let's take a look at the **Principles of Object Oriented Programming**
1.**Encapsulation**
This involves enclosing or hiding something.In an object,the methods and properties are enclosed within the object.An object keeps its state private, inside a class.Other objects don't have direct access to this state.To communicate with the object, you should use the methods provided but you cannot change the state of the object.
**for example**
class bird {
constructor (name, legs) {
this.name = name;
this.id = id;
}
add_Friends(add) {
this.add = add;
}
getDetails() {
console.log(`Name is ${this.name}, Friends is ${this.add}`);
}
}
let bird1 = new bird("Hooky", 2);
bird1.add_Friends("Batu");
bird1.getDetails();
2.**Abstraction**
It involves hiding complex details and showing simple ones.It helps code to be more understandable.
**for example**
function man (fName, lName) {
let firstName = fName;
let lastName = lName;

let getDetails_noaccess = function() {
return (`My first name is ${firstName}, my last name is ${lastName}`);
}

this.getDetails_access = function() {
return (`My first name is ${firstName}, my last name is $ {lastName}`);
}
}
let man1 = new man("Samson", "Tunny");
console.log(man1.firstName);
console.log(man1.getDetails_noaccess);
console.log(man1.getdetails_access());
3.**Inheritance**
It is gaining something from someone else.In Object Oriented Programming, it allows for parent class to pass functionality to a child class hence avoiding repeats.It uses extends to create a subclass of the object.
**for example**
class person {
constructor(name) {
  this.name = name;
toString() {
return (`The name of this person is ${this.name});
}
}
class student extends person {
constructor(name, id) {
super(name);
this.id = id;
}
toString() {
return (`{super.toString()}, Student ID is ${this.id}`);
}
}
let student1 = new student("Nyota", 20);
console.log(student1.toString());
4.**Polymorphism**
It is something having multiple forms.In Object Oriented Programming, it involves the same method being used on different objects. Polymorphism gives us the ability to call the same method on different objects.Each child keeps its own methods as they are.
**for example**
class A {
display() {
console.log("A is invoked");
}
}
class B extends A {
display() {
console.log("B is invoked");
}
}
let a = [new A(), new B()];
a.forEach(function(msg) {
msg.display();
});

**Conclusion**
These principles are what make JavaScript to be an Object Oriented Language.All these principles are meant to create a better understanding and increase the usability of objects.They also help reduce repetition of code hence leading to clean code.
Enable the fingerprint reader on a t480s 
Published: 2020-07-13 17:49:59

The fingerprint reader built into the Lenovo t480s is not supported by libfprint. Finally, a project at GitHub was able to get it running: https://github.com/uunicorn/python-validity. The project is already available to Arch users via the [AUR](https://aur.archlinux.org/packages/python-validity) and for apt users via the install instructions at GitHub.


You can verify if you have the supported fingerprint scanner via running `lsusb` and looking for `06cb:009a`.

If you have such a USB device, you can install the package from the AUR and get it running via the following commands:
```
yay -S python-validity
sudo validity-sensors-firmware
sudo systemctl start python3-validity
fprintd-enroll
```
`fprintd-enroll` will ask you to enroll your right index finger and when you are using Gnome and GDM, you are ready to use your scanner. Just lock your screen and log in again with your finger.
CDS and .NET  
Tags: ama, powerfuldevs, azure, dotnet
Published: 2020-07-13 17:47:33

--- 
title: CDS and .NET  
published: true 
description: In this session, Gautam Thapar will show you how to use the Common Data Service when building .NET apps. 
tags: ama, powerfuldevs, azure, dotNET 
--- 
<hr /> 
  
#### #PowerfulDevs Conference 
  
`RSVP HERE BY JULY 15:` 
[https://aka.ms/powerfuldevsconf](https://aka.ms/powerfuldevsconf) 
  
The [Powerful DEVs Conference](https://aka.ms/powerfuldevsconf) is the first virtual conference of its kind. We will showcase how developers can leverage the Power Platform to build applications faster and with far less effort. Connect with industry-recognized ProDev influencers, Microsoft Cloud Advocates, trusted and diverse community leaders, and members of the Power Platform Team. 
  
`BOOKMARK THIS FOR RESOURCES AND DISCUSSION WITH SPEAKERS`   
{% link https://dev.to/azure/powerfuldevs-conference-join-us-on-july-15th-online-fe3 %} 
  
Revisit this page during the event to engage in live (and post-event) discussions on those topics with both speakers and community. The speakers will be here for a live Q&A for at least 30 minutes immediately after their session concludes. After the event, come back to find additional slides, videos, and resources for this session. 
  
<hr /> 
  
## About This Session: 
  
`July 15, 2020: 14:30 PDT - 14:55 PDT` 
  
From console to mobile to web apps to services, learn how to use the Common Data Service when building .NET apps. This will be a demo heavy session that include Azure Functions, using it in mobile apps written in Xamarin, and web apps written with Blazor. 

Additional Resources: [Common Data Service Developer Guide](http://aka.ms/PowerCDS)
  
## About the Speakers: 
  
Gautam Thapar is a Principal Product Manager on the Common Data Service Product team. Follow [@gautamthapar](https:// https://twitter.com/gautamthapar) on Twitter.
Building the xmas lights from Stranger Things
Tags: webdev, sideprojects, arduino
Published: 2020-07-13 17:45:12

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cvlvp6qx6q7wi49hewnm.jpg)

After re-watching season one of Netflix's Stranger Things, I thought it would be neat if I built the xmas lights from the show.

I originally tried to solder individual addressable LEDs so I could stick them in old xmas light bulbs, but very quickly abandoned that idea after spending an hour soldering a total of 3 LEDs.

Eventually I connected an LED strip to an ESP 8266 micro-controller and programmed it to curl an endpoint; any text displayed on the endpoint is processed and the corresponding LED assigned to the letters (A-Z) will flash one at a time.

On the server side, I used a simple flask application combined with redis, allowing users to submit messages with a  form. Every time the micro-controller curls the server, a message is popped off the queue and displayed. This ensured all messages sent to me were received, even if I left the controller unplugged.

I posted the project online and received over 8 million views, and tens of thousands of messages (the queue is still not empty almost a month later).

If you're interested in building something simple, I highly recommend it - it's an easy project to get started with and I'm more than happy to share my code.

[I also made a quick video on the project if you're interested!](https://www.youtube.com/watch?v=XM_Spt3Ec5A)
Rename the master branch on GitHub web, without command line Git
Published: 2020-07-13 17:42:00

Most of the guides to renaming the `master` branch to `main` (or whatever you choose) resort to asking you to to use the command line Git app to check out the repo, make the change and push it back up. That's fine if you're on your development machine with SSH keys added and everything set up, but what if you need to do this from a temporary workstation with no SSH keys or perhaps no Git even? What if you wish to do so using a portable device like your smartphone or an iPad?

I have a lot of repositories on GitHub, both public and private. Some of these are past projects that I don't have a local working copy of, so checking out and going through all those steps seems like a tedious task.

Thankfully, there is an easier way using the GitHub web interface that involves none of this. From the GitHub repo that you wish to do this for...

1. Click on the branch button again and type in a name for the new branch, eg `main`. _Ensure you're doing this while on the `master` branch._
2. Click on the branch button once more and then on **View all branches**.
3. In the list of branches that shows up, next to your `master` branch, click on the button to **Change default branch**.
4. From the dropdown that shows up, pick the name of your new branch and click **Update**.
5. Read the warning and click **I understand, update the default branch**.

You're done at this point, but you can and should also go and delete the `master` branch.

6. Click on the **Code** tab to return to the code.
7. Click on the branch button and **View all branches** again.
8. Click on the red trash can icon next to the `master` branch.

That's all it takes!

Thank you for making the world a better place. Stay safe and keep coding!
Launching my blog 🚀🚀🔥🔥
Published: 2020-07-13 17:39:45

Hi everyone, today i took a step i always refrained to do these past days, i launched my own blog, check it out at:
[blog.snow-blade.vercel.app](blog.snow-blade.vercel.app)
I built it with [nextjs](nextjs.org/), you can also checkout the [github repo](https://github.com/snow-blade/blog) if you're interested with building your own on top of it.
Also, any kind of feedback for improvement is welcome
Bundle static file to Go binary
Tags: go
Published: 2020-07-13 17:32:13

ใครที่เขียน Go มาสักพักจะรู้ว่า Go มันสามารถ build ได้ง่ายและเร็วมากๆ เพียงแค่ใช้คำสั่ง `go build` เราก็จะได้ binary ที่สามารถเอาไป deploy หรือใช้งานได้ทันที

แต่บ่อยครั้งที่ app ของเราต้องการใช้ file อื่นๆ ด้วย เช่น view engine หรือ config file ต่างๆ ทำให้ในการใช้งานเราต้อง copy file เหล่านั้นไปพร้อมๆ กับ binary ของ Go ที่ build มาแล้วด้วย เพื่อให้ app ทำงานได้ถูกต้อง

แต่ก็มีวิธีง่ายๆ ที่ทำให้เราสามารถเพิ่ม file ที่ต้องการเข้าไปใน Go binary เพื่อความสะดวกในการ deploy โดยใช้ package [`pkger`](https://github.com/markbates/pkger) มาช่วย

## ตัวอย่างการเพิ่ม static file ไปใน Go binary

สมมติว่าเรามี app ที่ serve html และมี directory structure แบบด้านล่าง

```
.
├── go.mod
├── go.sum
├── main.go
└── views
   └── index.html
```

เริ่มจากการ install `pkger`
```
go get github.com/markbates/pkger/cmd/pkger
```

และ initial `pkger` ใน project ของเราด้วยคำสั่ง
```
pkger
```

หลังจากนั้นจะมี file pkged.go เพิ่มเข้ามาใน project ของเรา
```
.
├── go.mod
├── go.sum
├── main.go
├── pkged.go <- this file
└── views
   └── index.html
```

จากนั้นเพิ่ม static file ที่ต้องการ bundle เข้าไปใน binary ด้วยคำสั่ง
```
pkger -include /views
```

ใน `main.go` เราสามารถอ่าน file html ใน directory views ด้วย package `pkger`

```
// main.go

package main

import (
	"bytes"
	"io"
	"log"
	"net/http"

	"github.com/markbates/pkger"
)

func main() {
	f, err := pkger.Open("/views/index.html")
	if err != nil {
		panic(err)
	}
	var b bytes.Buffer
	_, err = io.Copy(&b, f)
	if err != nil {
		panic(err)
	}

	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		w.Header().Set("Content-Type", "text/html")
		w.WriteHeader(http.StatusOK)
		w.Write([]byte(b.String()))
	})

	log.Fatal(http.ListenAndServe(":4000", nil))
}
```

จากนั้น build binary
```
go build -o app
```

เราจะได้ binary `app` ที่มี static file bundle เข้าไปด้วย สามารถนำไปใช้งานได้เลย
RSpec - test console input and output
Tags: ruby, testing
Published: 2020-07-13 17:29:14

Testing the ruby console input (gets) and output (puts) using RSpec is pretty simple.

##### Testing gets input

```ruby
   total = gets.to_i

# Rspec

  allow($stdin).to receive(:gets).and_return(4)
  total = $stdin.gets.to_i
  
  it "should return received input" do
    expect(total).to eql 4 
  end
```

##### Testing puts
Assume we need to test the following output by puts method
```ruby
   def recently_published_books
     puts "==== Recently Published Books ===="
     puts "1. Atomic Habits"
     puts "2. Intelligent Investor"  
  end   
```
Rspec to test the above puts output

```ruby
   msg = <<~PUBLISHED
      ==== Recently Published Books ====
      1. Atomic Habits
      2. Intelligent Investor 
    PUBLISHED
   
   it "should display the recently published books" do
     expect { recently_published_books }.to output(msg).to_stdout 
   end
```
Take care of your eyes with Dark Reader 👀
Tags: tutorial, beginners, tools
Published: 2020-07-13 17:27:31


If we are searching for articles, watching tutorials, reading some documentation, searching for good memes, or just browsing on the web, you and I are spending time surfing the internet and browsers. Although over time I believe that most of internet web pages will have Dark Mode option, today there are a lot of sites that don't have it.

Fortunately, while that is happening, Dark Reader is here 💪.

#🧐 What is it.
Dark Reader is an extension used to build a Dark mode on web pages, using the Google Chrome browser. Although I know there are many more extensions doing that, I think this one is very intuitive and practical. It's not necessary to configure many things, although if you wish, you can customize it.

#⚙ How does it work.
It implements a CSS code to invert website colors, and then get Dark Mode. You can see an example with Coursera.org.

* Before it:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/10xlr5i8ociuutka7um0.png)

* After it:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vb29ng8cviix98uiexfr.png)
As you can see, the changes make the web page much more readable and easy to the eyes.

#✅ How to.
* After install the extension, you will see something like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/it02qtxutjepm96yrvax.png)

You can change the default configuration, but that one is perfect for me.
<br>
* There is a list with specific sites to activate, or not, Dark Reader.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zox3c51fsqksa52lnxzf.png)
<br>
* If you want to change the CSS code, you can access to **Developer Tools** and enjoy:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/35f5934x2jhgf9cfzua8.png)

#⚠ Limitations.
### 1. PC Resources.
If you have a computer with poor RAM, or an old processor, probably this is not a good extension for you. But you can install it, and test how your PC runs... Anyway, you can always uninstall it.

### 2. Knowledge.
If you are someone who does not like complications or go beyond the basics, you will probably have the extension installed, and you will never use it.

### 3. Compatibility.
Right now, I haven't seen sites with problems with Dark Reader, however you and I know that all pages may not be compatible with the extension. We must always be careful with this.

#👌 Some examples.
* Google.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/us9qyuex7b3jx31yefw2.png)
<br>

* Github.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l8lh7es9pbs0tvka1zu1.png)
<br>

* Our beloved Stackoverflow.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m59iwmac9a8l4rry3lh6.png)
<br>

* Writing on docs form Google.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7m1czgb8ilcrm0mmcaea.png)
<br>
You can try any site, it's just about browsing and try... If you know a better tool than this one, or something to say, you can share it!
<br>
P.S.: I'm a Spanish native speaker learning English. So sorry for that 😅.
How to earn money online with 0 or less investment
Published: 2020-07-13 17:26:13

In this time of corona many people have lost their jobs. Many people are struggling for their bread and butter.Many people ask on daily basis in discussions and forums how we can earn money online with 0 investment.  
As an IT Guy this situation lead me to create a blog which could help many friends.
Please checkout on the following link article. how to earn money online. I am sure after reading it you will get a lot of information about earning online with 0 or less amount. If you need any more details please feel free to inbox.
<a href="https://blogs.grksoft.com/single.php?id=7">How to earn money online with o or less budget</a>.
I will elaborate each point in future posts.
Happy reading.