teleren/devto huggingface dataset:
Pure CSS Material design loader
Tags: css, materialdesign, snippets
Published: 2021-07-28 04:23:13

Do you love material design ? Here is a material design loader component created using pure CSS with one element.

## The HTML
```html
<div class="progress circular"></div>
```

## The CSS
```css
.progress.circular {
  width: 60px;
  height: 60px;
  background-color: #c4000000;
  mask-image: linear-gradient(transparent 50%, white 50%),
    linear-gradient(to right, transparent 50%, white 50%);
  -webkit-mask-image: linear-gradient(transparent 50%, white 50%),
    linear-gradient(to right, transparent 50%, white 50%);
  position: relative;
  color: #3b49df;
  animation: rotate 6s infinite;
}
.progress.circular:before {
  content: "";
  position: absolute;
  inset:0;
  border: solid 0.25em transparent;
  border-top-color: currentColor;
  border-radius: 100px;
  background-color: transparent;
  animation: rotate-shrink 0.75s infinite linear alternate;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(180deg);
    animation-timing-function: linear;
  }
  25% {
    transform: rotate(630deg);
  }
  37.5% {
    transform: rotate(810deg);
    animation-timing-function: linear;
  }
  50% {
    transform: rotate(1260deg);
  }
  62.5% {
    transform: rotate(1440deg);
    animation-timing-function: linear;
  }
  75% {
    transform: rotate(1890deg);
  }
  87.5% {
    transform: rotate(2070deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(2520deg);
  }
}

@keyframes rotate-shrink {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: currentColor;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: currentColor;
  }
  100% {
    border-left-color: currentColor;
    border-bottom-color: currentColor;
    transform: rotate(225deg);
  }
}

```

## The result
{% codepen https://codepen.io/Tronic247/pen/QWvQYmr %}

INFO: I've built a Material Design Framework [https://material.pages.dev/](https://material.pages.dev/) you can see this framework and give it a star 😎
querySelector() and querySelectorAll() 
Tags: javascript, css, html
Published: 2021-07-28 04:01:11

Let me explain the most basics of querySelector() by name. 

Don't skip while reading these lines

$-CREATIVE EXPLANATION:

Generally querySelector() and querySelectorAll() from same family which is "API".
 
query: His most popular name is "question", he is a toddler in API family 

Selector: She is the mother of our toddler(query), without her(Selector) query don't know how to work or what to do.

If you understand the pretty lines above go ahead to read  real concept,

$-SUBJECT:

querySelector(): To get the particular element from your html document,and make fancy using css or you can use it in your js codes, Which only select the first instance of the element.

querySelectorAll(): Only difference between querySelector() and querySelectorAll() is it(querySelectorAll()) can select as many as instances specifically a particular group of elements having same name (.classNames) or by the tags(h1,p,div etc.,)

This is my first blog, I hope it has little fun with explaining concept, //if it has any mistakes feel free to comment.
Creating vite vue ts template: Setup editorconfig
Tags: vite, vue, editorconfig
Published: 2021-07-28 03:40:14

## Setup editorconfig and config files

1. Create editorconfig config file `touch .editorconfig`
1. Update `.editorconfig` to look like this.

    ```
    # EditorConfig is awesome: https://EditorConfig.org

    # top-most EditorConfig file
    root = true

    # Unix-style newlines with a newline ending every file
    [*]
    end_of_line = lf
    insert_final_newline = true
    charset = utf-8
    ```

1. `git add .`
1. `git commit -m 'setup editorconfig`

## Links

-   https://editorconfig.org

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
TDD Conference 2021 - TDD All The Things - Liz Keogh
Tags: tdd, oop, programming, codenewbie
Published: 2021-07-28 03:36:36

First International Test Driven Development took place on July 10th. 

In this series, I will include every talk together with my notes and further reading.

Hopefully, a lot of readers will watch and rewatch the talks, as they are worth several reviews.

Let's continue...

## Bio 

Liz Keogh is a Lean and Agile consultant based in London. She is a well-known blogger and international speaker, a core member of the BDD community and a passionate advocate of the Cynefin framework and of Wardley Mapping. She has a strong technical background with over 20 years’ experience in delivering and coaching others to deliver software, from small start-ups to global enterprises. Most of her work now focuses on Lean, Agile and organizational transformations, and the use of transparency, positive language, well-formed outcomes and safe-to-fail experiments in making change innovative, easy and fun. 
 
> TL;DR: Amplify your possitiveness!

## Talk

{% youtube AxmlYeKv5F4 %}

# My Personal notes

- BDD suggests we should start methods with 'should' instead of 'test'.
- Nowadays we have annotations on tests.
- BDD forces us to think about behaviour.
- TDD cycle as behaviour: Test = Describe Behaviour, Pass = Change Behaviour, Refactor = Amplify the positives
- The sandwich methodology: Say something good, then something bad, and after that something good again.
- The sandwich done well: describe what you want and don't let people write their own code.
- Try to find psychological safety. 
- Novice people can write tests by copying existing ones. 
- Experienced Beginners can get TDD working from scratch.
- Practitioners write tests before the code.
- Knowledgeable Practitioners teach TDD to others.
- When refactoring, aim for better, not perfect.
- When refactoring people, we should play to our strengths and be forgiving.
- In complexity, tests and descriptions of behaviour are just examples of what might happen.
 
# Speaker Links

- Twitter [@lunivore](https://twitter.com/lunivore) 
- LinkedIn [@liz-keogh-6240071](https://www.linkedin.com/in/liz-keogh-6240071/) 
- Site [https://lizkeogh.com](https://lizkeogh.com) 
 
* * *

Please follow TDD Conference on:

- [YouTube](https://www.youtube.com/channel/UCKn-DadPoyYssfAOMk1LSew)
- [Twitter](https://twitter.com/tddconf)
Laravel AJAX CRUD Example Tutorial
Tags: laravel, ajax, crud, php
Published: 2021-07-28 02:57:20

Hello Guys,

Today I will show you how to create laravel AJAX CRUD example tutorial. In this tutorial we are implements ajax crud operation in laravel. Also perform insert, update, delete operation using ajax in laravel 6 and also you can use this ajax crud operation in laravel 6, laravel 7. In ajax crud operation we display records in datatable.

So, let's start and follow below steps.

```
Step 1 : Install Laravel

Step 2 : Database Setup

Step 3 : Create Migration Table

Step 4 : Add Resource Route

Step 5 : Add Controller and Model

Step 6 : Add Blade Files
```

---

> **_[Read More : Laravel AJAX CRUD Example Tutorial](https://www.techsolutionstuff.com/post/laravel-ajax-crud-example-tutorial)_**

---


> **_[Read Also : Laravel 6 CRUD Tutorial with Example
](https://techsolutionstuff.com/post/laravel-6-crud-tutorial-with-example)_**
Laravel 6 CRUD Tutorial with Example
Tags: laravel, crud, php, javascript
Published: 2021-07-28 02:57:06

In this example, I will show you to how to make simple laravel CRUD(insert, update, delete or listing) operations with example.

Insert Update Delete module is primary requirement for each project,you will understand how to use route, controller, blade files, model and migration for crud operation in laravel 6.

We just need to follow below step and you will get basic CRUD using controller, model, route, bootstrap 4 and blade. If you follow below step then definatly you will get proper output.

So,let's start

```
Step 1 - Create/install New Laravel Project
Step 2 - Setup Database
Step 3 - Create Model and Migration
Step 4 - Create Controller
Step 5 - Create Blade Files
Step 6 - Run Project in Browser
```

---

> **_[Read More : Laravel 6 CRUD Tutorial with Example
](https://techsolutionstuff.com/post/laravel-6-crud-tutorial-with-example)_**

---
Thanks for the reading...!!
Health Information System

Tags: javascript, webdev, webapp, demo
Published: 2021-07-28 02:39:56

![Untitled1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkh3qymfok5fghcndqz3.png)
 
✔️ Patient Admission System (PAS)
![Untitled2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a53j4nwxm9s9bfaowr7.png)
 
✔️ Eletronic Medical Record (EMR)
![Untitled3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbi83ckhqmn5libzkzw7.png)
 
✔️ Human Resource Management (Admin)
![Untitled4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2utvewvtlgmru4klo0bb.png)
⚡ AI Analysis for Fundus and Dry Eye (Beta)

=> We also got an open version available for beta review at: 
https://lnkd.in/gf3Wx29

=> Attached below is a quick demo video: 
https://youtu.be/DjqP67_SnsY

=> To have quick demo session please booking an appointment: 
https://calendly.com/nichealpham/experiment1et?month=2021-08

We are looking for business collaboration to extend the impact of this product and to validate its functionalities for international standards. 

If you are venture capital or someone who might get benefits from our product, please reach out.

Demo and Detail : https://github.com/nichealpham/his-composer
https://sandrasoft.app/
I never need webpack or babel anymore
Tags: webpack, babel
Published: 2021-07-28 02:39:06

In the past period of time, I was refactoring our company’s miniapp compiler, Its performance has increased by more than ten times.

## Use Esbuild

### Replace webpack or rollup

What's interesting, using esbuild and webpack are almost the same.

#### webpack node api

```js
const webpack = require('webpack')

webpack({
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  }
}).run((err, stats) => {
})

```
esbuild node api

```js
const esbuild = require('esbuild')

await esbuild.build({
  entryPoints: [path.join(cwd, 'src', 'app.js')],
  outdir: path.join(cwd, 'dist'),
  bundle: true
})
```

They are no different in use, but esbuild is much faster than webpack.

In most places where you use webpack, you can use esbuild instead.

### Replace jest

In my open source framework fre, I use `playwright + zora + esbuild` as the test toolkits, and its experience is very smooth.

https://github.com/yisar/fre/tree/master/test

```js
before:
puppeteer + jest 30s+

after:
playwright + zora + esbuild 3s-
```
### Replace terser

https://github.com/privatenumber/minification-benchmarks

Using esbuild as a compressor for large projects can improve a lot of performance.

### Replace next.js

We have a new alternative within our company, which uses esbuild throughout the toolchain, and the development experience is much better than next.js.

### Disadvantages of esbuild

- AST operation is not supported
- Generating d.ts is not supported
- No go API provided
- The generated runtime code is dirty

After we use esbuild in depth, we find it has many disadvantages, so it is impossible to use esbuild alone.

Some people use rollup, such as the vite team, but I don't think it's worth it.

## Use Swc

This is another tool written using rust, which can make up for some shortcomings of esbuild.

### Replace babel

A common practice is to modify AST in rust side, and then pass the results to node side through wasm.

https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/js/core/src/hoist.rs

For example, that's what parcel v2 does.

## Summary

Most of the time, esbuild is enough. swc can be used when the AST needs to be modified, but anyway, I don't need webpack or babel anymore.

More and more similar tools will appear in the front-end tool chain in the future. They are written in go or rust, and they are very fast and smooth.

I love this change very much.
How to Create Onpress events into the Custom Methods in Flutter
Published: 2021-07-28 02:35:55

Container _catgoriesCard2() {
    return Container(
      width: 80,
      height: 30,
      margin: EdgeInsets.only(bottom: 150, left: 110),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.5),
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              offset: const Offset(
                5.0,
                5.0,
              ),
              blurRadius: 10.0,
              spreadRadius: 2.0,
            ),
          ]),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            children: [
              SizedBox(
                width: 10,
              ),
              Row(
                children: [
                  Icon(
                    Icons.event,
                    size: 20,
                    color: Colors.blueAccent,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text(
                    'Events',
                    style: TextStyle(fontSize: 11, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
Earn Upto 100$ if you write apps that run on Kubernetes?
Tags: kubernetes
Published: 2021-07-28 02:35:30

https://app.respondent.io/respondents/projects/view/60ff52d7a34609001373e59c/do-you-write-and-test-apps-that-run-on-kubernetes?referralCode=anilvillivalam-a74a6c4d044d

Are you a software developer who writes and tests apps that run on Kubernetes? If yes, we want to meet with you. Your feedback will influence new designs intended to help you maximize the of use your Kubernetes in the cloud.

Earn Upto 100$
Health Information System
Tags: systems, health, webdev
Published: 2021-07-28 02:28:35


![Untitled1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwnmscw1g2pt5p95k9q0.png)
 
✔️ Patient Admission System (PAS)
![Untitled2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r1m8fm3rtoct3eof5wy.png)
 
✔️ Eletronic Medical Record (EMR)
![Untitled3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6w5olrkjdwquoqabzc7.png)
 
✔️ Human Resource Management (Admin)
![Untitled4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m688hc4028gbyvl4fejf.png)
 
⚡ AI Analysis for Fundus and Dry Eye (Beta)

Demo and Detail : https://github.com/nichealpham/his-composer
Free AWS Exam Voucher
Tags: aws, cloud, cloudskills, beginners
Published: 2021-07-28 02:26:59

Hello! Just wanted to share what I’m up to and give a boost to anyone else who may be interested. I am studying for the AWS Solutions Architect Associate exam and saw that AWS has a 50% off voucher free to anyone who wants to use it for this particular exam. Also, with every exam successfully passed, AWS gives you another free 50% off voucher. 

https://pages.awscloud.com/GLOBAL_TRAINCERT_takethechallenge.html
.NET Windows app help please 
Published: 2021-07-28 01:44:13

Hi All,
   I’m a newbie starting out with the common C# app that will load images into an on-prem SQL Server instance. I’m having problems getting my VS solutions untangled. I’d also like to add a text box and data to where you can use the image_name column on the db file. Any help would be more than appreciated.   

Thanks so much,
Amie

#help #newbie #beginner
strategies to puzzles
Published: 2021-07-28 01:42:38

**Palindroms** 
* recursion
* stringmanipulation
```string.replace(/[^A-Za-z0-9]/g, '')   gets rid of spaces
string.split('').reverse().join('')```

* for loops  ```for loops for (var i = 0; i < len / 2; i++) {
     if (characters[i] !== characters[len - 1 - i]) return false;
  }```

**Reversing strings** =  1) reverse
                     2) decrementing for loop
                     3) recursion with substr and charAt

Binary Search.. linkedlist ... etc to come
Vim Setup - Moving away from an IDE (Part 1) - Saving and Quitting
Tags: vim, ide, neovim, remap
Published: 2021-07-28 01:25:20

Modern IDEs and editors are slow. Pycharm and VSCode are some of my favorite ones to use but they didn't feel as fast as using Vim. 

## TLDR
We create remaps for easy save and exit. 
All the information is at the bottom.

## Part 1
In this post I'm going to remap saving and exiting in Vim. I will also give you a little bonus at the end for users who still prefer to use the mouse on occasion. At this point I’m assuming you have some familiarity with Vim and the .vimrc file but if not, feel free to ask me any questions.  

I'll start off by making sure I have a leader key. The leader key is used to tell Vim that we are going to give it a sequence of button presses. I’m going to set my leader key as the space bar.

In your .vimrc or init.nvim (Neovim) add:
```
let mapleader = " "
```
So now that my leader key is set to the space bar, I can start to add my remaps. 

On a Mac, to save a file in GUI programs you can do command + s. In Vim I’m going to do something similar. In the config file I will add the following:
```
nnoremap <leader>s :wr <CR>
```
So here we have a few things happening. I’ll explain what each section is doing.

```
nnoremap - 
nnoremap is telling Vim to remap in normal mode.
``` 
```
<leader>s - 
This is my space button (leader key) + the letter s.
```
```
:wr -
This how to save (write) in Vim.
``` 
```
<CR> - 
This is the same as pressing return/enter. We need this to auto enter the full command at the end. 
``` 

Now we can save the file by entering :wr in normal mode and to reflect the changes enter :source %. Now every time I press space + s it saves the file. To confirm if your file has been saved, you will see "written" in the bottom of the buffer. 

Lets go ahead and knock out one more remap.
```
nnoremap <leader>q :q <CR>
```
This will remap space + q to quit the current buffer or exit Vim. 

Now for the bonus part. Add the following to your config so you have the ability to do mouse movements. 

```
set mouse=a
```

Having the mouse feature enabled will really help out users who are starting off with Vim. 


That’s it!

I how you enjoyed this. If you have any question or feedback do let me know!



##TLDR 
Add this to your .vimrc or init.vim (Neovim) file.
```
nnoremap <leader>s :wr <CR>
nnoremap <leader>q :q <CR>
set mouse=a
```


My vimrc/neovim config. 

https://github.com/applericky/.vimrc/blob/main/vimrc
The default value to a property ins't really default
Tags: csharp, dotnet, vscode
Published: 2021-07-28 01:13:13

I was trying to do a simple and easy-to-use validation for a class today, and I came across this situation

First I wrote this class using a property and added there a default value like this `public int Age { get; set; } = 18`, and I thought already that this property has a default value, and if I compare this instance with `default(T)`, will I have a simple validator?

![Code Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mk0tp8to5oaqwdfwa6m.png)

And the answer is NO, I know there are some great projects like [Flunt](https://www.nuget.org/packages/Flunt/) or [FluentValidation](https://www.nuget.org/packages/FluentValidation), but I thought of a simple comparator with the default values, and what I've seen is that actually the `=18` is actually just an assignment that occurs during the moment the class is instantiated, but that when declaring the `default(T)` value it doesn't actually do any attribution declaring only as null.

![Code Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6kex499oa9robgrnm03.png)

As we can see in previous image, the `default(T)` return a `null` value for a reference type like my example class and for a value type this will return `0` value.

For finish this is definition from (docs) [https://docs.microsoft.com/en-us/dotnet/csharp/properties] for an default property.

![docs.com definition for properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo0h0p2whre3mgb7hjrw.png)

if by chance you know any easy way to validate please contribute to the comments below, thanks for reading.
Speaking at Developer Career Day 2021
Tags: blogging, career, workshop, conference
Published: 2021-07-28 01:05:06

---
title: Speaking at Developer Career Day 2021
published: true
date: 2021-07-28 00:43:31 UTC
tags: blogging,career,workshop,conference
canonical_url: https://phoenixtrap.com/2021/07/27/speaking-at-developer-career-day-2021/
---

I’ll be running a workshop based on my recent [Blogging Outside the Bubble webinar](https://event.webinarjam.com/go/replay/36/577z7c3qs3xa50mcv) during [Developer Career Day 2021](https://careerday.dev/), which is running from August 6 through 7. It’s free to register, with top speakers and practical career discussions.

**[Find out more and register here!](https://careerday.dev/)**
Responding to “No code reviews by default”
Tags: pullrequests, codereview, nocodereview, nopullrequests
Published: 2021-07-28 09:58:49

---
title: Responding to “No code reviews by default”
published: true
date: 2021-07-28 00:00:00 UTC
tags: pullrequests,codereview,nocodereview,nopullrequests
canonical_url: https://jhall.io/archive/2021/07/28/responding-to-no-code-reviews-by-default/
---

In one of the Slack groups I frequent, this article came up recently: [_No code reviews by default_](https://raycast.com/blog/no-code-reviews-by-default/).

**TL;DR;** The founders of Raycast started by committing code directly to mainline, and at some point discussed whether to adopt the “best practice” of using pull requests. They decided against it, because what they were doing was working, and they trusted each other. As they added engineers, they’ve maintained this policy of not requiring pull requests or code review, and instead deferring to each developer to ask for a review if and when they feel it’s useful.

I like this story (even though I disagree with some of the finer points). It’s a great example of being pragmatic, and only adding formal policies and processes when they solve a specific, felt problem.

One choice quote from the article:

> Every company or team is different, but one thing is the same: They all want to build the best product in the shortest time possible. There are different ways to achieve this.

Does your team use code review and/or pull requests? What works best for you?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._