teleren/devto huggingface dataset:
I made my website rank by accident
Tags: watercooler
Published: 2021-11-21 11:34:57

You must be thinking, clickbait 🪝, right?
Well, it kind of is, but also isn't.

I make my website rank on purpose but had an accidental big win on a specific topic.
Let me explain what happened.

## Looking through Google search console

Now and then, I like to take a Sunday to go through my search console, Ahrefs, and analytics.
This process includes checking broken links, seeing where I might have missed a broken image, and most importantly, where I can optimize!

On 27 June 2021, I wrote this article about [moving from GIF to video format](https://daily-dev-tips.com/posts/moving-from-gif-to-video-format/). And this article was purely written to make my website faster.

Which it did! These pages I changed became so much faster, so I was happy.

Back to now, I was checking my Google Search Console and noticed the following:

![Ranking on video](https://cdn.hashnode.com/res/hashnode/image/upload/v1636521944601/71zevGTlN.png)

The screenshot above shows I got clicks and impressions on video content?
And although I did do some twitch before, this never really picked up. So I was surprised where these impressions and clicks came from.

Diving a bit deeper into the reports, I found the keywords used and decided to go through them in the video tab on google.

![Search results for Video content](https://cdn.hashnode.com/res/hashnode/image/upload/v1636522117786/1ddn5xQ1m.png)

And on the "Chrome screenshot" query, I managed to find the following video snippet.

![Video snippet ranking in Google](https://cdn.hashnode.com/res/hashnode/image/upload/v1636522287001/VTarLr0j_.png)

Pretty impressive, as this is only an 8-second self-hosted video snippet. (Which used to be a GIF)

Here, you can see it in action: [Detecting faces from the webcam in JavaScript](https://daily-dev-tips.com/posts/detecting-faces-from-the-webcam-in-javascript/).

## Conclusion

Moving from GIF to video does not only make your website faster. It even helps get you ranked on video content!

I, for one, was super surprised as I haven't even optimized any on this content for that purpose.

Did you ever have random SEO wins?

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Auto Website Builder
Tags: website, automatedcodegeneration
Published: 2021-11-21 11:23:41

Need to make a simple website for your own ? Try this out . 

Idea of this project came to me when some people asked me to develop a website for them .. 

So .. what is auto website builder ? 
You can make websites with your inputs .


<h3> Available options </h3>
<ul>
<li>Titlebar name </li>
<li>Titlebar logo</li>
<li>Header Image</li>
<li>Background Image</li>
<li>Title , Color of Title</li>
<li>Responsive  </li>
</ul>


<h3> Features </h3>
<ul>
<li>Customizable </li>
<li>Single Page (for now)</li>
<li>Sticky header</li>
<li>Bootstrap added</li>
</ul>


{% github httpanand/Auto-Website-Builder no-readme %}
Clean & Minimal portfolio website
Tags: nextjs, tailwindcss, vercel, webdev
Published: 2021-11-21 11:22:37


#Portfolio Website

Hey, this is my portfolio website, Let me know what do you think about the website.

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

Website is made using next.js, tailwind, GSAP and deployed on Vercel.

Live Link
[Link to Website](https://mukulrajpoot.vercel.app/)

GitHub Link
[Link to Repo](https://github.com/mukulrajpoot262610/portfolio-2021)

##Some Screenshots
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xz25morpabpt9y9p1q8y.png) 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqnpm4vuwyawyqkrw6z9.png)
Pulse wave in WebAudio
Tags: webaudio
Published: 2021-11-21 11:20:09

---
title: Pulse wave in WebAudio
published: true
description: 
tags: webaudio
---

## PeriodicWave

We can define `OscillatorNode` for any periodic function `f(t)`, defined by the domain `[0, 2π)`, using `PeriodicWave`:

```js
const ω = new OscillatorNode(
    audioContext,
    {
        type: "custom",
        frequency: frequency,
        periodicWave: new PeriodicWave(
            audioContext,
            {real: a, imag: b}
        ),
    }
);
```

where `a` and `b` are `Float32Array`s initialized by

{% katex %}
\begin{aligned}
a_{0} &= \frac{1}{2\pi}\int_{0}^{2 \pi} f(t) dt, \\\\
b_{0} &= 0, \\\\
\end{aligned}
{% endkatex %}

{% katex %}
\begin{aligned}
a_{n} &= \frac{1}{\pi}\int_{0}^{2 \pi} f(t) \cos(n t) dt, \\\\
b_{n} &= \frac{1}{\pi}\int_{0}^{2 \pi} f(t) \sin(n t) dt.
\end{aligned}
{% endkatex %}

## Pulse Wave

Pulse wave with duty ratio `r:1-r` is defined

{% katex %}
f(t) = \left\\{\begin{array}{rc}
  -1, & \pi r \leq t < \pi (2 - r), \\\\
   1, & \mathrm{otherwise}.
\end{array}\right.
{% endkatex %}

Coefficients `a` and `b` for the wave are

{% katex %}
\begin{aligned}
a_{0} &= 2 r - 1, \\\\
a_{n} &= 4 r \mathrm{sinc}(n r) \sigma_{n}, \\\\
b_{n} &= 0,
\end{aligned}
{% endkatex %}

where

{% katex %}
\mathrm{sinc}(x) = \frac{\sin(\pi x)}{\pi x},
{% endkatex %}

and `σ` is additional coefficient for removing ringing artifacts:

{% katex %}
\sigma_{n} = \frac{N - n}{N + 1} \cos\left(n \frac{\pi}{N + 1}\right) + \frac{1}{N + 1} \frac{\sin\left((n + 1) \frac{\pi}{N + 1}\right)}{\sin\left(\frac{\pi}{N + 1}\right)},
{% endkatex %}

and N is the length of `Float32Array`.

### sinc function

We define sinc function for numerical stability:

```js
function sinc(x) {
    const πx = Math.PI * x;
    if (Math.abs(x) < 1e-9) {
        // Taylor series centered at x=0
        const πx_sq = πx * πx;
        return (
            1 - (
                1 - (
                    1 - πx_sq / 42
                ) * πx_sq / 20
            ) * πx_sq / 6
        );
    } else {
        return Math.sin(πx) / (πx);
    }
}
```
Just released Notion Pro Clipper Web Extension
Tags: chrome, showdev, watercooler
Published: 2021-11-21 11:18:50

---
title: Just released Notion Pro Clipper Web Extension
published: true
description: Save anything from web directly to your Notion page in one click.
tags: chrome, showdev, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dliksjcoptaemh2d5d87.jpg
---

Just Released our product Notion Pro Clipper on Producthunt. After working with 700+ beta user from Notion Community our it's finally here.  

So, what can you do with Notion Pro Clipper?

{% youtube 73MAHQ2_DSU %}

### 🌐 Page Clipper

![Notion Pro Clipper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fabcqofd85rugll069yw.jpg)

3 ways to clipper the information on web using Notion Pro Clipper:
1. **Just URL**: The plan simple way to save urls to Notion
2. **Content of Web Page**: Clip the entire content on webpage to Notion
3. **Section of Web Page**  

### 📸 Take Screenshot

![Notion Pro Clipper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spk5uktve1x3qd4p1eo8.jpg)

Notion Pro Clipper lets you capture screenshots of any page in one click and adds them to whichever Notion page you want. It lets you take screenshots in 3 ways. 
- **Visible Section**: Section visible currently
- **Entire Page**: From top to bottom
- **Free clip**: Select any area you want on a page 

### 🌄 Image Clipper

![Notion Pro Clipper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfcfqhdxmmtzmln6hth8.jpg)

Just hover on any image on web you want to save and save it directly to Notion. 

### Bonus 

![Notion Pro Clipper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nftcg5aeh38goxrqrsr.jpg)

Save any Youtube video directly to Notion with one click.

I hope you all are ready to use this. Get it [Notion Pro Clipper](https://notionproclipper.com)

We are on Producthunt today. Go show some love here.

[![Notion Pro Clipper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shdi1dgtplndew3to0y9.PNG)](https://www.producthunt.com/posts/notion-pro-clipper)

Thanks Again 🖖🏼
Github CI Integration
Tags: github, java, python, testing
Published: 2021-11-19 23:06:51

As a coursework of OSD600, we were integrating CI on our projects. Since my project was being created with Java, and added Maven for dependency and artifacts, I added maven run in my GitHub action CI. 

I have experienced those automated tests and checks through GitHub actions when I was contributing on huge projects before. It is a very cool feature that could allow multiple contributors to check if they broke any core functionality when contributing. 

I had to modify the yml file multiple times because it was not functioning properly at first. I had to add some plugin and scope in pom.xml for maven automated tests. 
```xml
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.2</version>
```

And after adding surefire, below commands was finally picking up Junit classes for testing
```
      - name: Build maven package
        run: mvn package -DskipTests
      - name: Test
        run: mvn test
```

I wanted to add formatter and linter inside the CI, but since the formatter and linter I have used in my project had no functionality to check and format the code with "mvn" command, I had to postpone it to later development. 

For the future improvement, I would like to add a script to run formatter and linter that could automatically reformat and check all of the file, and add the script into the CI. This would require more research and knowledge on CI. 

A successful action that ran for the pull request could be found [here](https://github.com/irenejoeunpark/ssgApplication/runs/4269864900?check_suite_focus=true). I created a unit test to test if the html header & footer writer method is working properly. 


Second part of the lab was to partner up with another student and create a unit test for their project and see if the CI is working properly. 

I contributed on Le Minh Pham's [project](https://github.com/lmpham1/cool_ssg_generator) which was written in Python. 
Unit testing in python was a lot simpler than using Java.
I created two unit testings, which have test cases for horizontal rules and a combined markdown feature. 
First I failed on horizontal rules testing, and had to discuss with Le Minh Pham, he was able to fix the part where it breaks the <p> tag inside the html body. 

After his fixes and commits, my [PR](https://github.com/lmpham1/cool_ssg_generator/pull/26) was able to pass the automated checks and was able to get merged.
Padi idc gili trawangan
Published: 2021-11-21 11:16:20

Are you looking to (https://www.einnews.com/pr_news/552251385/the-brand-new-padi-idc-2022-schedule-with-holly-macleod-is-announced)  become a professional scuba diving instructor in 2022? The PADI IDC Indonesia Program offers professional divers the chance to develop a brand new rewarding and successful career as a scuba diving instructor, teaching others to dive for the very first time. All Instructor level training is entirely conducted by PADI Course Director Holly, offering over 20 years direct industry experience. Having issued well over 3000 PADI Instructor level certifications and received both the Platinum and Elite 300 awards for the past 9 consecutive years, new instructors will receive a level of training way over and above that generally found.
Policyer - the first JS policy engine
Published: 2022-12-09 14:09:41

---
title: Policyer - the first  JS policy engine
published: true
date: 2021-11-21 11:10:57 UTC
tags: 
canonical_url: https://blog.niradler.com/policyer-the-first-js-policy-engine
---

Policyer is an open-source project (more like a vision) I created after being inspired by policy engines that become very popular lately ([**OPA**](https://www.openpolicyagent.org/),[**Checkov**](https://github.com/bridgecrewio/checkov))  
Policyer going to focus on providing a platform to run and create meaningful reports, data engagement and a plugin system to let you provide any data, sometimes it can be k8s YAML and in other cases, it can be user data.

[GitHub repo](https://github.com/niradler/policyer)

### Getting started

checkout the example [repo](https://github.com/niradler/policyer-todo)

```
git clone https://github.com/niradler/policyer-todo
cd policyer-todo
npm i
node cli.js -o ./report.json -p ./checks -i false

```

Checks format:

```
---
configuration:
  provider: todo-provider
  type: resource
  resource: todo
  payload:
    id: 1
checks:
  - id: todo-id-check
    name: check if todo has an id.
    severity: High
    steps:
      - path: id
        condition: equal
        utility: isInteger
        value: true
      - path: id
        condition: equal
        value: 1
  - id: todo-title-check
    name: check if todo has a title.
    severity: Warning
    steps:
      - path: title
        condition: not
        utility: isEmpty
        value: true
  - id: todo-completed-check
    name: check if todo has a valid completed field.
    severity: Warning
    steps:
      - path: completed
        condition: includes
        value:
          - true
          - false

```

A check is a set of conditions or policies to enforce, many utilities can help you build complex policies, and you can also add your own when writing your provider.

Policyer is modular, and by nature prefer to be behind the scene and let you customise the user-facing side by the Provider as best fit to your need.

checkout the example repos, contribution is welcome.
This week in Flutter #30
Tags: flutter, dart, news
Published: 2021-11-21 10:50:57

Did you know that using [DartPad](https://github.com/dart-lang/dart-pad) you could easily **show a running Dart code** example on a **web page** ? You can see it in action [here](https://ishouldgotosleep.com/extension-methods-for-generic-types/) . The Flutter team announced that now you can also [add packages to your Dart code example](https://medium.com/dartlang/announcing-package-support-for-dartpad-66a4b415970b) . It is disappointing that many content creators are not using DartPad in their articles. I am gonna guess that the reason is that many of them use a [platform](https://medium.com/@nikitonsky/medium-is-a-poor-choice-for-blogging-bb0048d19133) that is absolutely not built for developers who blog. I hope that with this update, more bloggers will start using it.

The Flutter team also released a video about [app monetization](https://www.youtube.com/watch?v=-EGSn_MABYo) . You can load and display **Google Ads** in your Flutter app, or you can use **in-app purchases** or Google/Apple pay.

\- Michele Volpato

Development 🧑‍💻
-----------------

### 🔗 [Flutter Canvas API: Getting Started](https://www.raywenderlich.com/26483389-flutter-canvas-api-getting-started)

Learn how to create **custom widgets and shapes** in this awesome tutorial by [Wilberforce Uwadiegwu](https://github.com/wilburt) .

### 🔗 [Introduction to FFmpeg Kit API](https://tanersener.medium.com/introduction-to-ffmpeg-kit-api-59623911fbfc)

FFmpeg is an open source suite of libraries that helps with **handling video and audio** . You can convert a file from a format to another, for instance. With [`ffmpeg_kit_flutter`](https://pub.dev/packages/ffmpeg_kit_flutter) you can use it in your Flutter application. Learn how it works in this article, by [Taner Sener](https://github.com/tanersener) .

### 🔗 [Flutter: Building a custom video trimmer with stack and FFmpeg](https://medium.com/@kibzrael/flutter-building-a-custom-video-trimmer-with-stack-and-ffmpeg-388c78a01c7b)

And now that you know about FFmpeg, practice your **video editing skills** with this article by [kibzrael](https://medium.com/@kibzrael) .

### 🔗 [Flutter State Management with Riverpod: The Essential Guide](https://codewithandrea.com/articles/flutter-state-management-riverpod/)

I might have already linked this article written by Andrea Bizzotto, on **state management with Riverpod** . But Riverpod was [recently promoted to 1.0.0](https://twitter.com/remi_rousselet/status/1456624735899504643) , so Andrea updated the article. It is a good idea to read it, again.

Backend 🗄
----------

### 🔗 [Deploy a Dart Shelf server to Google Run](https://filipebarroso.com/articles/dart_shelf_gcp_google_run/)



[...]

Read the rest on [my website](https://ishouldgotosleep.com/this-week-in-flutter-30/).

[Join the Flutter and Dart newsletter](https://ishouldgotosleep.com/subscribe-to-the-newsletter-devto/) and receive it weekly in your inbox.
Using Keycloak to authorize & authenticate Spring Boot application
Tags: java, webdev, tutorial, programming
Published: 2021-11-21 10:38:54

Recently I started an SaaS project. For any project, one of the first problems you need to solve is authentication and authorization. It's 2021 and it's quite foolish to build your own system to log users in and check their role. After a few weeks study available options, I decided to go with Spring Boot & Keycloak.

If you don't know Keycloak, it's an opensource project that help you quickly setup authentication & authorization for your app. In my case, this is a perfect fit.

## Project requirements

* App has three roles member, moderator, admin
* API must have endpoints to create user and let user login
* Endpoints authorization could be configure with path prefix (for example /admin...) or by developer specifies the role allowed for each endpoint (using @RolesAllowed)

## The code

The project is available here on Github, you can checkout and try it right away:
https://github.com/datmt/Keycloak-Spring-Boot-Login-Create-User

## Need tutorial?

If you need step by step tutorial, check my post here:

https://datmt.com/backend/integrate-keycloak-with-spring-boot-step-by-step/

## Conclusion

Keycloak is a mature solution for authorization and authentication. It has quite many customization that can fit into various needs. If you can use it in your project, it can save you a great deal of valuable time.
week 4: I-N-T-E-N-S-E
Tags: codeofafrica, awessomitylab, taskforce
Published: 2021-11-21 10:30:54

A full month into the bootcamp and things get more interesting with each passing day. We all had been looking forward to starting intense coding sessions and boy did we get that😅

I knew we were in for an intense week when Regis walked into our office on monday and said we are expected to have working APIs by friday,we all glanced at each other and had a quick laugh which could be interpreted as "yeah..that week we have been looking forward to is here, but it is on steroids". We got to work almost right away and started to work on folder structure but that's where the challenges started as none of us had worked with Nest js before but of course we had the internet and the guys at AL x CoA (s/o to Regis,Bert and Brian)to rely on. It was tough for the first 2-3 days but it gets a little bit easier as you work more and more with it but again learning on the fly is something you can not avoid as a software engineer, to be honest it works for me and I assume for other engineers as well as you learn so much in a short time. We managed to complete ~90% of the tasks and I couldn't be prouder of the boys.

We also had a stress management and resilience session on tuesday (wonder if it was just a coincidence that it was scheduled for this week 🤔hmm) and client communication in an agile world which answered most of the questions I had concerning the whole agile development methodology.

Very very fruitful week behind and I suspect week 5 will be even more fruitful and I can't wait.

Cheers
How to install SQL Server 2019 Developer and SQL Server Management Studio (SSMS) - for FREE
Tags: sql, webdev, programming, tutorial
Published: 2021-11-21 10:05:10

In this Video I have clearly explained How to install SQL Server 2019 Developer and SQL Server Management Studio (SSMS) - for FREE

Also Explained how to connect to the SQL Server through Management Studio and how to connect through the Visual Studio 2019.
{%youtube KCBpvse2Km8%}
Random Color Generator in HTML CSS and JS
Tags: javascript, webdev, css, beginners
Published: 2021-11-21 09:33:07

Hello everyone, I am back here with an amazing article 🌈

In this article, I am going to talk about creating a **Random Color Article** which might help you to improve your front end dev skills.

### Purpose of making this 

- You will feel more self-confident
- If you are a beginner you will learn something new from this tutorial, and if you are not a beginner then you will just practice a new thing 

So, let's gets started

### Make sure to check out this video
{% youtube wQlRHnJFtYk%}

- In `index.html`
```html
<div class="container">
        <center>
            <div id="color" onclick="getRandomColor()"></div>
        </center>
    </div>
```

- In `style.css`
```css
#color {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 90px;
    font-weight: 900;
    mix-blend-mode: difference;
    cursor: pointer;
}
```

For **JavaScript**, make sure to check out the [video](https://youtu.be/wQlRHnJFtYk)


Congrats you have made **Random Color Generator** in HTML CSS and JavaScript 🥳
WhereHas() In Laravel
Tags: programming, php, laravel, beginners
Published: 2021-11-21 09:41:32

Let's get started quickly
You may want to base your results on the existence of a relationship. For example, imagine that you want to retrieve all projects that have project_one starting with ,CSS. To do this, you can pass the name of the relationship to the whereHas() method and specify additional query constraints for has queries
```php
Project::whereHas('project_one', function (Builder $query) {
    $query->where('title', 'like', 'CSS%');
})->get();
```
use with() method with WhereHas()
```php
Project::with('project_one')->whereHas('project_one', function (Builder $query) {
       $query->where('title', 'like', 'CSS%');
})->get();
```
Now, Let's be more professional
```php
public function scopeWithWhereHas($query, $relation, $constraint){
   return $query->whereHas($relation, $constraint)->with([$relation => $constraint]);
}
```
Then
```php
Project::withWhereHas('project_one', fn($query) =>
     $query->where('title', 'like', 'CSS%')
)->get();
```
Since this query builder may be needed in many Models in AppServiceProvider::boot() 
```php
use Illuminate\Database\Eloquent\Builder;
Builder::macro('withWhereHas', fn($relation, $constraint) =>
   $this->whereHas($relation, $constraint)->with([$relation => $constraint]);
);
```
I hope you enjoy the code.
Virtual Theatre
Published: 2021-11-21 09:37:25

Hi, Everyone
I am Django developer. I am doing freelance from last 4 years. One of my client want a virtual theatre website like "scener"

scener reference website.
https://www.scener.com/

Summary: what scener do allow user to login with Netflix, Amazon prime account. User can host a party movie streaming and can will invite the audience to watch movie together. No user can login without Netflix or amazon account. Netflix and amazon account is must to get in party.

Netflix and Amazon not providing any API to get stream. They only provide movies metadata.

Problem: How I can show Netflix movie stream to y platform. I have to create a Video player that will syn in front of Netflix, amazon movie stream. 
In which language technology should I develop the player. 
Maybe I am not getting right how I can develop this platform.
what react can help me with it ?

Please anyone suggest from where should I start or give road map to get complete the project using react js, java-script.

Thanks