teleren/devto huggingface dataset:
Where does a CMS fit in?
Tags: node, discuss, programming, api
Published: 2022-08-08 18:14:50

I am a backend engineer and after 9 years at a company I jumped ship to a French company that switched to 100% remote and was willing to pay me 45% more (that’s huge!).

Long story short, after 6 interviews I accepted the position to join a team and build a Nodejs backend, being promised the opportunity to pitch in the GraphQL idea. 

Sounds great, right? Can you blame me for being super excited to start ?

Well, 1 month in, the management cannot see any reason to build an in-house backend when we can just get a headless CMS and integrate stuff with it. “Out of the box…”

My new job proves to be “integration” of features with the CMS and help develop the front-end.

Has anyone experienced anything like this ? How did you handle it? 

Are CMSes the future of backends?
I’m confused and lost…
How to build simple todo list with Vue.js - Part 2
Tags: html, css, javascript, vue
Published: 2022-08-08 18:06:04

In the [last blog](https://dev.to/jakhongir/how-to-build-simple-todo-list-with-vuejs-part-1-2o6l) we created simple template and added **Vue.js** to our to do app. In this blog we will add **styling** to our app in order to make it less uglier. Let's get started.

At first let's create **styles.css** file and connect it to our **index.html** file:

```css
<link rel="stylesheet" href="./styles.css" />
```

After that add following code to **styles.css** file:

```css
html {
  box-sizing: border-box;
  height: 100%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  background-color: #fff;
  overflow-x: hidden;
  background-image: linear-gradient(120deg, #f6d365, #fda085);
}

#app {
  text-align: center;
}

.title {
  margin-top: 50px;
  color: #fff;
}

input {
  margin-top: 100px;
  display: inline-block;
  outline: none;
  font-size: 1.1rem;
  padding: 5px 30px 5px 5px;
  border: none;
  border-radius: 2px;
}

button {
  height: 22px;
  width: 22px;
  outline: none;
  border: none;
  font-size: 1.2rem;
  border-radius: 1px;
  background-color: #ff6f47;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: relative;
  top: 1px;
  left: -26px;
}

ul {
  width: 500px;
  margin: 50px auto 0;
  list-style-type: none;
  padding-left: 0;
  text-align: left;
}

li {
  background-color: #fff;
  margin-bottom: 16px;
  border-radius: 4px;
  padding: 10px;
  position: relative;
}

li .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 22px;
  outline: none;
  border: none;
  font-size: 0.8em;
  border-radius: 1px;
  background-color: salmon;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: calc(100% - 28px);
  transform: translateY(-50%);
}

```
Then we will add **title** (before input field) to our app to show what kind of list this is:

```html
<h1 class="title">Todo List</h1>
```

Wouldn't it be nice if we add **remove todo** functionality so that you can remove it from your todo list after completing. Let's add this:

At first we will add **✖** button to our todo item:

```html
<li v-for="item in todolist" :key="item">
  {{item}} <button @click="remove(item)" 
  class="remove">✖</button>
</li>
```

And now we should add **remove handler** which should be fired when remove button clicked:

```js
remove(value) {
  const filteredList = this.todolist.filter((t) => t !== value);
  this.todolist = filteredList;
}
```

After that the final result should look like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtodianxmdlcll6k16bt.png)

That's it for second part. In the next parts we will add checked functionality, filtering and implement localStorage in order to make our app refresh-proof. Thanks for reading. See you in the next blogs!
How to maintain your code/work quality under pressure
Published: 2022-08-08 18:02:25

Hello guys hope you are all doing absolutely fine 
I want ask a question to all Developers
I am an intermediate React developer yesterday my employee laid me off because my work quality has been decreased last month and my deliverables are not up to the mark
So the question is

**how you perform well or maintain code quality while working under pressure ?**

Thanks for reading this post
Have a nice day ahead
How to create animating gradients in CSS easy way.
Tags: webdev, css, gradients, tutorial
Published: 2022-08-08 18:01:00

A gradient is a continuation of colors with a starting and stopping point and a linear-gradient gradually moves in a straight line to another color.

Animation in Gradients are the latest trends these days and most of the websites are designed using gradients. With the background-clip property, and animations of CSS, it's very easy to implement animating text gradients.

**Syntax: How to create Animating Text gradients**
First, we have to set up a font using h1 or any tag of our choice and place it at the desired location. I have placed my font in the center using a flexbox.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azebopd0e3g9w8zvk200.PNG)

The result can be achieved with the help of

1. linear-gradient()
2. background-clip
3. text-fill-color
4. animation

1.Linear-gradient() property:
As explained above, this property creates a background linear gradient on the text block.
In CSS, linear-gradient is implemented using:

```
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
```

And the result will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwxrpr7go72pd7xpegr7.PNG)

2.background-clip() property:
This CSS property sets whether an element's background extends underneath its border-box, padding-box, or content-box.

```
background-clip: text;
```
And after applying this property, our text will look like:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v1s2pnhz13dj4ppy7az.PNG)


The background is painted within (clipped to) the foreground text.
Due to the text-color, we cannot see our linear gradient color, and then comes the use of our third property.

3.text-fill-color property:
Since we want to see the linear-gradient which is clipped to the foreground text, we have to make the color of the text transparent and the outcome will be:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x54e1ly649aphazyfa9k.PNG)

Now, let us put some animations to achieve our desired result.
For this we will increase the background size of the gradient so that when we make the animation we can see the effect clearly.

```
background-size:300%;
```

Now, let's add the css animation:

```
animation: bg-animations 2s infinite alternate;
```

Here, bg-animation is the name of the keyframe which we will use to animate. You can name it anything you like.

Now we will create out keyframe animation as below:

```
@keyframes bg-animations{
  0%{
    background-postion:left;
  }
  100%{
    background-position:right;
  }
}
```

And voila, we are done. You can see you your gradients animating:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8vo5xf6g1rbj9wv91bu.PNG)


[View Full Code in Codepen:](https://codepen.io/tejash023/pen/ExQJvZE)
Corruption Checksum
Tags: adventofcode, algorithms, programming, javascript
Published: 2022-08-08 17:34:03

## [Advent of Code 2017 Day 2](https://adventofcode.com/2017/day/2)

## Part 1
1. A delightful treat of ease
2. Animating my planned algorithm

### A delightful treat of ease
- A list of numbers
- Find the difference between the largest and smallest
- Sum up the absolute values of those differences

Sounds easy enough by now!

### Animating my planned algorithm
What I intend for my algorithm to do:
![Animation of the algorithm I plan to build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpkb8ivr91khfre43kb9.gif)

Time to build it!

### Writing my working algorithm
- A `reduce()` to tally up each `checksum`
- A regular expression to extract each row's numbers
- A `map()` to convert each matched string to a number
- A `sort()` to arrange numbers in ascending order
- `pop()` and `shift()` to subtract the first item from the last

```js
return input
    .split('\n')
    .reduce((chucksums, row) => {
      let cells = [...row.matchAll(/\d+/g)]
        .map(match => +match[0])
        .sort((a,b) => a - b)
      return chucksums += cells.pop() - cells.shift()
    }, 0)
```

## Part 2
1. Nested loops for the win
2. Animating my planned algorithm

### Nested loops for the win
- After sorting each list, I will compare each value
- Worst case for my input, each line requires 16+15+14...+1 comparisons: that's under 150, times 16 lines: that's under 2200 total - no biggie

### Animating my planned algorithm
![Planned algorithm for Part 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czrupnalyptrpku1975t.gif)

### Writing my working algorithm
```js
return input
    .split('\n')
    .reduce((chucksums, row) => {
      let cells = [...row.matchAll(/\d+/g)]
        .map(match => +match[0])
        .sort((a,b) => a - b)
      let divisor = null
      for (let i = 0; i < cells.length - 1; i++) {
        for (let j = i + 1; j < cells.length; j++) {
          if (
              cells[j] / cells[i] == 
              Math.round(cells[j] / cells[i])
             ) {
            divisor = cells[j] / cells[i]
          }
        }
      }
      return chucksums += divisor
    }, 0)
```

- Unlike in the animation, my algorithm sorts in ascending order
- That's because it's more likely to run faster when starting with the smallest number, dividing by increasingly larger numbers

## I did it!!
- I solved both parts!
- I made a couple GIFs animating how my algorithms work!
- Both GIFs helped show me some errors and performance gains related to my algorithms!

Bring on Day 1!
Hello World!
Published: 2022-08-08 16:58:56

# Intro to my blog
I have been doing random programming projects for a long time now. I am going to be posting some of the highlights of my past works here alongside my new work.

# Prior Education/Work History Summary.
## Education
Just before starting high school I took a introductory summer course to C++.
I took AP computer science in my first two years of highschool (java). 
That was followed by data structures and algorithms and intro to machine learning(python) in the last 2 years.

Also during highschool I took AP Statistics & AP Physics, getting a 5(that is really good) in the tests for both. 

## Between Highschool and Flatiron
I was planning on taking a trade school instantly after getting out of highschool, but covid hit, so all in-person classes were unavailable.
Because of that, I took a gap year waiting for classes to open back up.

During that time I began working on mod development for Minecraft. I have published most of my work on my [Github](https://github.com/CodeF53) and [Modrinth](https://modrinth.com/user/F53).
How to sync Satellite and router for Orbi login?
Tags: orbilogin, netgearorbilogin
Published: 2022-08-08 17:23:21

This article explains the way to synchronize Orbi satellite Orbi satellite with Orbi router. Otherwise Orbi Router login will not be possible. The article will take you through all the steps required to do the same. Read all the steps carefully and you will find that this is not something very tough.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hygdwsmb9b5pezbehkck.jpg)

1. The satellite must be placed close to your Orbi router.
Now Connect your satellite to the socket of your wall. There is a Power LED on the back of your Orbi satellite lights. Is the power LED on or off? Switch on the LED lights first.

2. Now wait for the LED light to become white.

There are following possibilities with regard to LED behavior:
o Pulsing white. The pulsating white of the LED means that the satellite you have is booting.

o Solid white. The satellite you have has finished booting and can now sync with the router you have.

  There is a sync button on the back side of your satellite. Within the time span of just two minutes, press the sync button of the Orbi router login you have.      
 
  Satellite will soon sync to the router. Be ready for **[Orbi login](https://orbisetup.com/)**.

Has the bottom light turned white? One of the three colors will appear for three minutes and the lights will finally turn off. You will be able to do **Orbi login** now. 

o Blue. Syncing was successful and the connection is working well.
o Amber. Syncing was successful and the connection is fair.
o Magenta. No syncing could occur.  Bring router and the satellite closer.
2. Take your satellite outside and connect it to socket in the wall.

Note: Keep the temperature between 4  ͦ F to 122   ͦ F (-20  ͦ C to +50  ͦ C).

3. LED light being blue means connection is okay.
Phalcon v5.0.0RC4 Released!
Tags: phalcon5, release, rc
Published: 2022-08-08 18:09:14

---
title: Phalcon v5.0.0RC4 Released!
published: true
date: 2022-08-08 17:20:22 UTC
tags: phalcon5,release,rc
canonical_url: 
---

Phalcon v5.0.0RC4 has been released!!

This release addresses mostly bugs that have been identified since our last RC version.

This will be the last RC version we release, the next one will be the stable version.

Currently our focus is to clean up the issues (verify and if need be fix bugs) and documentation updates.

As always, a huge thank you to our community for testing, reporting bugs, enhancing the framework in any way possible!

The changelog for this release ([v5.0.0RC4](https://github.com/phalcon/cphalcon/releases/tag/v5.0.0RC4)) is as follows:

## Fixed

- Reverted to single quotes when volt code generates PHP code.
- Any `tag` helpers only accept parameters with double quotes
- Renamed `Phalcon\Tag::form()` to `Phalcon\Tag::formLegacy` (helper `form_legacy`) [#16019](https://github.com/phalcon/cphalcon/issues/16019)
- Fixed 
  - `Phalcon\Cli\Router::getMatchedRoute()`
  - `Phalcon\Cli\RouterInterface::getMatchedRoute()`
  - `Phalcon\Mvc\Router::getMatchedRoute()`
  - `Phalcon\Mvc\RouterInterface::getMatchedRoute()` to return `RouterInterface` or `null` [#16030](https://github.com/phalcon/cphalcon/issues/16030)
- Fixed 
  - `Phalcon/Storage/Serializer/Base64::unserialize()`
  - `Phalcon/Storage/Serializer/Igbinary::unserialize()`
  - `Phalcon/Storage/Serializer/Igbinary::serialize()`
  - `Phalcon/Storage/Serializer/Php::unserialize()` to reset isSuccess value [#16040](https://github.com/phalcon/cphalcon/issues/16040)
- Fixed `Phalcon\Paginator\Adapter\Model::paginate()` fix group parameter breaking total items [#16042](https://github.com/phalcon/cphalcon/issues/16042)
- Fixed `Phalcon\Mvc\Model::doLowUpdate()` prevent RawValue getting overwritten [#16037](https://github.com/phalcon/cphalcon/issues/16037)
- Refactored `Phalcon\Image\*`
  - Reorganized code in the image adapters
  - Simplified various areas, speeding up processing
  - Removed `getInternalImImage()` (same as `getImage()`) for `Phalcon\Image\Adapter\Imagick`
  - Added better support for webm images [#15977](https://github.com/phalcon/cphalcon/issues/15977)
Minimum number of Insertion and deletion needed to convert String A to String B or make both the strings equal (same as lcs)
Tags: algorithms, java, dp, datastructures
Published: 2022-08-08 17:14:29

**Problem**:
Given two strings str1 and str2. The task is to remove or insert the minimum number of characters from/in str1 so as to transform it into str2. It could be possible that the same character needs to be removed/deleted from one point of str1 and inserted to some another point.

**Example 1**:

```
Input: str1 = "heap", str2 = "pea"
Output: 3
```
**Solution**:
```
Intuition : Find the largest common subsequence of the two strings and substract it from 
the length of the two strings and finally add the subtractions. i.e. m+n - 2 *lcs(StringA, StringB)
```
**Bottom up Approach(Memoization)** : 
Time complexity : `O(m*n)` where is `m` and `n` is the length of two strings `a` and `b`
space complexity : o(m*n) for using `2d dp` and `O(m+n)` for auxiliary stack space because in worst case we will make `m+n` recursive calls.

[Coding Ninjas Problem](https://www.codingninjas.com/codestudio/problems/can-you-make_4244510?source=youtube&campaign=striver_dp_videos&utm_source=youtube&utm_medium=affiliate&utm_campaign=striver_dp_videos&leftPanelTab=0)
```java
import java.util.*;
public class Solution {
    public static int canYouMake(String str, String ptr) {
        // Write your code here.
        // we will use bottom up approach for solving this problem.
        int dp[][] =new int[str.length()][ptr.length()];
        for(int row[] : dp){
            Arrays.fill(row,-1);
        }
        return str.length()+ptr.length() - 2 *lcs(str,ptr, str.length()-1, ptr.length()-1,dp);
    }
    public static int lcs(String str, String ptr, int m,int n,int dp[][]){
        if(m<0 || n<0){
            return 0;
        }
        if(dp[m][n]!=-1) return dp[m][n];
        if(str.charAt(m)==ptr.charAt(n)){
            dp[m][n] = 1 + lcs(str,ptr,m-1,n-1,dp);
        }
        else{
            dp[m][n] = 0 +  Integer.max(lcs(str,ptr,m-1,n,dp), lcs(str,ptr,m,n-1,dp));
        }
        return dp[m][n];
    }

}
```
**Top Down Approach(Tabulation)** : 
Time complexity : `O(m*n)` where is `m` and `n` is the length of two strings `a` and `b`
space complexity : o(m*n) for using `2d dp`

[GeeksForGeeksProblem](https://practice.geeksforgeeks.org/problems/minimum-number-of-deletions-and-insertions0209/1)
```java
class Solution
{
	public int minOperations(String str1, String str2) 
	{ 
	   // we will use top down approach to solve this 
	   int dp[][] =new int[str1.length()+1][str2.length()+1];
	   for(int i =0;i<=str1.length();i++){
	       dp[i][0] = 0;
	   }
	   for(int i =0;i<=str2.length();i++){
	       dp[0][i] = 0;
	   }
	   for(int i =1;i<=str1.length();i++){
	       for(int j =1;j<=str2.length();j++){
	           if(str1.charAt(i-1)==str2.charAt(j-1)){
	               dp[i][j] = 1 + dp[i-1][j-1];
	           }
	           else dp[i][j] = Integer.max(dp[i-1][j],dp[i][j-1]);
	       }
	   }
	   return str1.length() + str2.length() - 2 * dp[str1.length()][str2.length()];
    }
}
```
You're Continuously Integrating & Continuously Deploying. The time has come to Continuously Document.
Tags: codereview, beginners, programming, tooling
Published: 2022-08-08 17:09:11

I'm Principal Software Engineer at Swimm. A startup building a documentation tool for developers based on the paradigms of Continuous Documentation. 
## What is continuous documentation

"Continuous documentation is the process of creating and updating documentation incrementally and as part of the development workflow, ensuring it is in sync with the codebase."

The author - who happens to be a good friend of mine - argue for [3 main principles](https://swimm.io/blog/what-is-continuous-documentation-manifesto-part-1/?utm_source=facebook&utm_medium=social&utm_campaign=devto-post-aug8). 

Continuous Documentation means that the documentation is: 

1. Code-coupled
2. Always up-to-date
3. Created when best

Sounds good in theory, right?

But how does it work in practice? 

**One way is through Git Checks**
Swimm automatically checks any documentation pushed to git to make sure it’s up to date. If the code mentioned in your documentation changed, Swimm alerts you and lets you address the issue quickly and easily. This way both your code and your documentation are always accurate and up to date.

I invite you to check out Swimm and [join our free open beta](https://swimm.io/sign-beta/?utm_source=facebook&utm_medium=social&utm_campaign=signup-aug8					) and I'm happy to chat with anyone from the dev.to community to show them the various use cases for Swimm - for both teams and individuals.
[10/40 things about data] Try to use the simplest possible data structure
Tags: database, data, algorithms
Published: 2022-08-08 16:57:25

A few years ago, one of the websites I was working on went on the front page of Google (yes, that small blue link). The traffic it gets is pretty high.

I had to develop search functionality. The first thing you’d think is to use the database you are currently using or maybe use a special one, like elastic.

But in this case, I needed to use the database as little as possible to be able to cope with the load.

So I decided to go the simplest way: create an index with an in-memory array where all the words would be stored. I ran a linear search, yes, a simple for loop with the search logic.

Was it the best index structure? No, if you just think about performance, but it worked, it was simple, easy to maintain and change.

There is always time to make it more advanced. With time you end up loving simple and flat arrays.
TIL: <audio> _ issue with iOS mobile
Published: 2022-08-08 16:52:00

I am using `< audio >` sources for a project.
While testing, all iphone & ipad mobile browsers (chrome and safari) were not playing my audio sources at all. And <audio controls> UI was showing 'ERROR' only. 

After many googlings and trials, I realized it was format problem. iOS doesn't seem to accept ogg files. I have almost 30 audio files to load, so I converted them into ogg files to lower the size but... Phew. 

Wondering why iOS wouldn't accept ogg though. I couldn't find a useful article which explains why so. Instead, I just googled ogg's pros and cons (e.g., https://mp4gain.com/mp4gain/advantages-and-disadvantages-of-the-ogg-format-compared-to-mp3/)

Another problem I need to solve is, playing audio in mobile browser at certain timing. In pc browsers, I made `<audio>` to play at certain scroll-y locations. It does not work in iphone. It  plays the audio only if the click/touch event directly calls audio.play(). Even if it's not exactly autoplay in `<audio>` tag, it still needs some user touch interaction to trigger.
How To Migrate From Strapi v3 to v4 Walkthrough
Tags: strapi, javascript, migration, headlesscms
Published: 2022-08-08 16:38:00

In case you missed the live stream, learn how to do the code migration from Strapi v3 to v4. Get started in the migration process, learn where to go for additional help and where to find things in our documentation.

To facilitate the process of migration of your Strapi project from v3 to v4, in this video we go through the code migration from Strapi v3 to v4. 

You will be able to get started in the migration process and know where to go for additional help and where to find things in our documentation. This video covers the "big picture" overview of the whole process and shows you how to use codemod, a tool that simplifies the migration process. 

At the end, go over a basic example of creating a custom controller and GraphQl resolvers and learn how you can migrate customized portions of your previous version. So if you are wondering how to migrate from Strapi 3, this is the video for you! 

{% youtube NSvdQKVvV9k %}

#A new live stream is coming up: Difference Between Strapi v3 and v4, what changed, and why?

This Thursday, we will have a live stream where Paul Bratslavsky, Developer Advocate, Aurelien Georget, Co-Founder and CPO, and Alexandre BODIN, CTO at Strapi will discuss the differences between Strapi v3 and v4, what changed, and why.

Bring your questions and register [here](https://lu.ma/strapi-v3-vs-v4)! 


#Try Strapi v4.3.2 out now!

To create a new Strapi v4.3.2 project and try the TypeScript and Media Library folders, simply run the following command:

```
npx create-strapi-app my-project --quickstart
```

Follow the Quick Start Guide for detailed step-by-step instructions or have a look at a video instruction:

{% youtube h9vETeRiulY %}

We would love to hear what you think about the new features! Let us know in [this](https://forum.strapi.io/t/new-release-strapi-v4-3-2/20861) forum thread.