teleren/devto huggingface dataset:
Can't Find What Your Looking For? Perform Better Searches!
Tags: tutorial, python, beginners, programming
Published: 2022-09-12 10:23:18

## Trust me, I was there.

Im currently using PyQt to design my GUI's for Python, and finding better ways to code is super important if your not trying to repeat youself. This week Im trying to investigate on YouTube "How To Load PyQt5 UI File Dynamically". And I found what Im looking for, but its not enough of an example. These YouTube Videos only last 10-15mis, and the Influencer wastes like 5-7mins talking about his or her merch they want to sell etc.

If your like me, Im trying to solve my issue and move onto the next, one day when I dig myself out of the hole im in, ill buy everybodys merch! But ot today! 

## The Dilema

When you need more coding examples, Google seems to be weak in alot of ways when investigating your issues further. Better ideas? Tonight I discovered I can use the same search pattern as I do with Google on Github! Yup!

In the search I typed `"Pyqt5 findChild"` because inorder to use my PyQt5 UI File I need to use **findChild** to use the Labels and Textboxes etc. But Im the kind of learner that needs to see something to fully understand how it works. I found tons on github! 

And it wasnt much about how to's, it was actual code that others have written, completed assignments. Yup! Great examples! 

Not much time past after when I realized I need to do more searches this way, so I thought I'd share!

## Quick read! Like, Share, Comment, Unicorn! lol Thanks!!
Sorting colours is a pain!
Tags: css, html, javascript
Published: 2022-09-23 07:28:56

---
title: Sorting colours is a pain!
published: true
date: 2022-09-12 08:49:00 UTC
tags: CSS,HTML,JavaScript
canonical_url: https://drmsite.blogspot.com/2022/09/sorting-colours-is-pain.html
---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30pyi1dxg71fao6xenhx.jpg)

(Cover image by [Garrick Ang](https://scop.io/collections/vendors?q=Garrick%20Ang))

I've written before about [sorting colours](https://dev.to/mouseannoying/polital-spectrum-9ka), and this got me thinking about some work I'm doing in terms of converting some CSS to SCSS (with the proper use of CSS variables, I must add).

As such, I've been wading through some CSS, extracting colours, and then popping them into a `:root` CSS pseudo-class. I do this by looking for `#` and popping the colour into the function as and when I find them. The resulting text is well messy! I thought it couldn't be that hard to sort them similarly as employed in Google Sheets; so I came up with [CSSColourSorter](https://csscoloursorter.annoyingmouse.repl.co), which you're more than welcome to use or steal/borrow as you see fit.

It works by pasting in your whole `:root` directive - you'll then need to copy and paste the resulting test into your CSS/SCSS as noted before, though, [sorting colours is a pain](https://www.alanzucconi.com/2015/09/30/colour-sorting/)!

![Colour Swatch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iac4ikfxyg15fhjaxnxo.png)

I've added a swatch beneath the `textarea`s so you can see the new spectrum - mainly to check that I was doing things right!
Awesome Classic Game List
Published: 2022-09-12 09:57:11

Here are the classic free games for your websites, see **[Gameroco](https://www.gameroco.com)** for more.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dko13uomo2uz3zqjimwl.jpg)

1. Bleach vs Naruto
Game Name	Bleach vs Naruto
Game URL	https://www.narutovsbleach.com
Image URL 1	https://www.narutovsbleach.com/uploads/images/naruto-vs-bleach-40-5845.jpg

2. Bleach vs Naruto 4.0
Game Name	Bleach vs Naruto 4.0
Game URL	https://www.gameroco.com/fighting/bleach-vs-naruto-40.html
Image URL 1	https://www.gameroco.com/uploads/images/bleach-vs-naruto-40-5985.jpg	

3. Bleach vs Naruto 3.9
Game Name	Bleach vs Naruto 3.9
Game URL	https://www.gameroco.com/fighting/bleach-vs-naruto-39.html
Image URL 1	https://www.gameroco.com/uploads/images/bleach-vs-naruto-39-6422.jpg

4. [Bleach vs Naruto](https://www.gameroco.com/fighting/bleach-vs-naruto-50.html)
Game Name	Bleach vs Naruto 5.0
Game URL	https://www.gameroco.com/fighting/bleach-vs-naruto-50.html
Image URL 1	https://www.gameroco.com/uploads/images/bleach-vs-naruto-39-6422.jpg
Jamstack forms
Tags: jamstack, webdev, ssg, html
Published: 2022-09-12 09:54:57

This is going to be a very quick tutorial on how to add [jamstack forms](https://fabform.io) to a static website.

Static websites as you may know are websites that comprise of no more than just HTML, CSS and Javascript. 

A static website by it's very nature does not have a server back-end, so there are no server languages to "post" your forms to --so to speak.

At some point you may want to add forms to your site and since your static website does not have a backend , you will need to employ the services of a [jamstack forms](https://fabform.io) backend.

To add a contact us form to your website we will be using the forms backend service [fabform.io](https://fabform.io).

It's just a simple case of creating a endpoint on fabform.io and adding a HTML contact form to your web page and pointing the form's action method to your newly created fabform.io endpoint.

With your contact form up and running you can now easily collect all of your form submissions.

Here is all the code you will need to get a [jamstack forms](https://fabform.io) contact us page up and working on your site.

```
<form action="https://fabform.io/f/{form-id}" method="post">
 <label for="email">Your Email</label>
 <input name="email" type="email">
 <button type="submit">Submit</button> 
</form>
```
You will need to replace the form's action method to point to a endpoint that you will of have created on the [jamstack forms](https://fabform.io) forms backend service fabform.io

For additional information see how to 
[create a static website with contact form on github pages](https://fabform.io/a/create-a-static-website-with-contact-form-on-github-pages)

There you have it folks. All you needed to get jamstack forms up and running on your website.
7 Actionable Diet Tips for Developers
Tags: watercooler, fitdevs, life
Published: 2022-09-12 09:51:04


I experimented a lot with dietary choices over the last two years. Here is what I found working to improve my energy during the day.

## Intermittent Fasting

I skip breakfasts. It's hard for the first couple of days but increases my energy so much and eliminates the afternoon low. I aim for an eating window between 6 and 8 hours each day.

## Add veggies to each meal 

The more veggies I eat, the less space I have for crap food. So, my diet does not feel like a restriction but rather quality choices

## Avoid sugar

I try to avoid sugar as much as I can – I realized it really exaggerates energy levels from high to low. For consistent energy levels, I eat carbs from whole grains mostly

## Eat good fat

I try to avoid deep-fried food as it contains lots of trans fats. Instead, I try to choose healthier fats like olive oil.

## Make a ritual

I can recommend making one meal or snack a ritual. For me, it's a cup of kefir before bedtime with a boiled egg or some avocado slices. I really enjoy it!

## Stay hydrated

When I feel hungry, I'm most likely more thirsty than hungry. I drink a lot of water over the day and make sure I always have a full glass on my desk

## Don't exaggerate

There are probably more self-help books about dieting than about any other topic. I was trapped in the rabbit hole for a long time. Pick some advice and then follow it 80% Cravings are ok, don't overstretch your discipline. Enjoyment is part of the process

**Making healthy choices is important if you spend most of the day in front of a screen**

Join the discussion on Twitter:

{% embed https://twitter.com/bascodes/status/1569251574026731520 %}
Understanding Google Anthos and its Building Blocks
Tags: cloud, googlecloud, gcp, anthos
Published: 2022-09-12 09:32:42

Google enters a new game of multi-cloud with Anthos. Programmers and IT managers get help from Anthos to navigate the challenging waters of application services. It provides a uniform development and operations experience for on-premises and cloud. It combines infrastructure and application management across on-premises and other public clouds with Google Cloud-backed dependability. With all the features, Google Anthos is changing the way of managing multi-cloud workloads. All cloud platforms try to assist the developers in modernizing applications, but Google Anthos has a centralized approach having everything in it. 

## What is Google Anthos and its building blocks?

Anthos, a contemporary application management platform, offers efficient development and operations experience for on-premises and cloud environments. It has developed a management console for cross-platform workloads. Anthos makes it simpler for businesses to manage their applications if apps operate on-premises, on various public cloud services, or both. It is a different and unique service for the enterprise workload and competes with AWS and Azure.

##**Building blocks of Google Anthos**##

**Google Kubernetes Engine:** Google Kubernetes Engine is the main command-and-control center of Anthos. Customers using the GKE control plane manage the distributed architecture running on the Google cloud.

**Istio**: Istio made the integrated network management of Anthos possible. Istio serves as the service mesh tying together many application parts spread throughout the data center, GCP, and other clouds. It can integrate with load balancers and firewalls for customers having network devices from companies like F5.

**Velostrata**: Google purchased this technology in 2018 for the improvement of cloud migration for Kubernetes. Velostrata has two key features. First, it can stream physical and virtual machines from on-premises environments to GCE instances to generate replicas. Second, it can transform current VMs into Kubernetes apps.

**Anthos Config Management**: A platform that is policy-driven and extensible is Kubernetes. Google streamlines configuration management through Anthos as customers will deal with many Kubernetes deployments across various settings. Anthos Config Management can manage and apply the configuration to one or more clusters, from deployment artifacts, configuration settings, network policies, secrets, and passwords.

**Stackdriver**: Anthos infrastructure and applications get reliability with Stackdriver. Users may track the state of the Anthos-based clusters used and installed app well-being in each managed cluster. This platform is the principal hub for observability, logging, tracing, and monitoring.

**GCP Cloud Interconnect**: Fast connectivity between the corporate data center and the cloud architecture is the dominant feature of the hybrid cloud platform. When linking the data center and the cloud, Cloud Interconnects can give speeds of up to 100Gbps.
Make A Triangle in HTML/CSS
Tags: css, html, beginners, algorithms
Published: 2022-09-12 09:22:45

A typical interview question and a handy way to show off. 
Heres what you need:
index.html
styles.css
A parent container div and Four divs
Liveserver 

![four triangles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5sa1sejrughaf48hdql.png)

```javascript
//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Four Triangles</title>
  </head>
  <body>
    <h1>Four Triangles</h1>
    <div class="container">
<div class="triangleUp"></div>
<div class="triangleDown"></div>
<div class="triangleLeft"></div>
<div class="triangleRight"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

```

```css
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,400;1,500;1,600;1,700&family=Roboto+Flex:opsz,wght@8..144,300&family=Roboto+Serif:opsz,wght@8..144,300&display=swap');
* {
  box-sizing: border-box;
}
/* Body centers the column at 100 vh and hide scrollbars */
body {
  font-family: 'Roboto Flex', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: #eee;
}
.container {
  display: flex;
  justify-content: space-evenly;
}
.triangleUp {
  margin: 3px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;
}
.triangleDown {
  margin: 3px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid #555;
}
.triangleLeft {
  margin: 3px;
  width: 0;
  height: 0;
  border-bottom: 25px solid transparent;
  border-top: 25px solid transparent;
  border-right: 50px solid #555;
}
.triangleRight {
  width: 0;
  height: 0;
  margin: 3px;
  border-bottom: 25px solid transparent;
  border-top: 25px solid transparent;
  border-left: 50px solid #555;
}
```

The main concept here is there are three properties that are needed to create an equilateral triangle.

 We only need three sides and can leave the fourth border out which collapses. 
- 25px solid transparent;
- 25px solid transparent;
- 50px solid #555;



![four triangles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5sa1sejrughaf48hdql.png)
DrivePlyr - Google Drive Proxy Video Player with Many Powerful HTML5 Players & Hidden ID 🚀
Tags: javascript, tutorial, programming, devops
Published: 2022-09-12 09:07:40

{% youtube https://youtu.be/yBbSCjeHxhc %}

---

> Telegram :- https://t.me/cxdiin
> Linktree :- https://linktr.ee/cxdiin

---

> DrivePlyr :- https://driveplyr.blogspot.com
             https://driveplyr.sh20raj.repl.co/

---

{% github  https://github.com/SH20RAJ/DrivePlyr %}
box-sizing - How does it work?
Tags: css, webdev, design, html
Published: 2022-09-12 09:05:07

## Technical explanation

The `box-sizing` property determines how the width and height of an element is calculated.

`box-sizing` only accepts two values: `content-box` and `border-box`.

`box-sizing` default value is `content-box` which means that the width of an element is calculated in the following way:

`actual width = width + border-left + border-right + padding-left + padding-right`

This way it's sometimes hard to calculate the actual width of an element, specially when using relative values.

## Example

In the following example we are using `content-box` by default. The child element has a width of 100%, a border of 8px and a padding of 4px. The actual width is calculated in the following way (you can inspect the element to check it):

`actual width = width 100% + border 8px + padding 4px`

![content-box example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkg5wljsdt3vvvfr7evs.png)

Instead, if we change `box-sizing` to `border-box` the width of the element will take into account the padding and borders. The child component still has a width of 100%, a border of 8px and a padding of 4px, but the actual width is 100%.


![border-box example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxpdz215dgxb6x16pk5w.png)


At the bottom of [the article in my website](https://www.jmalvarez.dev/posts/box-sizing-how-does-it-work) you can play with the following interactive example to see how the width of the child component changes depending on the value of `box-sizing`.

---

## Resources

- [MDN box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
Ops Deliver Confidence
Tags: devops, training, service
Published: 2022-09-12 08:37:40

---
title: Ops Deliver Confidence
published: true
description: Ops Services Done Right
tags: #devops #training #service
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7daaeilfv0ipyr2doih.jpg
# Use a ratio of 100:42 for best results.
---

What is confidence? It's a belief that whatever happens, whatever comes our way - we'll be able to handle it. Either by ourselves or with someone's help.

The world is far from predictable. We never really know what will happen the next moment. Believing otherwise would mean lying to ourselves. Because we don't have control of the outside world. The only thing a person can control is their body and mind. And even that - only to some extent.

The best service providers always sell confidence. Confidence that the room will be clean, confidence that the luggage will get picked up, confidence that the mail will be delivered.

It's the same with Ops service:

We cannot really prevent incidents from happening. Rarely can we promise 5 nines of uptime (it can be done but it's awfully expensive). What we can offer our customers is confidence. 

Confidence that whatever incident occurs - it will be taken care of. Confidence that if we can automate a process - we'll put it on our backlog and prioritize it correctly.
That whenever we discover system's new failure mode - we'll create an alert and a remediation for it.

And we need to always remember to convey that confidence. In the way we document our processes. In how we publish our post-mortem analyses. In how we treat customers' tickets and requests. In the way we communicate our plans and yes - even our doubts.

Because when you convey confidence - you share it. You give it to your customer - so they can check one more worry off their list. And like us all - they have a lo-o-o-ng list.

That's how we strive to do business at [Otomato](https://otomato.io) - with maximum transparency, integrity and confidence. So our customers can rest assured their software will get delivered and keep running even when nobody's watching. And if anything goes down - we'll bring it back up.

We deliver confidence.
Meet Betty, The C code linter
Tags: c, linter, beginners, programming
Published: 2022-09-12 08:34:31

I need to make this clear - "_betty frustrates me!_".

Over the time though, I've learnt to avoid her and I'll tell you how, but first...

## Who Is Betty
Betty is actually a very real person 🤯, according to Wikipedia...

> Frances Elizabeth Holberton was an American computer scientist who was one of the six original programmers of the first general-purpose electronic digital computer, ENIAC. The other five ENIAC programmers were Jean Bartik, Ruth Teitelbaum, Kathleen Antonelli, Marlyn Meltzer, and Frances Spence.

But seriously, this isn't the Betty we'll be talking about today.
Betty is a Holberton-style C code checker written in perl.

Now there's some explanation needed for the above sentence, so I'll start with...

### Holberton
Holberton is a computer science school founded in silicon valley (_that's all you get 😴_)

### Code Checker
Also known as linter.
Lint, or a linter, is a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs.

This means that Betty does not have to run or compile your C code before she detects potential errors and wrong styles.

### Perl
It's just another programming language like C.
Hold on! So Betty is basically a program in one language trying to detect errors in another language 🤦🏾‍♂️

---
Now that you know Betty, how do you use Betty?

> I'm assuming you already have Betty installed. If you don't, checkout the installation guide [here](https://www.youtube.com/watch?v=7Oy5xw8FJO8)

## How to **summon** Betty
The usage is basically just

```bash
betty FILE...
```

Where `FILE...` means 1 file or more.
Once you run Betty like this, Betty would enter each file you specified and do a series of checks. Here is a list of the things Betty checks for

- Indentation

- Length of each line

- Placement of braces `{}`

- Placement of spaces

- Naming of variables, functions, structs...

- Length of functions 🤨

- Commenting

- Macros & Enums

- Header files

You can find exhaustive information on Holberton-style code [here](https://github.com/holbertonschool/Betty/wiki), so you don't fall a victim of Betty as I did 😂😭
Scrum Retrospective: The Archetype Retrospective
Tags: productivity, agile, scrum, retrospective
Published: 2022-09-12 08:25:24

A few years ago, a hiring slot was opened in my team and our manager asked us which profile will be the most useful. We were a dream team, the best of the best. We lacked no skills ! And we didn’t really know how to orient the job description. Should we hire a specialist ? A swiss knife ? A facilitator ? Hard to tell. So I’ve created a retrospective focused on team and individual profile which I had called:

**“The Archetype retrospective”**

## Description

This retrospective is based on Role play and character creation. You have to chose between various archetype: The soldier, the Mage, the Paladin, etc… each with their strengths and weaknesses. So I defined a list of archetypes and asked to each team member to assign an archetype to each of its colleague, including himself. I end up with the following personas:

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

---

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

---

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

---

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

---

![Engineer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0001ilxyni7mg4w0so6x.png)

## Benefit

This retrospective has 2 benefits:

First, this allows everyone to realize the image they give off. Sometime, there is a consensus on a person. Sometime, a person is seen differently by different members. It helps people to better know themselves.

Second, once you agreed on each member’s archetype, you can plot the global team profile by accumulating each archetype profile. Goal is not to have a perfectly balanced team, this is an indicator to help you analyzing your team and should be interpreted. In my case, I end up with a profile like this one:

![Team profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lvl7zfrevjzd7yfmfwl.png)

At first, one could think our team were lacking of team spirit and organization and would greatly benefit of hiring a “Paladin” profile. But our team worked well. There was a very good atmosphere and our release were always on time. But we noticed that we were lacking of polyvalence. And that was true. We were skilled, motivated and efficient developers, but no one was really “transverse”. We came to the conclusion that, instead of adding another specialist, a DevOps multitask profile would be much more valuable for us.

## Conclusion

This retrospective requires people to open themselves and accept judgement, which can be difficult for some. That’s why before doing it, you should be sure you know your team, and it will accept this exercise.

Also, presenting the accumulated graph to management can be dangerous. They may be tempted to always have a balanced team which is not the goal.

I leave you the PowerPoint [here](https://kissyagni.files.wordpress.com/2022/03/archetype.pptx). Let me know if you have tried this retrospective in your team and how it went 🙂