teleren/devto huggingface dataset:
My 10 favorite Tech Twitter tweets from the past 7 days:
Tags: beginners, codenewbie, programming, javascript
Published: 2021-08-31 12:05:51

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

Focus on learning the right skills

By UbahTheBuilder 

%[https://twitter.com/UbahTheBuilder/status/1431121798997893122?s=20]

Learn Flutter the right way:

By tadaspetra 

%[https://twitter.com/tadaspetra/status/1429838246272458754?s=20]

AWS is now the most widely used cloud platform

By dannysteenman 

%[https://twitter.com/dannysteenman/status/1430390741583290375?s=20]

A reminder that more isn't always better

By anniebombanie_ 

%[https://twitter.com/anniebombanie_/status/1431324315782422531?s=20]

Understand JavaScript better:

By Prathkum 

%[https://twitter.com/Prathkum/status/1431175335970750465?s=20]

Here are 8 tips to improve as a developer:

By sunilc_ 

%[https://twitter.com/sunilc_/status/1430784479484907521?s=20]


Read this if you don't know where to start as a web developer

By accolades_dev 

%[https://twitter.com/accolades_dev/status/1431505566845870081?s=20]

If you're overwhelmed, read this:

By FrancescoCiull4 

%[https://twitter.com/FrancescoCiull4/status/1430444025782415360?s=20]

Learn how to secure your WordPress website:

By natmiletic 

%[https://twitter.com/natmiletic/status/1430948043587735555?s=20]

And if you're looking for some buttons use this:

By denicmarko 

%[https://twitter.com/denicmarko/status/1431150521587470339?s=20]

_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2021-08-31 12:00:25

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125997196ca.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q___: Why are keyboards always working so hard?

___A___: Cause they have two shifts!
 -->
Klipse, a new way of blogging
Published: 2021-12-27 15:16:58

---
title: Klipse, a new way of blogging
published: true
date: 2021-08-31 12:00:00 UTC
tags: 
canonical_url: https://blog.moulard.org/klipse-blogging/
---

For a modern tech blogging framework, a live coding experience is quasi necessary.

> [Klipse](https://github.com/viebel/klipse) is a JavaScript plugin for embedding interactive code snippets in tech blogs.

To make this easy, you add a small library to your blog front end dependency, and voilà, you have your `<code></code>` live executing in the browser. As a bonus, your code can no be edited directly in the `<code></code>` tags.

Go check out [this blog post](https://blog.klipse.tech/golang/2021/08/29/blog-go.html) if you want to have more information about Klipse!

# Klipsify your blogging framework

To integrate the klipse plugin on a blog, you have to follow 3 simple steps.

1) Make sure you have `<!DOCTYPE html>` at the top of your html file and `<meta charset="utf-8">` right after your `<head>` (It is required to display properly elements used by Klipse.)

2) Add css and custom configuration somewhere in the page (it could be in the `<head>` or in the `<body>`) before the `<script>` element of step #3. The selector keys are per language (you’ll find in [GitHub](https://github.com/viebel/klipse#configuration) a list of supported languages) and the value are the CSS selector of the elements that you want to klipsify.

```
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector_golang: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify
    };
</script>

```

3) Add the JavaScript tag at the end of the body tag :

```
<!-- ... -->
<body>
    <!-- ... -->
    <script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
</body>

```

# Write some code

Now that you have installed Klipse on your blog, it remains to add some code to a blog post.

Add this code snippet to try it on:

```
import "fmt"

func main() {
  fmt.Println("Hello World! Klipse is so much fun !")
}

```

As you can see, this code is now live and interactive.

Feel free to modify it to your own liking!

# Conclusion

Live and interactive coding was a long dream of mine when creating this blog.

Klipse made this dream super easy to integrate on my blog!

This post was inspired by [@viebel](https://github.com/viebel).
Created CLI Tool that Creates/Remove GitHub Labels
Tags: typescript, cli, github, api
Published: 2021-08-31 11:47:44

### CLI Tool
{% youtube NwGOl6usJ-A%}


Recently I read articles about GitHub labels for issues. I recommend you to check them out. (Sorry one of them is Japanese only)

#### How we organize GitHub issues: A simple styleguide for tagging
https://robinpowered.com/blog/best-practice-system-for-organizing-and-tagging-github-issues

#### Sane GitHub Labels
https://medium.com/@dave_lunny/sane-github-labels-c5d2e6004b63

#### GitHub Labels that are logical, colorful and sensible
https://seantrane.com/posts/logical-colorful-github-labels-18230/

#### GitHub Issuesのラベルを作り直す+Projectのかんばんを自動化
https://qiita.com/willow-micro/items/51eeb3efe5b4192a4abd


I think when you use the GitHub issues, probably many of you need to add/change labels. Actually, the default labels are well... not ideal. Generally, I add some new labels manually after I push the initial commit. That means I go to the issue board and add a label.
After reading the articles, I thought preparing labels that articles mentioned would be ↓


{% youtube CSSMn6yrh34 %}



I checked GitHub API to create labels. Fortunately, there is a Labels API.
https://docs.github.com/en/rest/reference/issues#labels

The usage of the Labels API is very simple. We just need to pass a couple of parameters and create an instance with GitHub personal token since there is a JS library “octokit” that allows us to use the API easily.

{% github octokit/core.js %}

I wrote a simple application with Nodejs and Typescript.
I used a typescript-starter to save time for setup. typescript-starter is useful, but it was a little bit too much for this since the ESlint configuration helped me to detect issues but at the same time prevent running the script quickly lol.

{% github bitjson/typescript-starter %}

The script’s repo is here.
{% github koji/github-label-manager %}


This Nodejs script will ask you 3 things initially. GitHub personal token(wont’ keep it anywhere), GitHub id, and a target repo name.

It will offer 4 simple functionalities to the repo you set.

### Create a label
You will need to pass a new label name, label color(hex code without #), and label description as parameters. Then create a new label on your repo.
### Create labels
This function will create 29 labels which are set as constant here
If you change the constant, you can update labels easily.
### Delete a label
This function will remove a tag from your repo. It requires a label name as a parameter. (In the future, this should get labels list and allow to select a label/labels by multi-select)
### Delete all labels
This will delete all labels from your repo. First, get all labels' names from the repo and pass them as a parameter. The process is the same as “Delete a label”
Why cross-browser testing is overrated, what I learned after 13.5 years of QA at Siemens
Tags: webdev, crossbrowser, lambdatest, browserstack
Published: 2021-08-31 11:44:08

Recently I was asked about cross browser / device testing solutions such as Browserstack, Sauce Labs or Lambdatest.

Having used one of these tools in the past, and having researched the others, I have formed an opinion on these solutions and the grid approach to cross browser testing.


### There are only 2 main code bases for browsers, and the versions are not a critical factor anymore

Browsers are converging into 2 main choices; Chromium-based and Firefox. All Chromium based browsers behave near identically in testing. The versions are kept up to date automatically and tested rigorously. Our value can be in testing the canary/beta versions of these browsers to gain confidence that things will be fine when browser updates happen.

### The OS does not matter on desktop, mobile browsers boil down to viewport sizes as opposed to device types

There was a time these did matter, especially in desktop development and a while ago in mobile development. In web development, this parameter is not critical, and if it becomes so there are effortless built-in solutions such as [Github Actions build matrix](https://docs.github.com/en/actions/learn-github-actions/managing-complex-workflows#using-a-build-matrix).


### So what is the meta solution today? How do we get away from the grid approach but still have a confidence in our products?

Given that the main parameters of concern today are the browser type and the viewport, the below 3 strategies can be harmonized to gain the maximum value with minimal effort.

1. [Combinatorial Testing](https://github.com/NoriSte/ui-testing-best-practices/blob/master/sections/advanced/combinatorial-testing.md) can be applied to CI, considering browsers, deployments and a subsets of tests. Check out [this slide deck](https://cypress.slides.com/cypress-io/siemens-case-study#/16) (scroll down with down arrow), it showcases how we applied theoretical math to reduce 72 CI test config combinations to 5.

2. [Combined  (unit+ e2e) code coverage](https://dev.to/muratkeremozcan/combined-unit-e2e-code-coverage-case-study-on-a-real-life-system-using-angular-jest-cypress-gitlab-35nk) can be utilized to decide on a lean subset of tests that covers the main workflows and at the same time hits a good percentage of the source code.

3. Visual AI testing can be used to not only cover browser & viewport concerns but also ensure that there are no visual and/or CSS regressions in the app. [In this example of a run](https://cypress.slides.com/cypress-io/siemens-case-study#/6/2) with Percy.io, 1 test covers 2 browsers x  3 viewports.
Absolute value Python - Everything you need to know
Tags: python, beginners, tutorial
Published: 2021-08-31 11:32:23

In this short tutorial, we cover the basics of the abs() Absolute value Python function. We look at how to use it along with a few real-world examples

This tutorial is a part of our initiative at [Flexiple](https://flexiple.com/), to write short curated tutorials around often used or interesting concepts.

### Table of Contents
- [Absolute Value Python](#absolute-value-python)
- [How to use abs()](#how-to-use-abs) 
- [Code and Explanation](#code-and-explanation)
- [Closing thoughts](#closing-thoughts)

## TL;DR 
`Abs()` is a built-in function that returns the absolute value of the argument.

```python
print(abs(-10))

#Output = 10
```

## Absolute Value Python:
Absolute values in Python are used to return the absolute value of a number. What this essentially means is when a negative value is passed as an argument (eg: -10), Python returns its relevant positive number (eg: 10). 

To understand how it works we must first understand what absolute value actually means. Absolute value is the distance between any number and 0 on the number line. These values are used extensively in the fields of Mathematics, Data Science, Physics, etc. However, developers generally use it to remove negative signs. 

In an off case that a positive number or 0 is passed as an argument, Python returns the same value. This is because that is the actual distance from the 0 on the number line. 

## How to use abs()?:
The absolute value is calculated using the `abs()` built-in function. There are other methods to do this as well, however, since `abs()` is an inbuilt method we recommend using it. 

### Syntax of Python `abs()`:
```python
#Absolute value Python
abs(number)
```

Here, “number” could either be an integer, float, or even a complex number. However, the latter returns the magnitude instead of the absolute value. 

In case a floating value is passed, it returns an absolute float value.
 
## Code and Explanation: 
Added below is the code used to find the absolute value of int, float, and complex numbers. 
```python
#Absolute Value Python

#abs() on Integer values
print(abs(-10))

#abs() on Float values
print(abs(-10.10))

#abs() on Complex numbers
print(abs(10-10j))
```

The output of this code is:
```
10
10.1
14.142135623730951
```

As you can see all the values have been converted into absolute values above. Feel free to try using the abs() method with positive value. 

## Closing thoughts:
Along with its extensive use in the fields of Maths & Physics, absolute value has a few other use cases as well. A common example is while using a navigator to calculate the distance to a location. This is done by subtracting the distance traveled from the total distance. This value would be a negative value and the `abs()` method is used to display the value

Do let me know your thoughts in the comments section below. :)
Bored of code blocks? Check out Codeview!
Tags: showdev, html, javascript, webdev
Published: 2021-08-31 11:31:13

The most common way to show code is via code blocks. But code blocks are really boring. So, to make code blocks more fun (and easier to digest!) I made Codeview.

{% codepen https://codepen.io/SiddharthShyniben/pen/QWvzyPm default-tab=result %}
<figcaption>This is is just a proof of concept, if there is enough demand I will refine and improve it (although I consider most of the bugs in Codeview to be features)</figcaption>

---

Code blocks are nice, but they are static, which makes it hard to really explain code. Inserting lines somewhere, replacing lines, these all are kinda confusing with ordinary code blocks. Well, **struggle no more**, because we have Codeview.

Codeview can automatically mesh, merge, replace, and insert code. It's pretty powerful once you wire it up properly. One potential way I'm considering using it is by linking it to scroll, so that we get a code block which changes with the content!

I have to say that this is pretty broken. One thing is that there's no syntax highlighting, and next thing is that sometimes there are some timing issues, etc. Once I fix all these I'll definitely make this a library!
Create Custom laravel 8 rule to count the word of the request
Tags: laravel, validation
Published: 2021-08-31 10:59:07

Let’s use this command to generate a rule which helps to validate word count.

```
php artisan make: rule wordCount
```
This command will create the file at **App/Rules** with the name of **wordCount.php** and initially, it will contain the following code:

```
<?php
namespace App\Rules;
use Illuminate\Contracts\Validation\Rule;
class WordCount implements Rule
{
/**
* Create a new rule instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
//
}
/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
return “Your message here.”;
}
}
```

Copy and paste the following code for word count validation:

```
<?php
namespace App\Rules;
use Illuminate\Contracts\Validation\Rule;
class wordCount implements Rule
{
/**
* Create a new rule instance.
*
* @return void
*/
private $attribute;
private $expected;
public function __construct(int $expected)
{
$this->expected = $expected;
}
/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
$this->attribute = $attribute;
$trimmed = trim($value);
$numWords = count(explode(‘ ‘, $trimmed));
return $numWords >= $this->expected;
}
/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
return ‘The ‘.$this->attribute.’ field must have more than ‘.$this->expected.’ words’;
}
}
```
Now let's import the above rule in controller as :

```
use App\Rules\wordCount;
```
And finally used this validation with any request with any minimun length of the request as:
```
$request->validate([
‘introduction’ => [‘required’, new wordCount(50)],
]);
```

here the function **wordCount** accepts the dynamic argument like i used 50 as minimum **wordCount** for **‘introduction’** request.

Finally, use in blade as:
```
<textarea type=”text” name=”introduction” class=”form-control” rows=”4" placeholder=”{{translate(‘Introduction’)}}” required>{{ $member->member->introduction }}</textarea>
@error(‘introduction’)
@enderror
```

All done, now it will display the error if it does not satisfy the wordcount like

```
The introduction field must have more than 50 words.

```
Hopes it works for you.

**HAPPY CODING!!**
TIL how to upload files to Gitlab snippets from the CLI
Tags: todayilearned, gitlab
Published: 2023-05-19 20:38:01

---
title: TIL how to upload files to Gitlab snippets from the CLI
published: true
date: 2021-08-31 10:58:00 UTC
tags: TIL,gitlab
canonical_url: https://www.zufallsheld.de/2021/08/31/til-how-to-upload-files-to-gitlab-snippets-from-the-cli/
---

I recently wanted to share a code-snippet with a colleague. I decided to use Gitlab Snippets for this. However the snippet was more of some hundred lines of code in a text-file which I didn’t want to simply copy-paste.

Lucky for me I had [python-gitlab](https://python-gitlab.readthedocs.io/en/stable/) installed, a Python library and CLI-tool to interact with Gitlab instances.

```
# Copy the contents of an existing file (readme.md) into a new snippet with the title "title" and filename "readme.md":
> gitlab snippet create --title "title" --file-name "readme.md" --content "$(cat readme.md)"
id: 36
title: title

# Update the snippet with new contents
> gitlab snippet update --id 36 --title "title" --file-name "readme.md" --content "$(cat new_readme.md)"

```
Using Tailwind like styled-components
Tags: showdev, react, typescript
Published: 2021-08-31 09:11:28

## Introduction

It is time to learn something new. Yesterday I watched fireships video about TailwindCSS that motivated me to give it a try. Initially, I didn't like it much, because of readability and learning (kind of) a new language.

So I started creating my first button component in React.
With the knowledge I would want to create many more, I quickly missed the easy way I'd create components with styled-components.

I got carried away and made myself a version of styled-components. With the difference that it would just take class names as arguments:

## The Tailwind like styled-components
*(or however you want to call it).*

The development was quite straightforward. But I also wanted to use typescript.
Finding the correct typings took me a long while to accomplish. After all, I finally did finish my prototype. Here's how to use it:

```javascript
export const Button = tailwind.button`px-2 py-1 m-5 bg-green-500 rounded-md`
```

And I thought it would be also useful to have a set of different stylings you could combine, so I implemented the following as well:

```javascript
const spacing = "px-2 py-1 m-5"
const primary = "bg-red-500"
const rounded = "rounded-md"

export const Button = tailwind_fn.button(spacing, primary, rounded)
```

Now I'm proud of it and forgot about my previous goal: learning tailwind (lol)
If you are interested in the source code, I uploaded it to [pastebin](https://pastebin.com/jmxWLQrw) (not github because I'm very lazy :))
It's just 50 lines of code!

## It was already there
Also: After doing research I found out this was  possible before (obviously), with actually using styled-components itself: {% link https://dev.to/dbshanks/an-efficient-react-tailwindcss-styled-components-workflow-458m %}


## That's it
Thank's for reading and have a nice day :D
Share your thoughts on this if you like :)
setTimeout is not a part of JavaScipt, why ?
Tags: javascript, webdev, node, beginners
Published: 2021-08-31 10:38:48

Maybe you think setTimeout like this -: **The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.** it's true, but let's dive deeper.

There aren't any methods like `setTimeout()` or `setInterval()` in JavaScript. They are not provided by the JavaScript engine itself but they are provided by browser as part of the window object. Let's break it down: 

If javascript doesn't provide `setInterval()` and `setTimeout()` but when we run our javascript code which also contains **setTImeout**  it works perfectly fine. Yes, that's the real problem. Many people know how to use and they don't have any idea about what's going on under the hood. Before knowing about windows object, let's look at web APIs.

### Web APIs 
A browser can perform many tasks like getting user's location, turning on/off bluetooth, storage tasks, timer related tasks and many more. And we as a developers need these things. So, all these things can be accessed by JavaScript via Web APIs. That's it, now we have all these things inside one place and that place is window object.

#### Some web APIs:
- localStorage
- setTimeout()
- console
- DOM APIs
- fetch()
- location
- alert()
- and [others](https://developer.chrome.com/docs/apps/api_other/)

If `setTimeout()` is present inside `window` object then why we don't write like this:
```javascript
window.setTimeout(() => console.log('Timer finished'), 1000 );
```

Instead we write without `window` object:
```javascript
setTimeout(() => console.log('Timer finished'), 1000 );
```

`window` is a global object and `setTimeout()` is present inside global object(at global scope), so we can access `setTimeout()` without `window` object. Not only with `setTimeout()`, we don't need to write `window` object to access `alert`, `localstorage`, and other web APIs.

Far by we've discussed that the browser provides web APIs, so we can use the things like`setTimeout()` but nodejs is not a browser. Then how is it possible to access `setTimeout()` in node. Well, we don't have `window` object available while working with node. But we can still access `setTimeout()`, let me tell you something at this point `setTimeout()` function in node works similar to `window.setTimeout()`, however they are not exactly same. Read more about this [here](https://nodejs.org/en/docs/guides/timers-in-node/).
Get the last day of the month from a date
Published: 2021-09-18 17:49:18

---
title: Get the last day of the month from a date
published: true
date: 2021-08-31 10:13:33 UTC
tags: 
canonical_url: https://dcblog.dev/get-the-last-day-of-the-month-from-a-date
---

To get the last day of the month use date('t'):

```

$dueDate = date('t/m/Y', strtotime($row->created_at));
```

or with Carbon (Laravel example)

```

$row->created_at->format('t/m/Y');
```