teleren/devto huggingface dataset:
Repeat, Auto, Minmax aka RAM
Tags: css, cssgrid
Published: 2021-11-18 11:15:45

---
title: Repeat, Auto, Minmax aka RAM
published: true
description: A responsive grid layout with automatically-placed and flexible children.
tags: css, cssgrid
cover_image: https://images.unsplash.com/photo-1624102615561-5f182ed03116?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1776&q=80
---

RAM is a great layout pattern for grid layouts in general. It stands for Repeat, Auto, Minmax which entails to the css `grid` property of `grid-template-columns` to have flexible children and placed automatically in the parent without having to write any extra responsive css. You can use this pattern for images, cards, items etc.

The code looks like below:

```html
<div class="parent">
    <div class="child">A</div>
    <div class="child">B</div>
    <div class="child">C</div>
    <div class="child">D</div>
  </div>
```
```css
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 1em;
}
```

{% codepen https://codepen.io/hunzaboy/pen/VwzgzpX default-tab=result %}

You can use `auto-fill` or `auto-fit' depending upon your usecase. 

Cover Photo: https://unsplash.com/@helloimnik
OPA Policy Testing by Table Driven Test
Tags: opa, testing, conftest
Published: 2021-11-18 11:09:57

In this post, I introduce how to write [OPA](https://www.openpolicyagent.org/)'s Policy Tests with [table driven test](https://github.com/golang/go/wiki/TableDrivenTests).
By applying Test Driven Test to OPA's Policy Testing, you can test various test cases simply.

I have created [an example](https://github.com/suzuki-shunsuke/example-opa-table-driven-tests/tree/main/policy).
You can define table entries as the following.

```rego
	seeds := [
		{
			"msg": "pass",
			"resource": {
				"type": "aws_cloudwatch_log_group",
				"address": "aws_cloudwatch_log_group.main",
				"values": {"retention_in_days": 7},
			},
			"exp": set(),
		},
		{
			"msg": "retention_in_days should be greater than 0",
			"resource": {
				"type": "aws_cloudwatch_log_group",
				"address": "aws_cloudwatch_log_group.main",
				"values": {"retention_in_days": 0},
			},
			"exp": {"aws_cloudwatch_log_group.main: retention_in_days should be set and greater than 0"},
		},
		{
			"msg": "retention_in_days should be set",
			"resource": {
				"type": "aws_cloudwatch_log_group",
				"address": "aws_cloudwatch_log_group.main",
				"values": {},
			},
			"exp": {"aws_cloudwatch_log_group.main: retention_in_days should be set and greater than 0"},
		},
	]
```

And you can test as the following.

```rego
	some i
	seed := seeds[i]

	result := deny_aws_cloudwatch_log_grop_retention_in_days with input as wrap_single_resource(seed.resource)

	result != seed.exp
```

The trace log is useful for debug.

```rego
trace(sprintf("FAIL %s (%d): %s, wanted %v, got %v", ["test_deny_aws_cloudwatch_log_grop_retention_in_days", i, seed.msg, seed.exp, result]))
```

```console
$ conftest verify --trace | grep Note
TRAC   | | | | Note "FAIL test_deny_aws_cloudwatch_log_grop_retention_in_days (1): retention_in_days should be greater than 0, wanted {\"aws_cloudwatch_log_group.main: retention_in_days should be set and greater than 0\"}, got set()"
```

That's it.
New headline() method on Str class - laravel 8
Tags: programming, php, laravel, beginners
Published: 2021-11-18 10:39:58

Let's get started quickly - In the past
```php
$str = 'welcome-to-here';
return Str::of($str)->replace('-', ' ')->title(); // Welcome To Here
```
with headline()
```php
$str = 'welcome-to-here';
return Str::of($str)->headline(); // Welcome To Here
return Str::headline($str); // Welcome To Here
```
I hope you enjoy the code.
ESP32 ADC 的陷阱
Tags: esp32, adc
Published: 2021-11-18 10:37:41

在使用 [ESP32 的 ADC](https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-reference/peripherals/adc.html#analog-to-digital-converter-adc) 時, 有一個許多人沒有注意到的陷阱。ESP32 有兩個 ADC, 稱為 ADC1 和 ADC2, ADC2 因為會被 Wi-Fi 佔用, 啟用 Wi-Fi 的情況下無法使用, 所以我們通常使用的是 ADC1, ADC1 有 8 個 channel 可用, 如同大部分教學所說, 我們可以設定這 8 個 channel 的**衰減 (attenuation )** 與**解析度 (resolution)**, 而陷阱就是**只有衰減是個別 channel 可以有獨自的設定, 解析度卻是所有 channel 共同的設定**。

請看以下的例子：

```python
>>> from machine import Pin, ADC
>>> adc_33 = ADC(Pin(33))
>>> adc_33.atten(ADC.ATTN_11DB)
>>> adc_33.width(ADC.WIDTH_9BIT)
```

設定好讓 33 號腳可[接受 3.6V 輸入](http://docs.micropython.org/en/latest/esp32/quickref.html#ADC.atten), 並採用 [9 位元的解析度](http://docs.micropython.org/en/latest/esp32/quickref.html#ADC.width), 如果我們直接將控制板上的 3.3V 輸入 33 號腳, 讀取 ADC 值可看到：

```python
>>> adc_33.read()
511
```

但如果我們另外設定 32 號腳採用 12 位元的解析度：

```python
>>> adc_32 = ADC(Pin(32))
>>> adc_32.width(ADC.WIDTH_12BIT)
```

再重新讀取一次 33 號腳, 就會發現讀值變成 4095：

```python
>>> adc_33.read()
4095
```

這表示 33 號腳現在也採用 12 位元的解析度了。如果我們設定 32 腳最高輸入 1.0V：

```python
>>> adc_32.atten(ADC.ATTN_0DB)
```

然後接一個分壓電路把原本的 3.3V 電壓分一半, 再將分半後的電壓接到 33 號腳後重新讀值：

```python
>>> adc_33.read()
1834
```

可以看到 33 腳的 ADC 並沒有受到 32 腳的設定影響, 若是將同樣的分壓接到 32 腳, 讀值就會發現超過可量測最高電壓而讀到 4095：

```python
>>> adc_32.read()
4095
```

如果沒有注意到這一點, 就可能會發生自己嚇自己的靈異現象, 明明設定 10 位元解析度的 ADC 腳位, 卻讀到超過 1023 以上的值, 而誤以為控制板或是感測器壞掉了, 但其實只是因為有其他 ADC 腳位設定成更多位元的解析度而已。

在 [ESP32 API 文件](https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-reference/peripherals/adc.html#_CPPv417adc1_config_width16adc_bits_width_t)上就有指出 ADC1 的解析度是所有 channel 共用的, 只是比較少看到教學文章強調這一點, 尤其是使用 MicroPython 的話, `width` 是 `ADC` 物件的方法, 所以看起來實在很像是可以幫個別 ADC 物件設定解析度。
Learning Vue JS
Tags: vue, 100daysofcode, javascript, webdev
Published: 2021-11-18 10:25:56

Hello World,
I was curious to learn Vue.Js for a long time, But unfortunately, I couldn't manage time to start this.
So I took a challenge to Learn Vue.Js. I will be describing what I have learned and also going to share codes with you.
I would appreciate any kind of advise, remarks and Highly appreciate if you guys join with me in this  journey
Wish me Luck <3
How I’ve Attracted The First 500 Paid Users For My SaaS That Costs $5/mo
Tags: javascript, beginners, tutorial
Published: 2021-11-18 10:06:07

Hello, it’s Takuya here. This is a story about my experience on my solo product called Inkdrop — a Markdown note-taking app with built-in cloud sync. It is a SaaS that earns $3,200 per month from 600 customers now, with pricing $4.99/mo or $49.9/yr. Thanks to its profit, I have had no freelance works this year. Cool. I really appreciate all your support!

¥370K ≒ $3,277
Okay, I promised to share my experience how I accomplished that. I hope it’s helpful for fostering your products. If you are interested in how I successfully launched it, please read this article:
How I Built a Markdown Editor Earning $1300/mo Profit — Inkdrop
From idea to first sales and growth strategies
blog.inkdrop.info


Inkdrop
TL;DR
You Don’t Have To Get Covered on Large Blogs
Why Churn Rate is Surprisingly Low
Spend a Lot of Time At User Forum
Publish Roadmaps
Treat Paid Users as Special
Tell Your Strategy
Ignore All Competitors
Accept Your Incompleteness
You Don’t Have To Get Covered on Large Blogs
Inkdrop was officially released two years ago with initial users gathered while it’s in beta. Since it’s a niche product and there are already a lot of similar apps like Evernote out there, Inkdrop has not ever got covered on any major news media or blogs so far. I have even not ever used any ads. Instead, I solely focused on making existing users happier and I wrote some blogposts about my ‘successful’ strategies on my product and my freelance career. Those gradually made growth through word of mouth.
So I made engagements almost from myself. The growth was always calm and stable — It’s better than making a buzz from large media because traffic they will generate would be a big spike making your servers too busy and a lot of inquiries you can’t handle at once, resulting in providing poor user support.
Don’t hurry. It’s not a startup rushing to an exit.
DEV handy tools for newbie
Tags: devhandytools, beginners, programming, tutorial
Published: 2021-11-18 09:50:25

1. DEV handy tools for newbie

Coding, hosting - Glitch

After it was launched in 2017, Glitch has let everyone write and change codes and then issue bots, network apps, and other outlines that it would host for free. But with its pro's there were cons. That free hosting came with certain very strict limitations. Apps had restricted RAM and storage, and more importantly, they would be shut down if they went inoperative for even a few minutes, meaning you often had to wait through a torpid boot before operating them.

Command Line - Hyper
Hyper is a terminal focused on network technologies, it is basically based on languages such as JavaScript, HTML, and CSS providing a fine and extensible practice for command-line interface users. Hyper delivers a lot of its speed and functionality thanks to the power of term below, the terminal emulator of the Chromium project.
If you're just getting originated with Hyper terminal I'd suggest you head to Hyper website, they have an extensive installation guide and usage documentation

Testing APIs - Insomnia

Insomnia is an open cross-platform desktop utilization that drives the effort out of interacting with and designing HTTP-based APIs. Insomnia blends an easy-to-use interface with superior functionality like authentication supporters, code generation, and environment variables.

Database - TablePlus
TablePlus signifies a convenient, native app with a streamlined user interface that permits developers to concurrently maintain databases in a very fast and secure way. TablePlus supports most of the grass-roots databases like MySQL, Postgres, SQL Server, SQLite, Microsoft SQL Server, Redis, Redshift, Oracle, and many more.  TablePlus is compatible with every version of MariaDB. It is available for macOS, Windows, iOS, and Linux currently.
Some notable features:
Native build
Handy query editor
Multi Tabs & Code Review
Can connect to various databases concurrently.
TablePlus is available for free, but users can acquire a license to remove some constraints and customize the tool for more crucial needs on the TablePlus website.


Design - Figma Community

The Figma Community is a place where personalities, organizations, or companies can distribute data, plugins, and widgets. You can join the Community to recognize plugins, investigate files, and encourage other creators.
Digital marketing
Tags: digitalmarketing, marketing, socialmedia, digitalbranding
Published: 2021-11-18 09:47:58

Digital marketing, also called online marketing, is the elevation of brands to unite with potential clients by making use internet and additional forms of digital messages. This includes not only email, social media, and web-based advertising, but also text and multimedia messages as a marketing channel.
Basically, if a marketing campaign involves digital publication, it's digital marketing.
Everything nowadays is running online, so why not your own shop's website? Ever thought just like dominos, pizza hut, etc, even your shop would have its official website? No right? But with digital marketing even the smallest shops in our neighborhood can have their website available.
Now you must be thinking, why should I have my shop's website? so here are the advantages-:
1) Customers would be able to check out the menu and place orders online, making it simpler than calling again and again for queries.
2) The online website would make people order from it and would make a little less traffic in the shop making it better for both the pandemic and even managing the shop and making orders quicker.
3) Your website would be more profitable than zomato as you can place your driver who would do the delivery, and you wouldn't even have to worry about the ratio you would have to give away.
4) And in the future online business are going to rule the market so why not start from now so you can be well established till the era of the only online market takes it place.
5) Customers can see the offers that you place on the website, which could make your sales a bit more as they would know your offers and would visit your shop for them.
6) Online shopping is the best way to make the most of your business and you can even have a good reputation for your shop only by opening an online source for your shop, which we will help you for making.
Artificial intelligence
Tags: ai, newfuture, beginners
Published: 2021-11-18 09:41:08

Artificial intelligence is taking over the world. A day will come when you will just sit and relax and the machine does its job. 


Artificial Intelligence is the mind demonstrated by machines that are opposite to that of natural intelligence, which is sometimes shown by animals and humans. The advanced professionals dealing with AI define it as, "A system that observes its surroundings and progress tentatively according to it with the maximum chances of achieving its goals." Some of them even use the term artificial intelligence to describe the machines that can copy the human mind and perform functions such as learning and problem solving, but this definition would have given AI a pretty critical view so it was rejected by Major AI researchers.


AI deals with every sector right now. The advanced search engines have AI attached to them. The recommendation systems, ads, and even in understanding the human speech and converting it into work (Alexa, Siri). Self Driving cars have AI, the voice searchers have AI. Computer games consist of AI and whatnot. I believe AI is slowly getting used to in the common world, making it easier for people to work with.
As machines have become increasingly capable, tasks thought to challenge "intelligence" are often removed from the definition of AI.
Add Command Palette (CMD+P) To Any App!
Tags: macos, tools, productivity
Published: 2021-11-18 09:36:11

---
title: Add Command Palette (CMD+P) To Any App!
published: true
description: Command palettes are awesome. They give quick access to commands with fuzzy search. It sucks when apps don't have it. Raycast helps you add it to any app.
tags: macos, tools, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5d5ju2vheformqmz2ok.png
---

## tldr;

Use [Raycast's](https://www.raycast.com) “Search Menu Items” from any app and get a command palette.

If you love Alfred or can‘t switch, you can use a workflow like [BenziAhamed/Menu-Bar-Search](https://github.com/BenziAhamed/Menu-Bar-Search) to do the same.

---

Command palettes from Sublime Text and Visual Studio Code are awesome. They give quick access to commands with fuzzy search. It sucks when apps don’t have it.

Recently, I switched to **Raycast** which is a great alternative to the fantastic app that [Alfred](https://www.alfredapp.com) is.

It has a fantastic command called **“Search Menu Items”**. It gives me a searchable list of commands with their shortcuts keys. For example, this is what it gives me on iTerm:

![Raycast's “Search Menu Items” when run from iTerm with a search for “split” showing results to split panes with shortcuts keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzp4jpb11k7cdkhz720o.png) 

## Hotkey

I've set up a hotkey to quick access the commands as well. This saves me a few keystrokes.

![Raycast's settings where you can set a hotkey to quickly access its commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru6dhpwyshubj3kgg6k0.png)

## Bonus, one less app

It has also replaced [Cheatsheet](https://www.mediaatelier.com/CheatSheet/) for me.

![Cheatsheet displays all the commands in one window but it is not searchable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj9jx7k37ullkx14fabg.png)
Wednesday Links - Edition 2021-11-17
Tags: java, jvm, gradle, kotlin
Published: 2021-11-17 12:11:20

Embracing Java 17: Here’s What We Learned (5 min)💡
https://blog.picnic.nl/embracing-java-17-heres-what-we-learned-69779d95fdf2

Upgraded to the Shiny Java 17? Now What? (6 min)🤔
https://medium.com/javarevisited/upgraded-to-the-shiny-java-17-now-what-a4cc5b7f1d9b

Microsoft Deepens Its Investments in Java (5 min)🪙
https://devblogs.microsoft.com/java/microsoft-deepens-its-investments-in-java/

Spocklight: Adjusting Time With MutableClock (5 min)🕐
https://blog.mrhaki.com/2021/10/spocklight-adjusting-time-with.html

JDK Flight Recorder Events in GraalVM Native Binaries (1 min)🏆
https://www.morling.dev/blog/jfr-events-in-graalvm-native-binaries/

Kotlin 1.6.0 Released (11 min)🎉
https://blog.jetbrains.com/kotlin/2021/11/kotlin-1-6-0-is-released/

Gradle JVM Toolchain Support in the Kotlin Plugin (6 min)🧰
https://blog.jetbrains.com/kotlin/2021/11/gradle-jvm-toolchain-support-in-the-kotlin-plugin/

Seven Highlights from the Kotlin Roadmap Autumn 2021 (9 min)🛣️
https://blog.jetbrains.com/kotlin/2021/11/kotlin-roadmap-autumn-2021/

Kubernetes and Docker Updates in IntelliJ IDEA 2021.3 (4 min)☸️
https://blog.jetbrains.com/idea/2021/11/kubernetes-and-docker-updates-2021-3/

Hello, my Gradle builds are slow! (3 min)🐢
https://medium.com/@liutikas/hello-my-gradle-builds-are-slow-483427e6eb4

Native-image with Spring Boot (9 min)🍃
https://blog.frankel.ch/native/spring-boot/

Heap Regions X-Large (6 min)🧱
https://tschatzl.github.io/2021/11/15/heap-regions-x-large.html

The strong and weak forces of architecture (7 min)💪
https://martinfowler.com/articles/strong-weak-arch.html

We Analyzed 425,909 Favicons (6 min)🖼️
https://iconmap.io/blog
Leverage Postman to Consume APIs Using OAuth2
Published: 2021-11-18 09:22:48

_My Fellow Developers -_

_If you haven’t heard about Postman yet, get ready to become close friends with this tool!_

_No matter what authentication mode you are using for APIs,  Postman is a well known, functional and amazing tool for your developing needs._

_Personally, I’ve used it a lot for testing & executing requests on personal and public APIs._

_It’s my go-to tool to install immediately when I refresh an environment or even when upgrading to a new computer. After several years of implementation, it has easily become one of my favorite developer tools._

_If you’re new to this developer tool, I admit, at first glance it can be discouraging when starting out with your configurations. Especially if you’re using the OAuth2 protocol (which is extremely popular) because it does change the way we authenticate users and APIs connections._

_Enter your fearless developer, Anthony, with my newest tutorial to walk you through consuming APIs using OAuth2!_

_You’ll quickly learn how to create a collection, define the variables, and configure your Postman tool to retrieve tokens before adding request definitions._

**_Psst - this especially works well with your JHipster and Entando generated applications._**

_Enjoy!_

{% youtube 3yfHIVWddqk %}
IPC144 Course Curriculum Renewal  
Tags: opensource, docusarus
Published: 2021-11-18 09:18:55

Our weekly tasks in this week contribute external and internal project. The one of the internal project in Seneca is [IPC144](https://github.com/Seneca-ICTOER/IPC144) course curriculum renewal. The project is renewal [original course note](https://ict.senecacollege.ca/~ipc144/) into [new course note](https://cghub.ca/) by using [Docusaurus](https://docusaurus.io/). The design of current original course note is not user friendly and outdated. Therefore, the this open source project replaces old course note to new course note.  

As I talked about Docusarus on previous week, the Docusaurus is a project for easily deploying, building, and maintaining the websites. The most part of content is implemented but the website needs contribution for reviewing and improving correctness. The [issue](https://github.com/Seneca-ICTOER/IPC144/issues/67) indicates that the [page](https://cghub.ca/Resources-Appendices/ebcdic-collating-sequence) uses EBCDIC Collating Sequence table as an image which is not accessible. The task should convert into text and Markdown table. 

The conversion itself is very simple. However, I should have to convert with extra carefulness because the task has to be manually converted which there is change that I mess up the table. The table is accessible than the image table after I converted into table.
![After-Fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd00hfhgbn5v952zd97g.PNG) I have created [PR](https://github.com/Seneca-ICTOER/IPC144/pull/77) and received reviews from other student. I will talk about more peer review next post.
New Tips In Laravel
Tags: php, laravel, programming, beginners
Published: 2021-11-18 09:14:46

mask() - before() - after()
```php
use Illuminate\Support\Str;

$str = 'marcosgaad@gmail.com';
Str::mask($str, '*', 4); // marc****************
Str::mask($str, '*', 4, 3); // marc***aad@gmail.com
Str::mask($str, '*', -4); // marcosgaad@gmail****
Str::mask($str, '*', -4, 3); // marcosgaad@gmail***m

$before = Str::before($str, '@'); // marcosgaad
Str::mask($before, '*', 0) . '@' . Str::after($str, '@'); // **********@gmail.com
```
I hope you enjoy the code.
🆕 New Pyluos shell in the Luos Python lib
Tags: embedded, python, opensource, luos
Published: 2021-11-18 09:08:55

🆕 Luos feature: the Pyluos **shell**

"pyluos-shell" is a new command line coming with the **open-source** Luos **Python** lib Pyluos allowing you to directly find and connect to a gate on your **embedded** system and open an Ipython cession. This command line is extremely useful to make quick tests.

https://docs.luos.io/docs/get-started/get-started2/
How I closed my first paid freelancing client and how you can too
Tags: javascript, beginners, programming
Published: 2021-11-18 08:19:09

_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/)_

Closing your first client is hard

And it's also one of the most important steps of your freelancing journey

Once you do that, it gets easier

This week I closed my first web design client for $500

Here is how I did it (and how you can do it too):


First thing first I don't want to repeat myself

Here is a thread with my entire freelancing strategy (@DONVESH helped me create this)

https://twitter.com/VladPasca5/status/1450801786261020674?s=20

After you read this one you might also need to read this thread about outreach

https://twitter.com/VladPasca5/status/1458412628041101321?s=20


Now, let's continue with the good stuff

So a few weeks ago I reached out to someone on Twitter

He liked some of my web design work so I DMed him to let him know that if he ever needs help with web design I'm happy to help


After that, we talked a bit more about my service and how it can help him

We didn't end up working at that time but he said that he will refer me to others in the future

And guess what?

He did and that's how I got my client

He referred me to the client that I closed


Then he created a group with us, and I started talking with the client

He was looking for a landing page for his Gumroad product

I sent him my portfolio website 

Then we talked about the price and the payment

After we agreed on that the deal was closed


Now, let's analyze why I closed this client

This is really simple

Because for 3 months all I did was for free in exchange for testimonials and social proof

This helped me create a name for myself which lead to that referral


Also, the past work and the testimonials I have listed on my portfolio website helped a lot

This is why I tell you all to work for free at the beginning

This is KEY

This is how you can close your first paid client too

Sure, it's not something that happens in the short term


You need to play the long term and not give up after one week

If you do this, I can guarantee that you will close your first paid client in 6 months

So what to do next?

- Go back to the top and read the thread about my freelancing strategy
- Take action and follow it

_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)._let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._