teleren/devto huggingface dataset:
Weekly web development resources #115
Tags: weekly, webdev
Published: 2022-03-30 06:22:54



______

##[GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats)
[![GitHub Readme Stats](https://wweb.dev/weekly/content/115/github-readme-stats.jpg)](https://github.com/anuraghazra/github-readme-stats)
A tool to automatically generate dynamic statistics for your GitHub readmes.

______

##[12ft](https://12ft.io/)
[![12ft](https://wweb.dev/weekly/content/115/12ft.jpg)](https://12ft.io/)
A website that helps you removing paywalls from articles.

______

##[React Arborist](https://github.com/brimdata/react-arborist)
[![React Arborist](https://wweb.dev/weekly/content/115/react-arborist.jpg)](https://github.com/brimdata/react-arborist)
A full-featured tree component for React.

______

##[MiroTalk P2P](https://github.com/miroslavpejic85/mirotalk)
[![MiroTalk P2P](https://wweb.dev/weekly/content/115/MiroTalk.jpg)](https://github.com/miroslavpejic85/mirotalk)
A simple and secure WebRTC real-time video conferences tool.

______

##[Hackertab](https://hackertab.dev/)
[![Hackertab](https://wweb.dev/weekly/content/115/hackertab.jpg)](https://hackertab.dev/)
A website that shows the latest tech news, tools, jobs and events.

______

##[Emoji Button](https://emoji-button.js.org/)
[![Emoji Button](https://wweb.dev/weekly/content/115/emoji-button.jpg)](https://emoji-button.js.org/)
A simple vanilla JavaScript emoji picker that supports all Unicode emojis.

______

##[Dynamic Open Graph Images](https://braydoncoyer.dev/blog/how-to-dynamically-create-open-graph-images-with-cloudinary-and-next.js)
[![Dynamic Open Graph Images](https://wweb.dev/weekly/content/115/dynamic_og_images.jpg)](https://braydoncoyer.dev/blog/how-to-dynamically-create-open-graph-images-with-cloudinary-and-next.js)
A nice article on how to dynamically create open graph images with Cloudinary and Next.js.

______

##[Hyperbeam API](https://www.hyperbeam.dev/)
[![Hyperbeam API](https://wweb.dev/weekly/content/115/hyperbeam.jpg)](https://www.hyperbeam.dev/)
An API to add intuitive multi-control support to any website.

______

##[Tao of Node](https://alexkondov.com/tao-of-node/)
[![Tao of Node](https://wweb.dev/weekly/content/115/tao-node.jpg)](https://alexkondov.com/tao-of-node/)
A list with design, architecture & best practices for Node.js.

______

##[Ladle](https://www.ladle.dev/)
[![Ladle](https://wweb.dev/weekly/content/115/ladle.jpg)](https://www.ladle.dev/)
A library to develop and test your React stories faster.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Divide a String Into Groups of Size k
Tags: leetcode, dsa, theabbie
Published: 2022-06-13 23:00:48

A string `s` can be partitioned into groups of size `k` using the following procedure:

*   The first group consists of the first `k` characters of the string, the second group consists of the next `k` characters of the string, and so on. Each character can be a part of **exactly one** group.
*   For the last group, if the string **does not** have `k` characters remaining, a character `fill` is used to complete the group.

Note that the partition is done so that after removing the `fill` character from the last group (if it exists) and concatenating all the groups in order, the resultant string should be `s`.

Given the string `s`, the size of each group `k` and the character `fill`, return _a string array denoting the **composition of every group**_ `s` _has been divided into, using the above procedure_.

**Example 1:**

**Input:** s = "abcdefghi", k = 3, fill = "x"
**Output:** \["abc","def","ghi"\]
**Explanation:**
The first 3 characters "abc" form the first group.
The next 3 characters "def" form the second group.
The last 3 characters "ghi" form the third group.
Since all groups can be completely filled by characters from the string, we do not need to use fill.
Thus, the groups formed are "abc", "def", and "ghi".

**Example 2:**

**Input:** s = "abcdefghij", k = 3, fill = "x"
**Output:** \["abc","def","ghi","jxx"\]
**Explanation:**
Similar to the previous example, we are forming the first three groups "abc", "def", and "ghi".
For the last group, we can only use the character 'j' from the string. To complete this group, we add 'x' twice.
Thus, the 4 groups formed are "abc", "def", "ghi", and "jxx".

**Constraints:**

*   `1 <= s.length <= 100`
*   `s` consists of lowercase English letters only.
*   `1 <= k <= 100`
*   `fill` is a lowercase English letter.

**SOLUTION:**

    class Solution:
        def divideString(self, s: str, k: int, fill: str) -> List[str]:
            n = len(s)
            s += fill * (n % k if n % k == 0 else k - n % k)
            n = len(s)
            op = []
            for i in range(0, n, k):
                op.append(s[i:i+k])
            return op
Blog: Changes to Supported Modules
Published: 2022-07-01 16:16:28

---
title: Blog: Changes to Supported Modules
published: true
date: 2022-06-30 00:00:00 UTC
tags: 
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/posts/2022-06-30-changes-to-supported-modules/
---

We are continually reviewing our Supported modules list and understanding usage and value to users. We want to ensure that the CAT team is prioritizing support for the modules that matter the most to you.

We are taking the step to remove Puppet support from the below listed models, this change will happen effective 15 July 2022. While these will not be supported any longer by Puppet, the repos will stay active for use and community contributions, as such they are not going away.

- [Helm](https://forge.puppet.com/modules/puppetlabs/helm)
- [Rook](https://forge.puppet.com/modules/puppetlabs/rook)
- [Panos](https://forge.puppet.com/modules/puppetlabs/panos)
- [Cisco-IOS](https://forge.puppet.com/modules/puppetlabs/cisco_ios)
- [Tagmail](https://forge.puppet.com/modules/puppetlabs/tagmail)
- [Vsphere](https://forge.puppet.com/modules/puppetlabs/vsphere)
- [IBM Installation Manager](https://forge.puppet.com/modules/puppetlabs/ibm_installation_manager)
- [Websphere Application Server](https://forge.puppet.com/modules/puppetlabs/websphere_application_server)

## Why are we making these changes?

We are making this move in order for us to focus on providing more robust and quality content for our other existing modules and to also allow us to bring to our user base new and exciting content that can help you manage and run your environments.

## Reminder on reporting of Issues

In order to better triage and prioritize work surrounding each module, please remember to raise issues to the GitHub repositories. We have deactivated new submissions for the Modules Jira Project and have moved existing tickets into our workflow to be reviewed.

Catch us on [Slack](https://puppetcommunity.slack.com/archives/C11LCKKQ9) for any further info or questions and look out for some exciting updates in the future.
How do you write technical documentation?
Published: 2022-06-30 19:35:53

I joined dev.to to learn more about how others write and to join a growing community of writers. 

One problem I found is maintaining and updating technical documentation is a real pain, even for simple things like a readme. 

- Do you [GitHub Actions](https://github.com/actions)? 

- [MarkDoc Plugins](markdoc.io)? 

What tricks or tips have you found that make this easier? 

I am also considering starting a discord just for technical writers. Let me know if you'd be interested in joining.
Roadmap, Quick cheatsheet, Study materials for Front End Web Development
Tags: webdev, javascript, programming, react
Published: 2022-07-01 17:05:47

This is the roadmap I'm following to become a Frontend Web Developer in 2022 

You can do the same!

Basics of CS
   ↓
HTML  
   ↓
CSS    
   ↓
  
Tailwind / Bootstrap 
   ↓
JavaScript   
   ↓
  DOM
   ↓
Git (Version Control)
   ↓
React JS
   ↓
TypeScript 
   ↓
Next JS
   ↓
GraphQL

You can prefer udemy paid course for complete web development bootcamp by  Dr. Angela YU
https://www.udemy.com/share/1013gG/

# HTML :-
https://www.w3schools.com/html/

# CSS :-
https://www.w3schools.com/css/

# Javascript:-
DOC to learn - https://www.javascripttutorial.net/
karel ide - https://stanford.edu/~cpiech/karel/ide.html
** HTML DOM ** - //stanford.edu/~cpiech/karel/ide.html

# REACT 
https://youtu.be/nTeuhbP7wdE

--------------------------------------------
 
# Quick cheetsheet--

HTML - https://htmlcheatsheet.com/

CSS - https://cssreference.io/

GIT - https://gitsheet.wtf/

OPEN API- https://overapi.com/

DEV HINTS- https://overapi.com/ ( This is a modest collection of cheat sheets for ES6, SASS, etc.)

Cheatography is a collection of 5047 cheat sheets and quick references in 25 languages for everything from programming to 
travel! 
https://cheatography.com/#google_vignette

------------------------------------------------------------------
# TOOLS
Website to create wireframes - https://balsamiq.com/wireframes/?gclid=Cj0KCQjw2MWVBhCQARIsAIjbwoM7ELvU2Yb02JFDIY7PxMNuhqlKrAwtLRTreUSRcHlKsIG8Kh8DizQaAkhmEALw_wcB, https://sneakpeekit.com/

Website ideas https://www.awwwards.com/ , https://dribbble.com/tags/website

Help for UI-patterns = https://ui-patterns.com/patterns CSS Fount = https://www.cssfontstack.com/

for image use website https://www.pexels.com/ , https://unsplash.com/

make buttons https://css3buttongenerator.com/

make fabicon https://www.flaticon.com/

Add Icons - https://fontawesome.com/icons , 
https://icons.getbootstrap.com/#install

CSS Fount = https://www.cssfontstack.com/

Missing something? 👇
RoadRunner video tutorials
Tags: roadrunner, php, spiral, tutorial
Published: 2022-07-01 18:15:59

First fifteen videos about RoadRunner [have been committed](https://www.youtube.com/playlist?list=PLL6_RArGSORJ2OU4qn8rJmIwSGBIc8C_X).
Videos about Spiral Framework in progress.

Do you use the RoadRunner with your PHP Application?
Web Developer Tools Fundamentals
Tags: webdev, beginners, tutorial, tooling
Published: 2022-07-02 07:59:29


You know how to write code... now what?

A common challenge new developers run into is making the transition from writing code in a closed environment, such as a tutorial or course, to building a real project. Suddenly there's a whole new world of tools that are mentioned but not explained.

Perhaps you are trying to set up your first development project on your local and don't know where to start. Or maybe you're reading a tutorial or some documentation and it says "Prerequisite: npm/yarn, webpack, hadron collider, etc...". Ok, maybe not that last one, but you get the idea.

WTF is `npm` and how do I use it? How do I set up a local environment, deploy to a server, or share my code with other developers?

## Introduction

I am Joel, a self-taught web developer for over 10 years. As a self-taught developer, and a mentor for new developers, I have both experienced these challenges and hear these questions often from those who are learning to code.

I've noticed that there are a lot of code adjacent things that are not well covered, or just expected or assumed knowledge in a lot of documentation, tutorials, and courses.

## What to expect

I will be writing a series of articles in an attempt to break down these popular tools and processes in an understandable way.

I won't be going into tedious depth, this is intended for beginners to get a grasp on the basics. If you'd like to learn something more in-depth let me know and I'll do what I can in a separate article.

## Subjects covered

Below are the subjects I intend to cover. **Note** - some subjects will be specific to a particular ecosystem (e.g. `npm` for JavaScript projects) while others will be more widely applicable (e.g. `git` for any code project).

* `git` (and the difference between `git` and GitHub)
* `npm`/`yarn`
* CI/CD
* webpack + babel
* Browser vs Client side code
* HTTP calls (APIs, database queries, etc...)
* Servers / hosting
* CSS preprocessors
* JavaScript modules (ESM, CJS) and import/export

<br />

If there are any subjects you'd like me to cover please post a comment below to let me know!

## Follow along

I'll be writing and posting these over time and including them in a series so that this article, and all articles in the series, will update with links to each new article once published.

Subscribe to my posts here if you'd like to be notified when a new article drops. And let me know your thoughts!

See you soon...
My first 2 months working as a programmer
Published: 2022-07-03 09:29:37

This won’t be a long and tiring post that are known to exist throughout the internet, but more of a summary of what I have learned in the first two months of my developer journey.

Before May 1st, 2022 I have never worked as a programmer, having learned the craft for 1 year I was able to find a job. Right upfront I want to mention that I do not know how easy or how hard it is to find one without a degree or working experience, all I can say is that I have found one (and possibly more, because many of my interviews went well). But this is for another story. Here I only want to depict the first two months.

What I can feel right away is that my ability to read code has improved dramatically. I can look at a thinly written code of a two thirds of a page length and instantly (a few seconds alright) know what it does. Because the code bases one works with when employed are much much bigger than what I was used to in my personal projects, and the tasks always require you to read and change that code base, it was from day one my fate to having to read code other people wrote and I can tell you, it’s not easy. It’s not easy reading someone else’s code a year after you have started out, but two months into work I can read anything just fine!

Another noticeable improvement is code quality. I used to pay no attention to duplicating small chunks of code. user.type === “registeredUser” would previously be used over and over again instead of saving it to a variable and using that variable instead, hence avoiding typos in one of the instances, reducing bugs and also the computer’s calculating time. In fact, for reasons of readability I hated doing it. Abstracting code into functions or saving it into variables decreases readability of code and readability was more important for me as a beginner. Comments by other developers with more experience were of great help to further improving my code. This is a very unique experience that you cannot get by simply doing your online courses.

These two things, the ability to read and navigate through code quickly, and the code quality is what improved dramatically.

As a downside, albeit how small and insignificant when compared to the upside of actually working, is that learning new things has now become difficult, as the time for it is just not there. So, if you’re not yet working, use all the time you have for learning new things. If you are learning, say, frontend, then learn everything you can, the whole eco system of your chosen path. On the website roadmap.sh you can see the eco system of your particular path. The website was shown to me by my employer and to my surprise I did most of the things on there.

For those interested, I can write out the entire path and all the tutorials I have taken to becoming an employable programmer in 2022.
1095. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-07-03 17:32:59

```
/**
 * // This is the MountainArray's API interface.
 * // You should not implement it, or speculate about its implementation
 * class MountainArray {
 *  public:
 *   int get(int index);
 *   int length();
 * };
 */

class Solution {
 public:
  int findInMountainArray(int target, MountainArray& mountainArr) {
    const int n = mountainArr.length();
    const int peakIndex = peakIndexInMountainArray(mountainArr, 0, n - 1);

    const int leftIndex = searchLeft(mountainArr, target, 0, peakIndex);
    if (mountainArr.get(leftIndex) == target)
      return leftIndex;

    const int rightIndex =
        searchRight(mountainArr, target, peakIndex + 1, n - 1);
    if (mountainArr.get(rightIndex) == target)
      return rightIndex;

    return -1;
  }

 private:
  // 852. Peak Index in a Mountain Array
  int peakIndexInMountainArray(MountainArray& A, int l, int r) {
    while (l < r) {
      const int m = (l + r) / 2;
      if (A.get(m) < A.get(m + 1))
        l = m + 1;
      else
        r = m;
    }
    return l;
  }

  int searchLeft(MountainArray& A, int target, int l, int r) {
    while (l < r) {
      const int m = (l + r) / 2;
      if (A.get(m) < target)
        l = m + 1;
      else
        r = m;
    }
    return l;
  }

  int searchRight(MountainArray& A, int target, int l, int r) {
    while (l < r) {
      const int m = (l + r) / 2;
      if (A.get(m) > target)
        l = m + 1;
      else
        r = m;
    }
    return l;
  }
};

```
Functions in JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2022-07-05 11:35:16

_method-1_
let name2="pushan"; 
function greet(name2 )
{
    console.log(`This is my name ->${name2}`);
}
greet(name2);

_method-2_
function greet2(name2,rollno)
{
    console.log(`This is my name ->${name2} and rollno ->${rollno}`);
}
greet2(name2,114);

_method-3_
function greet3(name2,rollno="114")
{
    console.log(`This is my name ->${name2} and rollno ->${rollno}`);
}
greet3(name2);
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crxcf55w8c21twki4ka7.png)
 




_with return value_
console.log("+++++++++++++++++++++++++++++++++++++++++");
let no=1;
const value =function(no)
{
    let sum=0;
    for(let i=1;i<10;i++)
    {
        sum+=no*2;
    }
    return sum;
}

console.log(value(no));
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2iqikkxmskts97fde7l.png)
 



_returning from objects_
console.log("*****************************");
let obj2={
    name3 :"pushanVerma",
    rollno: 114,
    techStack: function()
    {
        return {
              java:"good",
              mysql: "moderate",
              javaScript:"Normal",    
        }
    }
}

console.log(obj2.techStack());
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pvdbaesekcsw0navdoi.png)
Hoisting and Temporal Dead Zone
Tags: webdev, javascript, beginners, programming
Published: 2022-07-05 11:38:44

**Hoisting** 

console.log('varname',varName);
var varName;
console.log('varname',varName);
varName ="captain america";
console.log('varname',varName);

fn();
function fn()
{
    console.log("hello from fn");
}
fn();

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hbs9sdmpgjifp29ilmo.png)


**Temporal Zone** 

//temporal dead zone is a zone where the variable is in accesible 


**with var** 
console.log(a);
var a =2;
**op-undefined**


**with let** 
console.log(b);
let b=3;  
**op -(Error ) Missing initializer in const declaration**



**with const** 
console.log(c);
const c=4;    
**op -(Error ) Missing initializer in const declaration**
O que são testes e como funcionam?
Tags: javascript, tdd, beginners, tutorial
Published: 2022-07-05 17:41:09

### O que é um teste?

Um teste é um trecho de código, que quando executado chama a funcionalidade a qual quer testar e submete ela a um cenário com parâmetros e retornos totalmente controlados por você. Assim você consegue entender como o seu código se comporta em diferentes cenários e como trata-lós, dessa forma trazendo uma qualidade e segurança muito maior para o seu código.

### Exemplo prático

Vamos considerar a função abaixo. Uma função que recebe dois números e retorna a soma entre eles.

```js
// index.js
function soma(n1, n2) {
   return n1 + n2;
}
```

**Abaixo um exemplo de um arquivo de teste para a função acima**

```js
//index.test.js

const soma = require('./index.js');

describe('Function soma', () =>; {
   it('Quando eu passar 5 e 5 a função deve me retornar 10', () =>; {
      const resultado = soma(5, 5);
      expect(resultado).toBe(10);
   });

   it('Quando eu passar 2 números negativos o resultado deve ser um número negativo', () =>; {
      const resultado = soma(-10, -5);
      expect(resultado).toBe(-15);
   });
});
```

Podemos ver que a primeira coisa a ser feita é importar a função que iremos testar. Em seguida nós temos uma função chamada 'describe'. Vamos entender o que essa função faz, primeiramente ela recebe 2 parâmetros, uma string e uma função de callback. Essa string é usada para destacar um conjunto de testes a qual ela se refere, nesse caso a função de soma que foi importada. O callback serve para declararmos os casos de teste que são representados por cada 'it' no código. A função 'it' funciona da mesma forma que a função 'describe' ela recebe uma string e uma função de callback como parâmetro. A string serve para sabermos qual é o caso de teste em questão e a função de callback para podermos montar o nosso teste.

Vamos falar sobre o primeiro caso de teste. Nele eu passo o número 5 nos 2 paramêtros da função e pego o resultado na constante resultado. E a mágia dos testes acontece na linha seguinte onde eu faço:

```js
expect(resultado).toBe(10);
```

O que isso significa? Que eu espero(expect()) que a constante resultado seja igual a 10(toBe()). E caso esteja certo o teste irá passar. caso contrário irá aparecer um erro como na imagem abaixo:

![Resultado do teste](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2krwdn6bkxs27gepuoo.png)

E com o feedback desse teste no terminal, nós iremos entender qual será o próximo passo no desenvolvimento do código. 

[Link para o stack blitz com exemplo](https://stackblitz.com/edit/json-server-nrvzfr?file=index.js)

A biblioteca usada para rodar os testes é o jest. Para executar os testes basta rodar no terminal o comando `jest` ou `npm test`

Muito obrigado por ler 🙃

[Links úteis](https://bento.me/cmsdev)
1671. Leetcode Solution in CPP
Tags: cpp
Published: 2022-07-06 14:44:05

```
class Solution {
 public:
  int minimumMountainRemovals(vector<int>& nums) {
    vector<int> l = lengthOfLIS(nums);
    vector<int> r = reversed(lengthOfLIS(reversed(nums)));
    int maxMountainSeq = 0;

    for (int i = 0; i < nums.size(); ++i)
      if (l[i] > 1 && r[i] > 1)
        maxMountainSeq = max(maxMountainSeq, l[i] + r[i] - 1);

    return nums.size() - maxMountainSeq;
  }

 private:
  vector<int> lengthOfLIS(vector<int> nums) {
    // tail[i] := the minimum tail of all increasing subseqs having length i + 1
    // it's easy to see that tail must be an increasing array
    vector<int> tail;

    // dp[i] := length of LIS ending at nums[i]
    vector<int> dp(nums.size());

    for (int i = 0; i < nums.size(); ++i) {
      const int num = nums[i];
      if (tail.empty() || num > tail.back()) {
        tail.push_back(num);
      } else {
        int l = 0;
        int r = tail.size();
        // find the first index l in tail s.t. tail[l] >= num
        while (l < r) {
          const int m = (l + r) / 2;
          if (tail[m] >= num)
            r = m;
          else
            l = m + 1;
        }
        tail[l] = num;
      }
      dp[i] = tail.size();
    }

    return dp;
  }

  vector<int> reversed(const vector<int>& nums) {
    return {rbegin(nums), rend(nums)};
  }
};

```
#leetcode
#challenge
here is the link for the problem:
https://leetcode.com/problems/minimum-number-of-removals-to-make-mountain-array/
394. Leetcode Solution in CPP
Tags: cpp
Published: 2022-07-07 05:04:43

```
class Solution {
 public:
  string decodeString(string s) {
    stack<pair<string, int>> stack;  // (prevStr, repeatCount)
    string currStr;
    int currNum = 0;

    for (const char c : s)
      if (isdigit(c)) {
        currNum = currNum * 10 + (c - '0');
      } else {
        if (c == '[') {
          stack.emplace(currStr, currNum);
          currStr = "";
          currNum = 0;
        } else if (c == ']') {
          const auto [prevStr, n] = stack.top();
          stack.pop();
          currStr = prevStr + getRepeatedStr(currStr, n);
        } else {
          currStr += c;
        }
      }

    return currStr;
  }

 private:
  // s * n times
  string getRepeatedStr(const string& s, int n) {
    string repeat;
    while (n--)
      repeat += s;
    return repeat;
  }
};

```
#leetcode
#challenge
here is the link for the problem:
https://leetcode.com/problems/decode-string/