teleren/devto huggingface dataset:
My Let's Grow More Internship Journey!
Published: 2021-08-25 16:53:40

August 2021, marked the beginning of my internship journey with Let's Grow More. I still remember around one and a half month ago, I received an email on my inbox which had my offer letter ,thrilled to test and showcase my skills, I waited till the tasks arrived.

Not much later our orientation program was conducted, we got to know what we had to do and that this was not going to be a simple I give you task, You submit the task and take the certificate internship, there was a lot more to add, the following JavaScript and many more technical sessions, were the much needed podcasts for many newbies!

My first task comprised of a static HTML, CSS and JavaScript webpage, it was pretty easy to complete this task within just a few hours, but what was important was, it was for the first time, I built an all feature website, starting from carousels, cards, newsletters, contact section, and what not....It was as if I was putting all my necessary and learnt skills on a single webpage. This task is something I wouldn't miss mentioning on my resume because it show cases all my fundamental web dev skills.

Coming to task-2,this was somewhat interesting because it had to do with API and React app, me being a newbie to APIs approximately zero knowledge about APIs, it was fun exploring the world of APIs within a short time frame, to complete this task.

Task three is that task which grabs my attention towards Let's Grow More, I was thinking to learn PHP and this Task provided me opportunity to cover most of the aspects of PHP.

What I peculiarly liked about this entire internship was, the structure, it was picture perfectly designed from beginner, to intermediate, and then the advanced level.

Well if any of you ever intend to go through my video submission or code snippets refer here:
1.[Task-1 Code snippet](https://github.com/VAISHNAVI0715/LGMVIP-Web-Devlopment-Task1)
2.[Task-2 Code snippet](https://github.com/VAISHNAVI0715/LGMVIP-WEB-DEVLOPMENT-TASK-2)
2.[Task-3 Code snippet](https://github.com/VAISHNAVI0715/LGMVIP-WEB-DEVELOPMENT-TASK-3)
4.[Task-1 video link](https://www.linkedin.com/feed/update/urn:li:activity:6836224958780235776/)
5.[Task-2 video link](https://www.linkedin.com/feed/update/urn:li:activity:6836239982831693824/)
6.[Task-3 video link](https://www.linkedin.com/feed/update/urn:li:activity:6836246299914899456/)


And if you wish to onboard or get to know more about this internship [head out here](https://letsgrowmore.in/) or to [this]( letsgrowmore.in/vip).
Custom CSS scrollbar
Tags: css
Published: 2021-08-25 16:39:24

Unfortunately, we have to style scrollbars depending on browser support.

[CSS Scrollbars](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars) are supported by Firefox and [::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) by Chromium based (Chrome, Edge) and Safari. 

Eventually all modern browsers will transition to CSS Scrollbars specification. In the meantime, we have to style both features to achieve the same look across all browsers. Thanks to the CSS goddess, it’s relatively easy to achieve. Picking the right colors and don't forgetting about the `border` property, which can be applied to `::-webkit-scrollbar-thumb`, is the hardest part. 

Here is an example, leveraging [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), with light/dark themes support.  


```css
/* ~/scrollbar.css */

/* Default (light) theme */
:root {
  --page-background: white;

  --scrollbar-track: transparent;
  --scrollbar-thumb: lightsalmon;
  --scrollbar-thumb-hover: lightcoral;

  --scrollbar-width: 12px;
}
/* Default (light) theme */

/* Dark theme */
html.dark {
  --page-background: black;

  --scrollbar-thumb: salmon;
  --scrollbar-thumb-hover: chocolate;
}
/* Dark theme */

/* Firefox */
* {
  scrollbar-width: thick; /* none | auto  */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Firefox */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: var(--scrollbar-width); /* vertical scrollbar */
  height: var(--scrollbar-width); /* horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-width);
  border: calc(var(--scrollbar-width) / 4) solid var(--page-background);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
/* Chrome, Edge, Safari */
```
Routing Information in Front-End Angluar
Tags: programming, typescript, angular
Published: 2021-08-25 16:30:31

I've learned that the best way to route information is to use what is already given to you. 

The first thing is the documentation. In my case to solve my routing and navigation problem I used [Angular.io](https://angular.io)

My problem is I needed to figure out a way to route a button click that would engage a method in the component where the button is. The method would need to provide a route to another component and along with it some data from the first component. 

1. I used the `(click)=methodInComponent()` to do this

2. In the component.ts I first needed a way to store the data that I wanted to pass to the other component. I ended up using a method for that as well. I will call the method in the routing method to pass the data using router. 
I created a void methodInComponent() and used the following for the route `this.router.navigate(['theOtherComponentPath', theVariableFromTheOtherMethodToPassData], {});`
with `private router: Router` being defined in the constructor. 

3. In the otherComponent.ts I needed a way to access the data that was passed to it. Angular thankfully provides a way to do this via 'ActivatedRoute'. I assigned the data to a variable and used snapshot and paramMap methods to get the data. The code in question looks like this `variableNameForData = userId = this.route.snapshot.paramMap.get("id");` id is data that was passed from the other component.

4. I am now working on using the Java backend of the app to get the respective data and display it on the other component. So far it looks like me using the httpClient to 'get' the information that I need. It returns an '[object Object]'. I will try Observable to display the actual data. 

5. I interpolated the variables in the HTML template as `{{dataFromComponent}}`

Let me know if I'm missing something, but this has been quite a learning adventure because I chose to 

Struggle
Try things out
Read the documentation
Implement it
What sites do you use to share your coding portfolio?
Tags: discuss, career, tools, portfolio
Published: 2021-08-25 16:12:18

---
title: What sites do you use to share your coding portfolio?
published: true
description: I’m looking for a way for my students to share their work, and instead of just posting to github they’d like a pretty visual way to post their dev portfolio.
tags: discuss, career, tools, portfolio
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xej7mrrocpt7fkn9ksf.jpeg
---

*Cover image by Felix Winkelnkemper, CC BY-SA 4.0*

I’m looking for a way for my students to share their work, and instead of just posting to github they’d like a pretty visual way to post their dev portfolio.

Github's a classic but I often want to display multiple projects in a slick overview, so I'm not sure its perfect for that. If there is a way to do this with Github please let me know in the comments.

A self-hosted site is nice but I'm not sure I want to tell my students to spend even the minimal amount this hosting costs...

Help me out in the comments below!
CSS Display Properties That Saves My Designs Daily
Published: 2021-08-25 16:06:58

It’s recommended that any web developer should possess a strong foundation of the basics i.e. JavaScript, HTML, CSS, before moving to the framework. Dig deep to acquire more knowledge. In CSS, make sure you know the display, colors, margins, borders, backgrounds, linear-gradient, etc. Among the most popular CSS frameworks are tailwind CSS, bootstrap, and material UI.

The display is one of the daily used CSS functionalities. It helps to arrange items on a page in a recommended manner. Whether you want them to be vertical or horizontal, then the display has all the properties needed. Most people tend to degrade the power of CSS, but a single display property can mess up your entire design. 

Display Flex

Flexbox is manor containers where you might want your product or content to go. If you have many items, arranging them vertically might take great space. Display flex is used to arrange your content in a horizontal way. Your content-items will align themselves in a single row from the left towards the right hand.

Flex-wrap:wrap

This is another hack that I recently learned. It must be used with display-flex property. The wrap method will make sure that if the items are fully in one row, it automatically starts another row. Try out the display flex without and with this functionality and see the results. But if you want to hide excess items rather than move to the next row, don’t apply this. Also remember, overflow: hidden is used to hide items found outside the window media.


Display Block

This acts like div functionality. Your items get arranged vertically. It’s the default of each editor while creating items. This property is good while making your site responsive on the phone. If you have large items, then opt for the block method. It makes your content appear spacious.

Display inline

The hack outputs your content in a single row. Any modification to the height or width of your item may not affect the display. In most cases, I usually avoid this property. It’s like the constant in JavaScript.

We still have other display properties like flex-grid, grid, inline-block. But the above described are the most commonly used. Master them and let them be in your toolbox.
Publisher Subscriber Design Pattern with C#
Tags: csharp
Published: 2021-08-25 15:52:49

## pub-sub
Publisher-Subscriber (pub-sub) is a design pattern that allows loose coupling between the application components.
Also the pattern is an implementation of event-driven architecture. For implementing this pattern we will mainly write two classes Publisher Class and Subscriber Class.

The major difference in Pub-Sub design is the event channel that publisher generates to notify changes to its subscriber without any knowledge of subscriber existence.

## Realtime Examples:
- Publisher class publishes an event ( like Youtube channels video notification ) for its' subscribers using an EventHandler.
- Subscriber class receives the event ( like Youtube channel subscribers ) and handles it as it's needed.
- EventHandler involved in this process of Publisher-Subscriber pattern to get notifications from Youtube Channel (Publisher) and send it to Channel subscribers.
- Publisher class and Subscriber class doesn't have to know each other they both are connected to EventHandler. 
- Publisher will send the NotificationEvent to EventHandler and it will send the NotificationEvent to Subscribers.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pifjkufzpgdw7ypmu4i0.JPG)

Cheers!!
Inicio Rápido en Laravel + tailwindcss + jetstream +tallforms + laravel-livewire-tables
Tags: laravel, tailwindcss, postgres, php
Published: 2021-08-25 15:49:37

La necesidad de convertir código antiguo en PHP me llevó a buscar un stack que me permita:
- Administrar usuarios
- Generar ABMs (altas, bajas y modificaciones) de tablas en forma rápida.
- Utilizar postgresql como base de datos
- Generar una interfaz muy dinámica porque los datos manejar son muchos y corren procesos complejos (scraping, consumo de servicios xml, conversiones, etc)
- Una linea de comando que me permita correr procesos batch.

Desde hace tiempo trabajo con Laravel pero quiería dar el salto a la versión 8 y sus componentes nuevos. 
Para esto elegì: 
* Laravel
* Jetstream (con livewire)
* [tall-forms](https://github.com/tanthammar/tall-forms)
* laravel-livewire-tables 

Mi sección de paquetes del composer.json quedó asì.

```JSON
"require": {
        "php": "^7.3|^8.0",
        "amendozaaguiar/laraveles-spanish-for-jetstream": "^1.6",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.54",
        "laravel/jetstream": "^2.3",
        "laravel/sanctum": "^2.6",
        "laravel/tinker": "^2.5",
        "livewire/livewire": "^2.5",
        "rappasoft/laravel-livewire-tables": "^1.13",
        "tanthammar/tall-forms": "7.9.9.3"
    },
```

Una vez instalado todo en el directorio mediante los siguientes comandos de cada página de instalación o wiki queda un sistema con todos los componentes. 
Lo importante ahora es comenzar a agregar crear cada tabla usando migrations, cada CRUD  de modelos, relaciones y exponer todo en el tablero (dashboard) 

En un próximo articulo haré cada una de los pasos. 
para llegar a algo similar a esto

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7s2w9nwcv2boe1hv7thf.png)
Todo integrado, con livewire, validaciones y demás.
animation-wrapper-view, declarative animations with imperative controls
Tags: reactnative, react, opensource
Published: 2021-08-25 15:16:10

animation-wrapper-view is a collection of a well-defined set of component-level animations, that a developer can utilize just by providing some configurations. AnimationWrapperView will add plug and play type support to the already robust Animated API and will take care of all the intricate details of each animation type.

### Features
 - Power animation payload from anywhere (backend ? 😉)
 - Extremely light-weight (4KB gzipped + minified).
 - Out-of-box support for iOS, Android and RNW.
 - Great selection of well defined animations. 
 - Declarative transformation animations with JSON.
 - Imperative controls to the animation state. (start/pause/reset)

Check out this snack, play around with the library.
Snack Link: https://snack.expo.dev/@swapnil1104/animationwrapperview-playground
Library Link: https://github.com/flipkart-incubator/animation-wrapper-view

People looking for solving complex animation use-cases with JSON-based payload, potentially server-driven, can definitely have a look! Looking forward to any feedback/feature requests!

Cheers.
Raspberry Pi: Login to raspberrypi without external monitor.
Tags: iot, raspberyypi, installation, ssh
Published: 2021-08-25 15:11:09

Hi folks, today we will see how to login to raspberrypi without any need of an external monitor.

###Prerequisites:-
- You have a SD with raspbian OS installed.
- You have a laptop or desktop with putty installed (If you are using a linux then terminal is enough).
- You have an ethernet cable to connect your system and pi.

###Steps:-
- First step is to enable ssh in your pi. 
For that, create an empty file named __ssh__ in the root path of your SD card in which OS is installed. This will enable ssh in pi when it boots up.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r9gz6kf7b15u6udpejw.png)
 
- Connect your pi and laptop using an ethernet cable.
- Now you can connect to the pi through ssh. 
For that open the putty application in your system. By default pi will have hostname as 'raspberrypi'. Enter the hostname as 'raspberrypi' 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40sg4edt28x0zipfr546.png)
 
- Login as pi. 
Default username is __pi__ and password is __raspberry__.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/howr3qns3x6qm48gp2xw.png)
 

Thankyou...
LaTeX & Maths: Conditional Expressions and Multiple Equations
Tags: codenewbie, latex
Published: 2021-08-25 15:07:31

Hello, how are you? :) 

In this post I tell you how to create conditional expressions and what you can do if you have multiple equations and align them at the center. Let's start!!!

## Conditional Expressions

You need to use the `cases` instruction to define the expression 

```LaTeX
\begin{cases}
   equation
\end{cases}
```
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bd45kuagk100lxt85gq.png)

Produces 

![Screenshot from 2021-08-23 10-16-57](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61yv4ealo4j1fsl2f3mq.png)

You can add a new file with `\\` at the end of the line 

- This must be inside a math environment like `$ $`, `\[ \]` or `equation`

## Aligning Multiple Equations

We have seen many ways to write equations, but ***Just one equation*** what if you want to write 5 equations, or more than 5 equations? Do we need to put each equation in `\[\]` it is going to be a nightmare!!

There exist an environment, the `gather` environment this centers a group of formulas on a separate line 

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

Produces

![Screenshot from 2021-08-23 10-30-29](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u7o7kuvhdji3tzepoq9.png)
  
- You can create a new line with `\\`
- No blank lines are permitted within the environment

This is all for today.

Do not forget to follow me on twitter `@latexteada`

Greetings :)
Approaching Learning and Content Creation with Sy Brand
Tags: podcast, beginners, codenewbie, productivity
Published: 2021-08-25 15:04:03

[Sy Brand](https://twitter.com/TartanLlama) talks about their gift of making complex topics digestible in teaching others to learn how to code through short (and cute!) Twitter and YouTube videos. They talk about how important it is to find something that motivates you when you’re first learning anything, and shares a little bit about their own content creation strategies, especially by seeing code as art.

{% podcast https://dev.to/greaterthancode/247-approaching-learning-and-content-creation-with-sy-brand %}

Check out more awesome episodes at [GreaterThanCode.com](https://greaterthancode.com)!
Dank Memer Bot Discord
Tags: discord
Published: 2021-08-25 15:02:59

What is Dank Memer Bot?

The Dank Memer is a multipurpose bot that adds a set of functions to your server. Though the list keeps going on, the Dank Memer Discord bot can do music, moderation, currency, and of course, memes. Like Rhythm Bot, the average bot is known to perform only one function — in this case, just music.

Plenty of users tend to identify multipurpose bots as annoying and understandable harmful add-ons to the server. However, that is simply not the case, at least for most multipurpose bots; these bots can prove to be really neat, especially if the owners invest some time in customizing the bots accordingly.

What makes Dank Memer different?

While the Dank Memer Bot boasts a distinct feature set, it is undoubtedly not what sets it different from its competition. In fact, it is the tremendous support and devotion dedicated by Dank Memer’s team of developers. The team aims to be the best at everything they offer while sprinkling some ‘spicy’ meme-content with each feature. For instance, instead of saying the traditional ‘this user is banned’, the bot instead says ‘good riddance idiot’, or anything else you may want it to say.

The Dank Memer team is amongst the few who actually listen to user feedback. As time passes and more bots show up, often mimicking their features, the bot continues to evolve and improve.

If you want to know more about dank memer bot - https://exploringbits.com/dank-memer-bot-discord
#006 Ingress vs Egress Network Traffic explained and defined
Published: 2021-08-25 15:02:51

>##**Ingress network traffic**
is composed of all the data communications and network traffic originating from an external networks and destined for a node in the host network.

>##**Egress network traffic**
is all traffic is directed towards an external network and originated from inside the host network.
It is the reverse of ingress traffic.

>##**Cloud POV**
When we look at those terms from a Cloud prospective we can conclude:
###**Egress means exiting the cloud. Ingress means entering the cloud.**

More details: 
https://www.safdar.com/how-to/ingress-vs-egress-network-traffic.html
How I got Linus Torvalds in my contributors on GitHub
Tags: news, github, git
Published: 2021-08-25 14:54:39

Before starting, you can see for yourself by clicking on the link → https://github.com/martiliones/icon-set-creator

\* don't forget to star project if you like it :)

# Idea
One day I wondered why my commits were not showing up in the activity overview. I googled and [found on StackOverflow](https://stackoverflow.com/a/19183663/10939574) that GitHub uses your git email to link to the profile instead of the authentication data. So I thought that maybe I can change git email to get a commit from another user without his participation

# Realisation
First of all, you need to get e-mail address of a target user. At first my idea was to get the email address from the user's git repository, but then I found that I could use the GitHub API to get it. Here is the GET API method you can run in your browser

```
https://api.github.com/users/REPLACE_WITH_USERNAME/events/public
```

You will get list of user events and you can easily find e-mail with search box in your browser (`ctrl + F` in most browsers, or if "Filter JSON" for Firefox)

Once we get the email address, we can create a commit:
```bash
git -c user.name='Linus Torvalds' -c user.email='torvalds@linux-foundation.org' commit -m "JavaScript is my favorite language 💕"
```

To display your commits in target user Activity Overview **at least one** of the following must be true:

- User is a collaborator on the repository or are a member of the organization that owns the repository.
- User have forked the repository.
- User have opened a pull request or issue in the repository.
- User have starred the repository.

# Results
You can do this with anyone as long as you have a user's email address.

![Linus Torvalds commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76sots36it7nt0inx6sx.png)

![Contributors Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gs8jmuwnt1mki89nq1sl.png)

#  Conclusion
I think GitHub should fix this bug to prevent attacks on profiles. If the target user starred your repository, you can draw something in his Activity Overview as example

Thank you for your time. Share your opinion about it in the comments 👇