teleren/devto huggingface dataset:
My Journey with my first Client !!
Published: 2021-04-21 15:08:10

Journey with my first client on LINKEDIN ?
---> Finally, last week I got my first client on LinkedIn, an amazing platform, I haven't send any emails, haven't send any cold emails, I did it by simply asking the Founder of that community, whether she wanted a website for her community, firstly, like everyone she said no, but later I joined her community on Telegram, were she shared her website, after which I asked her again, can I help in making your website ? ,this time she said "Yes", and I started making her website according to her guidance and requirements, finally the website was ready in a week... 

Here's the link of the website, you guys can visit it and also join the community, it's for all the coding enthusiasts who are struggling in competitive programming,

Here's the link of the website: peer-programming-hub.web.app
Getting to know Flutter: Flutter 2 Migration
Tags: dart, flutter, beginners, tutorial
Published: 2021-04-21 15:06:34

Flutter 2 is here and with web support on stable channel and new desktop crispy goodies it came a long-awaited feature: sound null safety! But... we're not here to talk in depth about it, but only how to migrate your code to Flutter 2 which, if you don't want null safety, it's pretty easy.

###

### 1. Check for breaking changes and change your code accordingly

*With great releases comes great breaking changes* (Uncle Ben).

Jokes aside you should take a look [here ](https://flutter.dev/docs/release/breaking-changes)and check if some of your code would be affected by this update. be also aware that with by upgrading to Flutter 2 all your projects will be affected if you're not using some third-party Flutter version control methods.

###

### 2. flutter upgrade

That's the very first thing to do, just give the command

```dart
 flutter upgrade
```

Just wait for the download to finish and voila! Flutter 2 is here!

###

### 3. Check out your dependencies

Flutter 2 lets you upgrade your dependencies because, obviously, it now supports sound null safety so, get on your project `pubspec.yaml` file and check for updates.

You should need to manually update most of your dependencies because most packages got a "major" release with Flutter 2 so refer to [pub.dev](https://pub.dev/) on how to update your libraries.

You did it! But for having the complete package you should also need to set your dart version to support null safety!
 
###

### 4. Feeling brave?

This could be pretty time-consuming and giving you some issues but you should do it because it will geive you a best insight on possible issues and null exceptions.

First you'll need to update the minimum dart version on your pubspec.yaml file:

```dart
environment:
  sdk: ">=2.12.0<3.0.0"  //This line should look like this
```

Then do a little `flutter clean` and `pub get.`

Now pretty much 70% of your code will have issues. Don't worry, it's normal, refert to [this page](https://dart.dev/null-safety/migration-guide) to know how to migrate your code and adding all necessary identifiers.

Be also aware that if you add sound null safety to your project **all your dependencies must have it** so if you have even one library has not been updated your code will fail to run.


There, here's a little guide on how to migrate to Flutter 2. Wrapping up it's a pretty easy task if you don't enable sound null safety, which is absolutely the most difficult and time-consuming task. My advice is that if you have old, very big projects, just update Flutter and your dependencies, all new projects, however should have sound null safety.
Kotlin – SpringBoot + Jquery JsonP for requests to cross domain
Tags: kotlin, springboot, jquery, jsonp
Published: 2021-04-21 15:02:44

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-jquery-jsonp-requests-cross-domain

Kotlin – SpringBoot + Jquery JsonP for requests to cross domain

In the post, <a href="https://grokonez.com">JavaSampleApproach</a> will show you how to use JQuery JsonP Request to Kotlin SpringBoot server without worrying about cross-domain issues.

<!--more-->
<h2>I. Technologies</h2>
- Kotlin 1.2
– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– Bootstrap
– Spring Boot – 1.5.10.RELEASE
<h2>II. Jquery JsonP and Kotlin SpringBoot</h2>
JSONP is a solution to resolve cross-domain issues which uses script tag instead XMLHttpRequest object.
With JQuery, we can use it as below:

<pre><code class="language-javascript">
$.ajax({
	type : "GET",
	url : "http://localhost:9000/api/customer/all",
	
    // The callback parameter
    jsonp: "jsaJsonpCallback",
	
    // Tell jQuery that we're expecting JSON-P
    dataType: "jsonp",
    
	success: function(result){
		// do something here
	},
	error : function(e) {
		// do something here
	}
});	
</code></pre>

To support JSON-P with SpringBoot RestAPI, we use <code>AbstractJsonpResponseBodyAdvice</code> by Kotlin language:

More at:

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-jquery-jsonp-requests-cross-domain

Kotlin – SpringBoot + Jquery JsonP for requests to cross domain
My Newest Programming CSS Tutorial!
Tags: html, css, design, animation
Published: 2021-04-21 14:58:54

{% youtube 9RH_oBhMk_I %}

Hello guys! Welcome back to my channel! In today's tutorial, you will learn how to code a loading button! Before I start, don't forget to Like, Share, Subscribe and leave a comment down below about what would you like to learn in the next tutorial. Let's start! Let's start by changing the coding language to HTML. Adding the HTML template, and adding a title. I will name this Loading Animation Tutorial. Let's add a button with some text in it. Now let's go to fontawesome.com (the link is in the description) and search for a loading icon. I am gonna choose this icon. If you want you can scroll down and see other icons. Copy the HTML tag, and past it in your HTML file. Save it as HTML.html. Now let's see how it looks. But where is the icon? To can show a font awesome icon you need at the first to make an account and go to kits. And copy the code that they are giving you. After this paste it into the header. Now if we save and reload the page you can see the icon. Now let's start designing. Change the language to CSS. And let's start by removing the default margins. And now let's go to google fonts and choose a font. I will choose Roboto. You can choose whatever font you want. Let's copy this and go to the HTML file and paste this in the header section. Now let's go back to google fonts and copy the font family, and past it in the CSS file. Save this as CSS.css. Now let's add a source tag to our HTML file. Copy the link of the files and paste it in the src section. also, add a link tag with the name of the CSS file. So, now if we refresh the page the margins disappeared. Now let's style the button. I am gonna add 10-pixel padding, set the border and the outline to none. Make the background white. Make the border-radius 10px, the width 200 pixels, and the height 80. I will also add a box shadow of 20px blue. And also position, absolute. Save it and refresh the page. You see that now our button is having a design. But now let's make it to be in the center: top, fifty%, left fifty%. transform, translate -50%, -50%. Font size 25 pixels and cursor pointer. Let's see how it looks. type animation spin 25 linear. To add the animation we need to type keyframes, spin because this is the name of the animation. Zero%, tranform roteate 0deg. And now 100%, transform, rotate three hundred sixty deg. Let's save and refresh the page. Oh! I forgot! We need to make just the icon to be animated! So let's copy the animation. Write fas. If you are using another icon look there to see if it is different. Change from 5 to s and add infinite. Now if we save and refresh, you can see that is working! Thanks for watching guys! Don't forget to Like, Share, and Subscribe! See you next time!
Font Awesome: https://fontawesome.com/​
Google Fonts: https://fonts.google.com/
Looking for a Chrome extension to take screenshots of a page for different screen sizes
Tags: help, chrome, extension
Published: 2021-04-21 14:52:39

---
title: Looking for a Chrome extension to take screenshots of a page for different screen sizes
published: true
description: 
tags: help, chrome, extension
//cover_image: https://direct_url_to_image.jpg
---

I'm looking for a Chrome extension that allows me to download screenshots of different viewports / screen sizes, so I can send screenshots of what I'm working on to the designer for feedback.
I remember someone posted an extension that does what I want, I'm pretty sure someone posted it here, but can't find it :(.
Do you have any extensions to recommend that can help me with what I need? The closest one I found is [Responsive Viewer](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en), but I have to download each screenshot individually.
The Really Expensive Whiteboard
Tags: scrumdungeon
Published: 2021-04-21 14:51:59

---
title: The Really Expensive Whiteboard
published: true
description: Software solutions are not always the ideal solution.  Or the most expensive.  What happens when you have a solution that doesn't involve software?  You have a really expensive whiteboard.
tags: scrumdungeon
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pjjjx3xxs8j1d2th2gw.png
---
One place I worked at, we had the opportunity to bid on a project that would have been used in Antarctica.

The client was looking for a way of tracking people, to see if they were off-site, on-site (but not in the building), or on-site and in the building.  They were open to proposals on how they wanted this done.

One solution was to give each person a card, and they would swipe in or out, depending on where they were.  The idea was to use the same sort of proximity cards that you'd use to get access to an office building.  This is the solution that my boss was initially interested in, as it was similar to some other solutions that we had already written.

Another solution that was proposed was to use Bluetooth.  This is when Bluetooth was still pretty new, and no one on our team had used it before.

Then there was my solution: a whiteboard.

In hospitals and other offices where employees are frequently off-site, you'll often see a whiteboard with rows of names, and colored magnets - one per person.  When someone comes into the office, they move their magnet into the "in" column.  When they leave the office, they move the magnet into the "out" column.  My proposal was to buy the outfit a whiteboard, some markers, and a bag of magnets.  Then bill the client a princely sum, but still less than what a software based solution would have cost.

My boss wasn't amused.

And the client probably wouldn't have been amused to been billed for a really expensive whiteboard, either.
Accessing EC2 Linux instance without .pem file
Tags: linux, showdev, devops
Published: 2021-04-21 14:41:31

---
title: Accessing EC2 Linux instance without .pem file
published: true
description: If you want to access your Linux instance without .pem key over ssh, let's learn it
tags: #linux #showdev #devops #devops
cover_image: https://media.npr.org/assets/img/2019/12/13/trh_health_for_all_artwork_wide-44d88ff79a007e3e29aeedc243778f3dcf5fa34e-s800-c85.jpg
---

you may find a situation where you want to access your Linux instance from someone's else machine, but your Linux need the `.pem` key file and you don't want to carry your `.pem` file to other's machine. why not just create a password for ssh, so let's create it

1) first you have to log in to your Linux box using `.pem`
```sh
$ ssh -i your_pem_file.pem ubuntu@ec2-________.compute-1.amazonaws.com
```

2) create a user that will access the instance using a password
```sh
$ sudo useradd -s /bin/bash -m -d /home/USERNAME  -g root USERNAME
```

3) create a strong password for the new created user
```sh
$ sudo passwd USERNAME
Enter new UNIX password:
Retype new UNIX password:
```

4) Add user to the sudoers file by using `sudo visudo` command
```sh
USERNAME  ALL=(ALL:ALL) ALL
```

5) Enable password authenticating by editing `/etc/ssh/sshd_config` file. and look for `PasswordAuthentication` 
```
PasswordAuthentication no 
# change it to yes
PasswordAuthentication yes
```

6) restart ssh demaon
```sh
$ sudo systemctl restart ssh
```


You're done, let's login by password
```sh
$ ssh USERNAME@hostname
```

BOOM you dit it. Make sure to create a strong password as it's less secure using a password rather than `.pem` file.


Thank you so much for reading my article, I hope you got something to learn today. stay positive and happy coding.

anybody can succeed on the space, so don't listen to nay-sayer.
The Dangerous Mr. O'Conner
Tags: scrumdungeon
Published: 2021-04-21 14:36:40

---
title: The Dangerous Mr. O'Conner
published: true
description: What happens when you combine SQL directly behind a button click event in a poorly written app, a lack of sanitizing inputs, and Mr. O'Conner?  You get an SQL injection attack.  That's what you get.
tags: scrumdungeon
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pjjjx3xxs8j1d2th2gw.png
---
In school, one of the things they tried to drill into us was the separation of the UI (view), models, and controllers, as well as the idea of using stored procedures.  Now I know why they tried to ram things like this into our minds.

One app I had the opportunity to work on was written in Visual Basic.  The app being written in Visual Basic wasn't the worst.  There's been some decent things created using Visual Basic, even if it is the runt of the programming language litter.  This app, in particular, though, had some nasty surprises.  One of these surprises was discovered by a "Mr. O'Conner".

At one point in the app, it had a text box that took in an individuals name.  When I first started digging into the code, I was horrified to see an SQL statement directly behind the button click event for the button that was next to the text box.  It was literally taking the contents of the text box, at face value, and inserting them directly into an insert query.  This worked fine until someone had a single quote in their name.  Like Mr. O'Conner.

For those not familiar with an SQL injection attack, the idea goes something like this: if inputs aren't properly sanitized, it is possible to enter a piece of text that terminates the existing SQL query, and starts another - whatever other sort of query (or update/delete statement) you want.  So Mr. O'Conner, with a single quote in his name, was suddenly breaking the app.  The previous developer put in the "fix" of converting the single quote to a backtick.

This is not the proper way to fix something like that.  The proper fix would be to use a stored procedure, and sanitize any inputs going into the app.  But, like I said, in this case "Mr. O'Conner" was switched over to be "Mr. O`Conner".

The moral of the story:

1. Never put SQL statements directly behind button clicks.
2. Use stored procedures.
3. Sanitize your inputs properly (and don't trust them in the first place!).
4. If your name is Mr. O'Conner, you may want to consider a career in software testing.
15+ Awesome CSS Animation Resources
Tags: css, javascript, webdev, beginners
Published: 2021-04-21 14:29:10

Here is the list of awesome CSS animation resources which will help you to animate components quickly and easily.

### 1.[Animista](https://animista.net/play/basic)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8nvvnmsjgiyh5x92uys.PNG)
### 2.[Animate.CSS](https://animate.style/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy96015n0sngr6flo30b.PNG)
### 3.[Animatelo](https://gibbok.github.io/animatelo/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kuiyyzibet8hj5dvhaq.PNG)
### 4.[All Animation CSS3](https://all-animation.github.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n59wf6ax7zkrbliq2fcy.PNG)
### 5.[CSShake](https://elrumordelaluz.github.io/csshake/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm2slcpnnad51iy67nll.PNG)
### 6.[CSSAnimation](http://cssanimation.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4ox2wsshfms3desfppi.PNG)
### 7.[Hover.CSS](https://ianlunn.github.io/Hover/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4og2h1ehz8mrg4wx7hc6.PNG)
### 8.[Infinite](https://tilomitra.github.io/infinite/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfjfatpmltu7fyd1z6hb.PNG)
### 9.[It's Tuesday](https://shakrmedia.github.io/tuesday/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrh18jt8g0bd5sjr7rlk.PNG)
### 10.[Magic](https://www.minimamente.com/project/magic/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juc4b4j5mvnicw3miitf.PNG)
### 11.[Micron](https://webkul.github.io/micron/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0f2058uf6gjaaf7z06l2.PNG)
### 12.[Motion UI](https://zurb.com/playground/motion-ui)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vd79z14ctgdw2bv11w15.PNG)
### 13.[Obnoxious](https://tholman.com/obnoxious/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc37v6i21edol428w6qq.PNG)
### 14.[Reboundgen](https://dwarcher.github.io/reboundgen/examples/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81feyzvg6rdwg9j8hnlq.PNG)
### 15.[Rocket](https://minimamente.com/example/rocket/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4i8if1477zy91wuq5xd.PNG)
### 16.[Wicked CSS](https://kristofferandreasen.github.io/wickedCSS/#)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7ifwbbtjkdy2xfzfqc2.PNG)
Hope you like it, Happy Coding :)


You can check more web development resources below. 

{% link https://dev.to/kiranrajvjd/19-simple-hover-animation-using-css-1l36 %}
{% link https://dev.to/kiranrajvjd/10-best-javascript-based-github-repos-for-web-developers-49pc %}
{% link https://dev.to/kiranrajvjd/7-simple-menu-icon-animation-for-beginners-25oa %}
{% link https://dev.to/kiranrajvjd/10-simple-navigation-bar-hover-animations-1980 %}
{% link https://dev.to/kiranrajvjd/12-simple-css-hover-effects-95d %}
Edit npm package and persist the changes on npm install
Tags: npm, node, javascript, package
Published: 2021-04-21 14:28:45

**Have you ever wondered how you can edit any npm package and have those changes persist if `npm i` gets run?**

You can use `patch-package` to do this, all you need to do is follow these steps -

* Make changes to the npm package.
* After making changes to the npm run this command `npx patch-package (package name)`.
* This command will create a *patches* folder inside your project directory and that directory will hold all the changes which you did to the npm package.
* Now whenever you do `npm i` it will install the packages, to get those changes which you did in the npm package just run this command `npx patch-package` to apply the changes.

Now you are done, all your changes will be applied.

**Making this process automatic**

Just add the command as `postinstall` like this in *package.json* file -

`"postinstall": "npx patch-package"`



*Check out more:*

[What is AWS Artifact?](https://devswisdom.com/what-is-aws-artifact/)

[How to extract text from an image using AWS Step Functions and Serverless](https://devswisdom.com/extract-text-with-aws-textract-using-aws-step-functions/)

[Image Recognition using AWS Serverless](https://devswisdom.com/aws-image-recognition-using-serverless-on-nodejs/)

[Understand Math functions in Javascript](https://devswisdom.com/javascript-math-floor-math-ceil-and-math-round/)

[DynamoDB VS MongoDB](https://devswisdom.com/dynamodb-vs-mongodb-detailed-comparison/)
AzureFunBytes Reminder - Demystifying @HelmPack with @DonovanBrown - 4/22/2021
Tags: azure, kubernetes, helm, beginners
Published: 2021-04-21 14:20:38

AzureFunBytes is a weekly opportunity to learn more about the fundamentals and foundations that make up Azure. It's a chance for me to understand more about what people across the Azure organization do and how they do it. Every week we get together at 11 AM Pacific on [Microsoft LearnTV](https://cda.ms/226) and learn more about Azure.

When: April 22, 2021 11 AM Pacific / 2 PM Eastern
Where: [Microsoft LearnTV](https://cda.ms/226)

{% youtube 2yt7IgVoBag %}

This week I welcome Captain America himself, [Donovan Brown](https://twitter.com/DonovanBrown) to discuss how to be a superhero to your Kubernetes clusters using Helm.  We'll have a discussion on what made Donovan take interest in Helm and how he got started learning to use it.  We'll also dive into Donovan's new role as Partner Program Manager in the  Office of the CTO.  

[What is Helm?](https://helm.sh/)  [Helm](https://helm.sh/) is an open-source packaging tool that helps you install and manage the lifecycle of Kubernetes applications. Similar to Linux package managers like *APT* and *Yum*, Helm manages Kubernetes charts, which are packages of pre-configured Kubernetes resources.

From the Helm Project website: *Helm helps you manage Kubernetes applications — Helm Charts help you define, install, and upgrade even the most complex Kubernetes application.*

*Charts are easy to create, version, share, and publish — so start using Helm and stop the copy-and-paste.*

*Helm is a graduated project in the [CNCF](https://cncf.io/) and is maintained by the [Helm community](https://github.com/helm/community).*

Join us at 11 AM PST / 2 PM EST for the latest episode! We'll get you the information you need to start using Helm on Kubernetes.

Learn about Azure fundamentals with me!

Live stream is available on Twitch, YouTube, and LearnTV at 2 pm EST Thursday. You can also find the recordings here as well:

[AzureFunBytes on Twitch](https://twitch.tv/azurefunbytes)
[AzureFunBytes on YouTube](https://aka.ms/jaygordononyoutube)
[Azure DevOps YouTube Channel](https://www.youtube.com/channel/UC-ikyViYMM69joIAv7dlMsA)
[Follow AzureFunBytes on Twitter](https://twitter.com/azurefunbytes)

Useful Docs:

[Get $200 in free Azure Credit](https://cda.ms/219) 
[Microsoft Learn: Introduction to Azure fundamentals](https://cda.ms/243)
[Quickstart: Develop on Azure Kubernetes Service (AKS) with Helm](https://cda.ms/25j)
[Quickstart: Deploy an Azure Kubernetes Service cluster using the Azure CLI](https://cda.ms/25k) 
[Install existing applications with Helm in Azure Kubernetes Service (AKS)](https://cda.ms/25m) 
[Push and pull Helm charts to an Azure container registry](https://cda.ms/25n)
Amazing Grid Card Hover Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-04-21 14:20:27

Hello, 

Today I created an Amazing Grid Card Hover Using HTML & CSS. when you hover on this card image size changes to half & also shows some information about the place we will be adding more animation in the upcoming post I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

If you want to more support me then buy me a [coffee](https://www.buymeacoffee.com/nikhilbobade27).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/mdRQEJd %}