teleren/devto huggingface dataset:
Bricks has been updated to Bootstrap 5 🎉
Tags: news, wordpress, bootstrap, showdev
Published: 2021-07-23 09:03:03

Brisk is a modular WordPress starter theme aimed at developers, powered by Bootstrap and Gulp.

With the latest release `v0.23.0`, it has been updated to include Bootstrap 5, taking advantage of all the new features of this popular frontend framework.

Some of Bricks' top features:

👉🏻 It natively integrates all its templates with Bootstrap 5
👉🏻 It uses Gulp to manage its compilation tasks (CSS, JavaScript, icons, fonts, images, localization)
👉🏻 It integrates with various useful tools like Rollup, Babel, Autoprefixer, PurgeCSS, Browsersync
👉🏻 It is lightweight, modular and SEO optimized
👉🏻 It integrates with some popular WordPress plugins and JavaScript libraries

The documentation available at https://bricks.stefanobartoletti.it/ was updated as well with all the latest changes.

The theme itself and the documentation website are both open-source projects, and their repositories are available on GitHub

{% github stefanobartoletti/bricks no-readme %}

{% github stefanobartoletti/bricks-docs no-readme %}
Find All Numbers Disappeared in an Array - Go solutions
Tags: leetcode, algorithms, arrays, go
Published: 2021-07-23 08:41:26

Hi everyone! Today, we will look at rather easy question from topic arrays. The most interesting in here - solution without using additional memory.

## The question
Link:  [448. Find All Numbers Disappeared in an Array](https://leetcode.com/problems/find-all-numbers-disappeared-in-an-array/).
Difficulty: `easy`
> 💡 Take 10-15 mins to find solution by yourself. If can't solve in-space time, let's keep reading.

## Approach #1 - Extra space

```go
func findDisappearedNumbers(nums []int) []int {
   hp := make(map[int]int)
   n := len(nums)
   res := make([]int, 0)

   for i := 0; i < n; i++ {
      hp[nums[i]]++
   }

   for i := 0; i < n; i++ {
      _, ok := hp[i+1]
      if ok == false {
         res = append(res, i+1)
      }
   }

   return res
}
```

Algorithm for input `[4,3,2,7,8,2,3,1]`:

1. We add all numbers to hash-map, it gives us like this:

    ```go
    {
    	4: 1,
    	3: 2,
    	2: 2,
    	7: 1,
    	8: 1,
    	1: 1
    }
    ```

    *It's not necessary to count amount of each number in `nums`.*

2. We know, highest value in array equals length of this array. Therefore we just need to find numbers from 1 to length which doesn't exists in create hash-map (don't exists in array) and save their to result array.

3. The biggest waste of memory happening because we use hash-map to store duplicate numbers. It clear that in worst case hash-map would use memory same as input array. So, it takes *O(n)* space complexity. Also, we have 2 passes through nums array, it takes *O(2n)* → *O(n)*.

## Approach #2 - in-space

```go
func findDisappearedNumbers(nums []int) []int {
	for i := 0; i < len(nums); i++ {
		ind := abs(nums[i]) - 1
		if nums[ind] > 0 {
			nums[ind] = -nums[ind]
		}
	}

	j := 0

	for i := 0; i < len(nums); i++ {
		if nums[i] > 0 {
			nums[j] = i+1
			j++
		}
	}

	return nums[:j]
}

func abs(a int) int {
	if a < 0 {
		return -a
	}
	return a
}
```

Algorithm for input `[4,3,2,7,8,2,3,1]`:

1. We take every number and mark corresponding position as negative, like this:

    ```go
    i=0 -> nums[0] -> 4-1=3 -> nums[3] = -nums[3] -> [4,3,2,-7,8,2,3,1]
    i=1 -> nums[1] -> 3-1=2 -> nums[2] = -nums[2] -> [4,3,-2,-7,8,2,3,1]
    i=2 -> nums[2] -> 2-1=1 -> nums[1] = -nums[1] -> [4,-3,-2,-7,8,2,3,1]
    ...
    i=6 -> nums[6] -> 3-1=2 -> nums[2] < 0 -> [4 -3 -2 -7 8 2 -3 -1]
    i=7 -> nums[7] -> 1-1=0 -> nums[0] = -nums[0] -> [-4 -3 -2 -7 8 2 -3 -1]

    [-4 -3 -2 -7 8 2 -3 -1]
    [ 0  1  2  3 4 5  6  7]
    ```

2. As you can see above, there are two positive numbers, their indexes + 1 will be the disappeared digits we were looking for. We put their to the beginning of array and return calculated range of slice ( `[5 6 -2 -7 8 2 -3 -1]` and `j=2`).
3.  It takes *O(1)* space complexity because we don't use any additional structures. We have two consecutive passes through array. It takes *O(2n)* → *O(n)* (discard constants) time complexity.
Sedot WC Surabaya Selatan Terlaris
Tags: sedotwcsurabayaselatan, sedotwcsurabaya, sedotwc, sedotwcsurabayamurah
Published: 2021-07-23 08:29:11

Bila WC di rumah Anda mampet, segera panggi jasa sedot WC Surabaya Selatan untuk mengatasinya. Harga murah dan terlaris, pengerjaan cepat sampai tuntas. Jangan biarkan mampet terus, sebab ada bahaya yang dapat ditimbulkan.

Sumber : Sedot WC Surabaya Selatan https://sedotwc-bergaransi.com/sedot-wc-surabaya-selatan
Complete Biography
Tags: biography
Published: 2021-07-23 08:22:08

Hello my name is Nick, although everyone calls me Nk, I am currently a fan of computer science and the world of vulnerabilities, since I was a child I have liked security a lot, hacking caught my attention, now I am officially a security informatics student, I always thought that programming was only going to be a hobby but when you realize everything you see is based on programming, and not knowing programming is not knowing what you touch and not knowing what you touch can be dangerous, so hacking and programming are always connected, I am not a very interesting person who has a great story but hey, thanks for seeing my bio, have a good day or night.
How We Implemented Fault Tolerant Hosting For ERPNext
Tags: netlify, erpnext, hosting, cloud
Published: 2021-07-23 08:06:39


![taylor-vick-M5tzZtFCOfs-unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1a4dmbn3a8d5w82ss637.jpg)

 
 ERPNext is Open Source CRM and Business Management tool that  Provide Control over Various Aspects of your Business Ranging from Work Order to Sales Invoice to Payment.It is Straight Competitor for **Odoo**, **SAP** and Other Leading Competitors. [Grynn](https://grynn.ch) Offer this CRM Customized For European Markets. We already have Built apps like For [E-Invoicing](https://github.com/Grynn-GmbH/Swiss-E-invoicing-ERPNext) , [Security Card](https://github.com/Grynn-GmbH/ERPNext-Security-Card-Printer), [Tax FX Rates](https://github.com/Grynn-GmbH/ESTV-SuisseTax-FX) and Much More which Make ERPNext Native to Europe. Now we have implimetned Hosting for [ERPNext](https://erpnext.com). Our Initial Version of Hosting Offers 3 Months Trial for Free you can get it [Here](https://signup.grynn.ch).

## The stack

From the very first we were into `lambda` thing. Also we wanted to impliment our front end that is compleatly isolated from our provisioning Infra. So we Picked Up [Netlify](https://netlify.com) as our hosting and it also provides functions which is what we wanted. Our backend infra is using [Linode](https://linode.com) For Provisioning machines and creating Sites. Now benifit of this is our front facing is totally based on functions and probability of its going down is very less. Our backend on the other hand  requires monitoring facilities and usage to track down it's uptime and automated heaing.

### The Front end

Our Front end is Using [React](https://reactjs.org) with [Gatsby](https://www.gatsbyjs.com/) and [Netlify Functions](https://netlify.com). The Reason for Using Gatsby is it's Performance , SEO and Automated Splitting is built into framework which makes it perfect for Creating High Performant Pages. If you are a Vue Fan then you can use [Gridsome](https://gridsome.org/). At Front end We take Information through Form , Verify it and Then Call a Function that queue the site creation process. Now our backend Part Comes in.

### 	The back End

In Backend We we take request in the Queue and process it and notify user with their site and temporary password. we have a Nginx Instance Running Detached From our Infra that Helps in Monitoring. Now our Nginx Decides where to Put our site. We are using Name Based Resolution for our free trial websites.

Here is Summary of Our Infra Looks Like
![Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihym6mwwz9nxl5tzf1tf.png)
 

Now this is view from ten thousand Feets i can say. Implimeting Hosting for Anything requires many things to be taken care of.
ansible lineinfile 中 regexp 如果匹配多行，只会修改其中一行
Tags: ansible
Published: 2021-07-23 08:05:21

```
    - name: sshd configuration
      lineinfile:
        path: /etc/ssh/sshd_config
        regexp: "{{ item.regexp }}"
        line: "{{ item.line }}"
      loop:
        - { regexp: '^[\s#]*AllowTcpForwarding', line: "AllowTcpForwarding yes" }
      notify: reload sshd
```
最开始 目标文件中有两行匹配 regexp `^[\s#]*AllowTcpForwarding`, 但两行都匹配 line, 所以只有第二行被替换，如果要确保多余的行 `AllowTcpForwarding no` 被删除，需要使用

```
    - name: sshd configuration
      lineinfile:
        path: /etc/ssh/sshd_config
        regexp: "{{ item.regexp }}"
        line: "{{ item.line | default(omit) }}"
        state: "{{ item.state | default('present') }}"
      loop:
        - { regexp: '^\s*AllowTcpForwarding\s+no', state: "absent" }
        - { regexp: '^[\s#]*AllowTcpForwarding', line: "AllowTcpForwarding yes" }
      notify: reload sshd
```

if state is absent, ansible will delete all lines match the regexp.
Adding and Removing dependency in Go modules
Tags: go, beginners
Published: 2021-07-23 07:59:07

---
title: Adding and Removing dependency in Go modules
published: true
date: 
tags: go, beginners
canonical_url: https://eternaldev.com/blog/adding-and-removing-dependency-in-go-modules
---

## Adding and Removing dependency in Go modules

Adding dependency is made easy with `go get` command. Specify the package needed and Go will add it to the module as a dependency. Before we get to that part let's look at how to initialize module in Go.

## Topics Covered

1. Initialize module
2. Adding dependency
3. Removing dependency

## Initialize module

We can initialize the module first to create `go.mod` file. This will contain details about our module

1. Name of the module
2. Version of Go used in the module
3. Dependencies of the module

After creating a new folder for your module, run the `go mod init {modulename}` command to initialize your module

```
go mod init helloworld
```

The above command creates `go.mod` file with the module name "helloworld"

## Adding dependency

`go get` command is the standard way of adding dependencies to your modules.

Download and install particular package using the `go get {package_name}`

```
go get github.com/gofiber/fiber/v2
```

The above command will install the fiber package (This is just an example and don't worry if you are not familiar with fiber)

After adding the dependency, just import it into your go file and you can start using the installed package

```
package main

import "github.com/gofiber/fiber/v2"

func main() {
	// Staring a server
    app := fiber.New()

    app.Get("/", func(c *fiber.Ctx) error {
        return c.SendString("Hello from fiber")
    })

    app.Listen(":3000")
}

```

For more info about go get command and its arguments, check this [link](https://pkg.go.dev/cmd/go/internal/get)

## Removing dependency

When you want to remove any dependency, you need to perform a couple of steps

1. Remove all the imports and code related to the package
2. Run `go mod tidy -v` command to remove any unused package

From the above example, we need to remove all the places where we are using fiber.

```
package main

func main() {
	// Staring a server
}
```

We just have an empty main function in our example but you get the point :)

```
go mod tidy -v

Output:
unused github.com/gofiber/fiber
```

The above command is used to remove any unused dependencies from the module. Since we have removed any reference to the installed package, it will assume that that package is not needed anymore and remove it from the dependency.

`go.mod` will also be updated to remove the dependency.

## Summary

- Initialize a module using `go mod init {packagename}`
- Add dependency using `go get {packagename}`
- Remove dependency by deleting the import references and running `go mod tidy -v` command

Stay tuned by subscribing to our mailing list and joining our Discord community

[Discord](https://discord.gg/AUjrcK6eep)
ทำไมต้องมี Web monetization
Tags: webmonetization
Published: 2021-07-23 07:54:40

---
title: ทำไมต้องมี Web monetization
published: true
description: 
tags: webmonetization
//cover_image: https://direct_url_to_image.jpg
---

คนเขียน blog ทำวิดีโอ ทำ podcast บางทีก็ควรจะได้ค่าตอบแทน

รูปแบบเดิม ๆ บนเว็บเลยก็คือเราก็ดูโฆษณาไป แล้วคนลงโฆษณาก็เป็นคนจ่ายตัง แบบนี้ก็ดีเหมาะกับคนจน หรือคนมีตังแต่ไม่อยากจ่าย แต่ก็เสียเวลา น่ารำคาญได้ หรือที่แต่ที่สุดคือถูกสอดแนมอย่างหนัก

อีกวิธีหนึ่งคือจ่ายตังรายเดือน อันนี้ก็เสียตังนิด ๆ หน่อยไม่แพงมาก ตัดรำคาญ ไม่โดนบริษัทโฆษณาสอดแนม แต่ข้อเสียคือบริการพวกนี้มันมีหลายเจ้า เว็บหนึ่งก็จ่ายรายเดือนทีหนึ่ง สมมุติว่าจ่ายเว็บละ 100 บาทต่อเดือน ดูสัก 20 เว็บบางทีก็อาจจะจ่ายพุ่งไป 2000 บาท บางเว็บก็อาจจะไม่ได้ดูทุกเดือนด้วยซ้ำ แบบนี้ก็ไม่น่าจะดีเท่าไหร่

ครั้นจะให้เนื้อหาทุกสิ่งอย่างรวมมันเป็น platform เดียวทั้งหมดก็กลายเป็นผูกขาด ผู้บริโภค ผู้ผลิตไร้อำนาจต่อรอง

[web monetization](https://webmonetization.org/) มาแก้ปัญหานี้เลย แทนที่จะต้องอยู่บน platform เดียวกัน แต่ละเว็บก็แค่ใส่ไปว่าจะให้จ่ายตังไปที่ไหนผ่าน tag นี้

```
<meta name="monetization" content="$interledger pointer" />
```

โดยที่ interledger pointer นี่ก็จะได้มาจากการที่เราไปสมัคร wallet ไว้

ส่วนคนที่ดูเว็บตอนนี้ผมเห็นสองทางเลือกคือ ใช้บริการ coil ซึ่งมี extension ให้ทั้ง Chrome และ Firefox เวลาเราเปิดเว็บมันก็จะค่อย ๆ โอน token ไปให้ หรืออีกทางหนึ่งคือใช้ Brave

ทีแรกผมว่านี้มันซับซ้อนหน่อย ๆ เหมือนกัน แต่ในยุคที่วัยรุ่นเล่น defi ผมว่าแค่นี้ง่ายมาก

แต่ทั้งหมดผมก็เพิ่งมาศึกษา ไม่ทราบว่าจ่ายแต่จะได้ตังจริง ๆ หรือเปล่า หรือจะมีปัญหาติดขัดอื่น ๆ หรือไม่
Docker cleanup: images by name search
Tags: docker, development
Published: 2021-07-23 07:49:17

There's nothing more annoying than collecting docker images locally and suddenly stateful application containers (like databases, mySQL, RabbitMQ) suddenly exiting because they don't have space left on the (usually VM) where they are running.

You can `docker system prune -a` to clean as much as possible or you can `docker rmi` everything, but what if you want to do a bit more targeted cleaning?

`docker image ls` will list all images with some info split in columns. First column is the image name, the second column contains the tag.

Now, we know that images share layers so deleting one won't necessarily free up all the space since some layers may still be linked to other images but we can improve cleanup by untagging images. How to do that in a more targeted way? By listing them and then joining the name column and the tag column and then passing it all to `docker rmi`. AWK comes to the rescue!

```
docker image ls | grep "MY SEARCH" | awk '{print $1 ":" $2}' | xargs docker rmi
```

Of course, feel free to replace grep with your preferred search command as long as its output only filters `docker image ls` output and doesn't extract information from it, as AWK expects the columnised output.

Note: you should still do a 

```
docker system prune
```

afterwards as unlinking tags only frees up layers but those layers may remain stored locally - but docker prune will remove the dangling ones (eg: not tied to tagged images or to running containers).
HTML TUTORIAL FOR BEGINNERS PART 3
Tags: html, programming, webdev
Published: 2021-07-23 07:29:22

You can use `a`(anchor) elements to link to content outside of your web page.
`a`elements need a destination web address called an `href`attribute. They also need anchor text. Here's an example:
```
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
```
Then your browser will display the text *this links to freecodecamp.org* as a link you can click and that link will take you to the web address *https://www.freecodecamp.org*
####Task
Create an `a` element that links *https://www.freecatphotoapp.com* and has **cat photos** as its anchor text.
###Solution
```<a href="https://www.freecatphotoapp.com">cat photos</a>```
WWDC 2021- What Apple Brings for Us This Year
Tags: ios, devops, news
Published: 2021-07-23 07:05:17

Apple’s Worldwide Developers Conference, or commonly known as WWDC, announced exciting new features that will improve the Apple ecosystem much better than before. These announcements include first looks at iOS 15, big improvements to FaceTime, the new macOS Monterey, and more.

The app development company of Apple is introducing features which are never seen before. These changes will simplify the work and provide ease to its users.

Here are the most important announcements:

iOS 15 for iPhones
Virtual sharings
Copy and paste image texts
Digital space for your IDs
Multitasking widgets
Privacy updates
Siri upgrades
Simplifying the process of health monitoring
AirPods improvements
iCloud updates
watchOS 8 for Apple Watch
Third-party Accessories with Siri
macOS Monterey for Macs
Safari features
Test Flights for developers
 

iOS Improvements to FaceTime and Notification Updates

The WWDC announcements include iOS 15, which will bring various improvements to FaceTime with a new “SharePlay” feature. SharePlay brings a feature named spatial audio. These include a new look for notifications, updates to Memories in Photos, sharing media with people virtually on FaceTime, a new design to the weather app, and much more.

Music and Video Sharing during FaceTime

Apple’s developers build an app, “SharePlay,” that lets you enjoy listening to or watching content virtually with others. Apple also introduced a SharePlay API for other developers that will help them build an app that supports this feature.

Read More: https://www.suriainternational.com/wwdc-2021-what-apple-brings-for-us-this-year/
How to create a transparent navbar with CSS
Tags: html, css, uiweekly, ux
Published: 2021-07-23 06:44:49

Last week, I look at the Gumroad website to know how to [Add **Made By** at the bottom corner of the website](https://dev.to/asyraf/how-to-add-made-by-at-the-bottom-corner-of-the-website-11jb) (Pssst, read that article, Pretty cool stuff 🔥).

This week, when I look at the [Super.so](https://super.so/) website, I notice new **interesting CSS stuff** :P.

![Screen-Recording-2021-07-22-at-0 (3).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1626918550117/MHkvdd6I8.gif)

Check the [Super.so](https://super.so/) website.

Notice the slightly <mark>transparent navbar</mark>. How cool is that?

I already see this kind of design on other websites too !!!

Other examples;

### ✅ [Obsidian](https://obsidian.md/)

![Screen-Recording-2021-07-22-at-0.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1626917479129/-lVBMzFzb.gif)

### ✅ [Mikkel Malmberg](https://mikkelmalmberg.com/ama)

![Screen-Recording-2021-07-22-at-0 (4).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1626918601839/7IagPaxbJ.gif)


Pretty cool right 🌈. So, **how are we gonna make it ??**

----

## Code Snippet

{% codepen https://codepen.io/asyrafff/pen/ExmwWVM %}

Try to scroll.

When I inspect the navbar on Super.so website, they already setup for **Webkit** (Safari) & **Moz** (Mozilla Firefox).

**The main thing to implement this trick is;**

### ✅ [**backdrop-filter**](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)

Without any explanation, try to change the `blur(20px)` to `blur(10px)` or `blur(50px)`.

Do you notice the transparent blur is changed?

That is the main ingredient to implement this trick ✌️.

### ✅ **background**

If you remove the background, the text that appears behind the navbar seems ugly.

It is kinda a glitch when you remove the background CSS. So, add it.

Make the color or text visible behind the navbar a little less obvious by adding a background.

### ✅ **position**

As always, for any navbar anywhere in the world, we must place `sticky` to keep the navbar at the top when we scroll the website.

### ✅ **top**

Usually, people place the navbar at the top. I don't know if you want to put it at the bottom?? 😂

### ✅ **z-index**

You can put any value more than zero to the `z-index` . You put it `n` index from the root floor of the page. 

> Imagine a house with five floors, 3 on top and 2 on ground level. The root floor is located on the Ground floor, which is 3 floors from the bottom. You want the navbar to be more obvious, so you place it on the third floor, the highest floor, and not on the lower ground floor.

That's it. 🌈

The End

---

Resources:

> no resources as I just use DevTool 😆
Some Useful JavaScript posts on google
Tags: javascript, beginners, programming, webdev
Published: 2021-07-23 06:42:40

Top 5 Results for javascript tips and tricks on google.

Looking for javascript tips and tricks in 2021 here is the top 5 result of google for it.

1. [16 JavaScript Tricks You Should Know in 2021](https://morioh.com/p/2a323b4a7909)

2. [17 Javascript optimization tips to know in 2021](https://dev.to/blessingartcreator/17-javascript-optimization-tips-3gil)


3. [16 JavaScript Tricks You Should Know in 2021](https://morioh.com/p/2a323b4a7909)


4. [4 Tips for JavaScript 2021](https://cmsinstallation.blogspot.com/2021/06/4-tips-for-javascript-2021-to-write.html)


5. [JavaScript Tips and Best Practices](https://apoorvtyagi.tech/javascript-tips-and-best-practices)
How to use your domain and subdomain with Hashnode and Vercel
Published: 2023-05-25 07:27:31

---
title: How to use your domain and subdomain with Hashnode and Vercel
published: true
date: 2021-07-23 06:20:42 UTC
tags: 
canonical_url: https://blog.afrieirham.com/how-to-use-your-domain-and-subdomain-with-hashnode-and-vercel
---

Yesterday I ran into a problem when I try to connect my domain to Hashnode and use a subdomain on Vercel. Thankfully, everything is resolved after I reach out to Sandeep on Twitter.

Here's the tweet.

[https://twitter.com/afrieirham\_/status/1418174381533003779](https://twitter.com/afrieirham_/status/1418174381533003779)

If you're planning to use your naked domain (or root domain) on Hashnode and you have a project on Vercel using a subdomain from the same domain please read this first.

# The Issue

Hashnode uses Vercel, and when you want to connect your root domain to your Hashnode blog, you will need to delegate it to Hashnode's Vercel account.

Again, if you're not planning to use any subdomain (on Vercel) from the domain you use on Hashnode, there's no problem.

However, I want to use afrieirham.com for my Hashnode blog, and I want to use bukugraduan.afrieirham.com on my Vercel project.

But I get this error ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627019309729/fQA9_qIVo.png)

Because what essentially happens is you're trying to use the same domain with 2 different Vercel account; Hashnode's and yours.

# The solution

If you've already facing the same issue, you might want to contact Hashnode to delete your domain from their Vercel account, then follow these steps.

1. Use www subdomain for your Hashnode account.
2. Redirect your root domain to point to your www subdomain.
3. You can now use any subdomain on your Vercel account.

This way, you'll only delegate www subdomain to Hashnode and you'll keep your root domain on your Vercel account.

# Conclusion

I want to again thank [Sandeep](https://twitter.com/Sandeepg33k) for his help. He's the one who get in touch with Vercel regarding this issue.

The solution I'm sharing here today is the suggestion from Vercel's team, so I would like to thank them as well.

This is what they have to say,

> It will be supported in the future. At this moment, however, it is indeed an edge case that we are not prepared yet. Vercel