teleren/devto huggingface dataset:
Progress for release 0.4
Published: 2021-12-13 10:32:02

# Telescope's issue
[issue-2550](https://github.com/Seneca-CDOT/telescope/issues/2550)

Started by running into an issue related to fetching from mainstream. Somehow there was an unwanted bug related to the packages. I tried to remove the <code>node_modules</code> folder and re-installed all the packages. Unfortunately, I did not go well, so I decided to re-fork the repo and start everything again. By following the instruction from Telescope's Github, I managed to run the site locally, but it took me nearly an hour to do so. The issue was really simple, I just had to modify all properties named <code>justify</code> to <code>justifyContent</code>. What I did was going to the search option of Visual Studio Code and search all the names of <code>justify</code> and changed them to <code>justifyContent</code>. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06vrbkm1n9nj6rkyabzf.png)
(This was after the change, but this picture will help you to understand how searching in Visual Studio Code works) 
I submitted an [PR](https://github.com/Seneca-CDOT/telescope/pull/2552) after that and it got accepted. 

# Codepeak's issue
[LeaderboardDesign](https://github.com/VishalIITP/CodepeakSuperDuper/issues/13)

This issue was challenging since it was more related to designing. I will leave it for my final week. But for now, I will take a look at some templates to get inspired. The hardest part is that the design of the leaderboard should match the design of the site in general, this might include the color, alignment, etc. The owners of the project added me to their Discord so I will send them the design first before touching the coding part.
# Final thought
So that is it for the second week. I cannot wait to see what issues I will have and what interesting things I will face next week.
🔲How to add buttons in a Microsoft or SharePoint List with list formatting [NO CODE SOLUTION]
Tags: microsoftlists, sharepoint, microsoft365, giulianodeluca
Published: 2021-12-13 10:27:41

---
title: 🔲How to add buttons in a Microsoft or SharePoint List with list formatting [NO CODE SOLUTION]
published: true
description: how to add buttons in a Microsoft or SharePoint List with list formatting without writing any line of code
tags: MicrosoftLists, SharePoint, Microsoft365, GiulianoDeLuca
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhpd0wrcssp9ll17u0u6.png
---

🎬NEW VIDEO N. 150🎬 
In this video tutorial, you’ll learn how to add buttons in a Microsoft or SharePoint List with list formatting without writing any line of code. 
I’ll walk you through every step using list formatting and the new property setValue which allows you to enhance other columns.

Preview:
![🔲How to add buttons in a Microsoft or SharePoint List with list formatting [NO CODE SOLUTION]](https://raw.githubusercontent.com/giuleon/ColumnFormattingButtons/main/preview.png)

🔗Check out my demo:
https://github.com/giuleon/ColumnFormattingButtons

{% youtube JmZKkfy3Tx8%}
📽️How to create a video library view with List Formatting in SharePoint
Tags: sharepoint, microsoft365, microsoftlists, giulianodeluca
Published: 2021-12-13 10:21:36

---
title: 📽️How to create a video library view with List Formatting in SharePoint
published: true
description: This sample demonstrates how to set up a video library in SharePoint / Microsoft Lists
tags: SharePoint, Microsoft365, MicrosoftLists, GiulianoDeLuca
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8xhgkw6mff65dgdstxn.png
---

🎬NEW VIDEO N. 152🎬 
In this video tutorial, you’ll learn how to create a video library view with List Formatting in SharePoint. 
I’ll walk you through every step starting from scratch and applying a very nice solution using list view formatting, in order to have a video library view.

Preview:
![📽️How to create a video library view with List Formatting in SharePoint](https://raw.githubusercontent.com/giuleon/ListViewFormattingVideoLibrary/main/preview.png)

🔗Check out my demo:
https://github.com/giuleon/ListViewFormattingVideoLibrary

{% youtube pP8DcE-V8uA%}
View a python function's history over-time with Git & FZF
Tags: python, git, github, todayilearned
Published: 2021-12-13 10:14:17

I am kinda hooked up on modifying my git terminal workflow and integrate FZF wherever I can, this is such an example script to see changes in a python function overtime in your git history. And yes, its interesting (& stupid) 

```bash
#!/usr/bin/env bash

# FZF Wrapper over git to interactively search code changes inside functions

readarray -t choices < <(git ls-files | fzf \
  --prompt="Choose File: " \
  --height 40% --reverse \
)

printf "%s\n" "$(grep -o -P '(?<=def ).*?(?=\()' $choices)" | fzf \
--ansi --preview "echo {} | xargs -I{} git log --color -L :{}:$choices" \
--prompt="Choose function/method: " \
--bind 'j:down,k:up,ctrl-j:preview-down,ctrl-k:preview-up,ctrl-space:toggle-preview' --preview-window right:60% \

```

The actual trick is finding all python functions and methods names in a given file using `grep`

```bash
$ grep -o -P '(?<=def ).*?(?=\()' rich/columns.py
__init__
add_renderable
__rich_console__
iter_renderables
```

Next we plug the function name with filename in this `git` command

```bash
git log -L :funciton_name:relative_file_path
```

Read more about [git log searching](https://git-scm.com/book/en/v2/Git-Tools-Searching)

Below is a screencast demoing the same for [rich](https://github.com/willmcgugan/rich) package

![git-search-demo-gif](https://user-images.githubusercontent.com/34342551/146226062-b87d98c6-f5e0-465b-8c8d-98ccf6bce629.gif)

If you are still interested, [here is the script](https://github.com/Bhupesh-V/.Varshney/blob/master/scripts/git/git-search) to hack around.

> I wish this was scalable to all the programming languages but currently I don't have any clue on how to do this
If you want to contribute help me by adding `grep` patterns to do the same search for you favourite programming language. Thanks
Small ParseJS update; makes code inside of `parse_string` easier to read.
Tags: javascript, webdev, watercooler
Published: 2021-12-13 10:13:54

[You can see the commit on GitHub here.](https://github.com/CalinZBaenen/ParseJS/commit/6ce94d9579c8307e78d27daed633f798321ad3f5)
Today I made a small change to the code of `parse_string` to make it easier to follow along with.

Here's the change:
![Image of the commit I made to GitHub.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyh10dty16vt0of79c3w.png)
CSS Hover Effects
Tags: css, webdev, beginners, javascript
Published: 2021-12-13 10:12:33

Hi, fellow friends, I have creates some button hover effect using CSS, in rarest case JavaScript is also used. All these are experimental, accessibility is not consider as these are not developed keeping production scenario in mind. I just want to show that we can use CSS to create different animations. I would like to have your feedback to these effects, both positive and negative comments are welcomed. 

Please use your creative minds to make more beautiful animations using CSS so that it can be inspirations for others to make the web more beautiful. Hope you will like these. All the animations are included in this [codepen collection](https://codepen.io/collection/XReeMm). A few of the effects are attached below. Happy coding.

{% codepen https://codepen.io/kiran-r-raj/pen/PoJGOWg %}
{% codepen https://codepen.io/kiran-r-raj/pen/ExZdKEL %}
{% codepen https://codepen.io/kiran-r-raj/pen/vYxYKQK %}
{% codepen https://codepen.io/kiran-r-raj/pen/OKLJGy %}
{% codepen https://codepen.io/kiran-r-raj/pen/qeWjdP %}

{% link https://dev.to/kiranrajvjd/hover-effects-using-css-for-beginners-4a7p %}
{% link https://dev.to/kiranrajvjd/simple-pre-loaders-using-css-wave-style-9gp %}
Setting up an Angular Project
Tags: angular, beginners, programming, tutorial
Published: 2021-12-13 10:08:47

Today we will be learning how to setup/ install angular in our machine, so that we can create angular projects and finally step into learning angular.

**Step 1** <u>Install NodeJS active LTS version </u>
We need NODEJS installed in our system. Before installing NodeJS you might be in a confusion whether already NodeJS is preinstalled or not. For that run the command `node -v` in your command prompt. If you get an output like below means you already have NodeJS installed.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23aieuqft9kqq9q87u2e.PNG)
The version can defer depending on which version you installed earlier.
If you don't see any output then lets install NodeJS in our system. Visit the page [install-node
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emohp407wv5yp9getn5c.PNG)](https://nodejs.org/en/download/)
Depending on your OS please install the respective LTS version.

Once you install NodeJS, the node package manager (npm) will be automatically installed. To cross check that, go to your command prompt and type in the command `npm -v` and you should get an output like below - 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/479d9zoeiv06wwc3p3hl.PNG)

**Step 2** <u>Install Angular CLI</u>
Open a command prompt and type in the command 
`npm install -g @angular/cli` and hit enter. It might take some time and allow it complete. Once the installation is complete lets verify if it is correctly installed or not by typing in the command in the command prompt - `ng version`
You should get an output like below -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qct53vfoxnkc48dj7kzb.PNG)
and bingo you have successfully installed Angular in your system.

**Bonus Section**
Create a project in <u>Angular</u>

Open a command prompt in your workspace and type in the command 
`ng new <projectName>` 
eg. `ng new MyFirstProject`
You will be prompted with few questions. You can select the default value by hitting enter and let it get installed (might take some time). 
Once installed you will see a folder with the same project name you provided got created. Navigate inside the folder and open a command prompt.
Type in the command 
`npm start`. 
The project will start building and once done the project will open by default in localhost:4200
Open your fav browser and type in localhost:4200 and you will see your application is up.

Hope it will be a great resource to kick start your journey in Angular.

Cheers!!!
_Happy Coding_
Why Your Website Must Have an SEO Strategy for 2022
Tags: seo, tutorial, programming, webdev
Published: 2021-12-13 09:55:15

If you're running a small business, you know that it's essential to be found online. And if you want to be found online, you need to rank high in Google search results. But how can you outrank your competitors and claim the top spot on Google?

There are a number of effective SEO strategies that you can use to outrank your competitors on search engines. In this article, we'll explore that SEO techniques that will help you beat your competition and take home top SEO ranking.

Read more at [hackernoon.com](https://hackernoon.com/why-your-website-must-have-an-seo-strategy-for-2022)
Create a chat app with socket.io and node.js
Tags: webdev, javascript, programming, node
Published: 2021-12-13 09:46:31

Hello guys,
In this article we are going to create a group chat app that can also be private. 

**Socket.io**

Socket.io is the main package that we are going to use for our web app.
Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server.

It consists of:


- a Node.js server
- a Javascript client library for the browser (which can be also run from Node.js)

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

So lets create a server for our web app:

Initialize a new node.js project:
`npm init`

Install express:
`npm install --save express`

Install socket.io:
`npm install --save socket.io`

Install ejs for server side rendering:
`npm install --save ejs`

The server code:

{% gist https://gist.github.com/EneasLari/e8b726cbb61340401bfe1cb78eb210a4 file=server.js %}

We use express framework for server, also in order to render a html page we use ejs.

The server handles the messaging between clients. It is the middleware for the message delivering.

**The client code:**
 
 {% gist https://gist.github.com/EneasLari/e8b726cbb61340401bfe1cb78eb210a4 file=main.js %}

Lets explain the client code

First we define the room name. Here the room name is set to test for simplicity reasons but it can be dynamic. The room name is the name that will need every client in order to join the chat.

- "created" event, will be received from the first user that will join the room and this client will flagged as the initiator of the room.

- "create or join" is the event that every user that joins the room will call.

- "join" event will received from all clients when a new one enters the room and will inform them about his information (in our situation only his name)
Also in this event the initator will send an event only for he new user that joined the room to update his list of other clients in the room.

- "beforeyou" event will received only by the last user that will join the room to update his list of the users already existing in the room.

- "message" event is the main event that every user will receive after the connection in the room is established

**The view:**

 {% gist https://gist.github.com/EneasLari/e8b726cbb61340401bfe1cb78eb210a4 file=index.ejs %}

The full code on github with more detailed comments:
[github](https://github.com/tzagiollari/chat_app_with_socket.io_and_node.js)
prototype and constructor
Tags: javascript, webdev
Published: 2021-12-13 09:22:09

First, let's take a look of some concepts in javascript.
Object - non-primitive data type that holds multiple values in terms of properties and methods.

```javascript
function Person(){
  this.name = 'parent';
  this.age = 1;
  sayHi: function() {
      console.log('sayHi')
      }
}
```



```javascript
console.log(Person)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d48r5zv7syonz0sk0tas.png)

```javascript
console.log(Person.prototype)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfd94tsu3mmtn6notd0g.png)

You can use prototype property to access constructor function and _proto_ property.

prototype - every function and object has prototype property by default
constructor - constructor function is same as other language which is used for creating and instantiating object. There are two conventions:

- name is first letter capitalized
- use with new operator as default

The relationship between prototype and constructor is:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq9kunr9psyyy9kl2uxt.png) 
 

When creating new instance

```javascript
const p1 = new Person();
```

```javascript
console.log(p1)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yw8h1enom80tady7n2v.png)
The relationship between Object Person and instance is:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8crl1g9v05ak8ikd8h6.png)
 
By understanding difference between prototype and _proto_, and constructor, let's deep into some of the type checking methods that we use and how prototype helps on it.

- constructor

From above relationship diagram, you will notice that constructor actually refers back to object on the prototype chain that prototype is the property. It can be used to find the constructor function when creating instance.

```javascript
const arr = [];
```

```javascript
console.log(arr.constructor)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh8wbxtwqypdhcwfis3m.png)

- instanceof

```javascript
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) // true
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juuooljulud8gjjs6upq.png)
From chaining you can see instanceof uses prototype chaining to go back all the way to find presence of contructor.prototype, therefore it is instance of both Array and Object.

Hope this article can help you understand prototype in javascript.
All about GitHub Campus Experts 🚩
Tags: github
Published: 2021-12-13 09:20:38


I've got quite a few DM's on LinkedIn and Twitter regarding how and why I became a GitHub Campus Expert. So here's a short blog answering those questions.

## What is the eligibility?
You should have [GitHub Student Developer Pack](https://education.github.com/pack), be 18+ and enrolled in an educational institution with at least a year before you graduate (which means you can apply in your pre-final year at max and anytime before that).

## When do applications open?
Applications open twice a year, in February and in August and you get a month to submit your initial application. You can apply and get updates here: https://apply.githubcampus.expert/

## What is initial application about?
The initial application consists of 2-3 essay type questions regarding your community and how you think GitHub can be helpful.

## What are the next steps?
After the GitHub teams evaluates your initial application, you might be asked to upload a video resume for them to know about you as a person and what motivates you.
If the team finds you fit after both parts of the application, you get to go through the GitHub Experts Training.

## What is GitHub Experts Training?
It's a series of modules on topics like public speaking, technical writing, and software development to make you develop the necessary skills to be a Campus Expert and conduct events smoothly.

## What are the benefits?
You and your community get global support and exposure. GitHub and fellow Campus Experts will support your community events by providing funds, swags and prizes. You get to be a part of an awesome community and network and off course the lovely swag kit.

| My Swag Kit | [My Profile Page](https://githubcampus.expert/khushi200701/) on website  |
| ------ | --------------------------- |
| ![kit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csa8mkhqzm5x4ph37k7q.png) | ![profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7ih1qlpftmbhxvvyt76.png) |
JWT validation with JWKs in Java
Tags: jwks, jwt, java
Published: 2022-11-01 06:57:13

---
title: JWT validation with JWKs in Java
published: true
date: 2021-12-13 09:11:23 UTC
tags: JWKs, JWT, JAVA
canonical_url: https://mojoauth.com/blog/jwt-validation-with-jwks-java/
---

One of the benefits of JSON Web Token (JWT) is that you can validate a token using an easy cryptographic operation. JWT tokens are encoded and signed JSON. The main advantage of allowing JWKS endpoint design is its ability to handle key rotation by external identity providers. Configuring this endpoint would enable you to programmatically find JSON web keys and allow the third-party identity providers to publish new keys without having the overhead of notifying every client application.

[Read On](https://mojoauth.com/blog/jwt-validation-with-jwks-java/)
Laravel Password Validation - Arr::whereNotNull() method
Tags: php, laravel, programming, beginners
Published: 2021-12-13 08:52:42

Let's get started quickly with Password Validation here to make Password more powerful
```php
$request->validate([
 'password' => ['required','confirmed', Rules\Password::defaults()->mixedCase()->min(12)],
])
```
You can enforce specific rules when validating user-supplied passwords by using the  method. It includes options for requiring letters, numbers, symbols, and more :-
![Password::defaults](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n0mv2m8xxqjzua7zxhx.jpg)

Arr::whereNotNull() method which filters out null values from an array:
```php
Arr::whereNotNull([null, 0, false, '', null, []]);
// returns [0, false, '', []]
```
Source :- https://www.youtube.com/watch?v=_TlQPp-dG1k
Source :- https://laravel-news.com/laravel-8-75-0
I hope you enjoyed the code.
How-to not clear the logcat on a crash
Tags: android, androidstudio, howto, tipsandtricks
Published: 2021-12-13 08:51:24

It is already annoying that your app crashes. But even more so when you can’t find the crash in the logcat due to the app restarting on either the emulator or a physical device.

Luckily, there is a very simple and quick solution for this, it stops Android Studio from clearing the logcat which means you can stop trying to reproduce it multiple times or are forced to use the command line. You can just start fixing the actual error instead.

---

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

It only consists of two steps, first open the logcat window in your Android Studio if it’s not already there. On the top right you see the filters dropdown. Open this and select _Edit Filter Configuration_.

In the _Create New Logcat Filter_ window fill in the _Package Name_ of your application. In my case it is `eu.walkthecity`. You can fill in anything you want in _Filter Name_ but I would recommend to put the name of your application there so you can easily find it back if you’re working on multiple apps.

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

The _Log Level_ can be set to anything you want as crashes are always reported as _Error_. I used _Verbose_ so I can just leave this filter on when looking for my debug messages as well.

_Voila_, you’re done. Simple right? Now back to more important stuff and get those amazing apps out there!
About Vybe
Published: 2021-12-13 08:49:40

We created Vibe with one main purpose, which is to manage your financial account.

We believe that a lot or people have actually ended up broke and lack financial discipline as a result of their mis-management of funds.

We Vybe, we can achieve finance management and perform up to expected with our easy to use platform and analytics.

With the help of our Machine learning engineer, we have been able to build and train model that helps to achieve this goal of financial litracy. We have built and train this model on data to be able to compare and give a feed back on each users financal performance.

We Used the Mono Connect built by Mono Technologies to link several bank accounts to the app(Vybe). Not to worry, your details are well secured and encrypted.

##How to use
Vybe is very simple to use. Following the steps and the links below.

1. Create an account or Login to an existing account. 
2. Link your bank account with Vybe with the little arrow displayed at the top right coner of your dashboard

Done!!!!!!!!!!

Now, you can start using Vybe and getting tips on how to achieve your budgets and financial goals.

Note: Vybe's feature are way more than the listed here.

Chech Vybe out here

[Vybe](https://vybee.herokuapp.com/login)

##You path to financial freedom