teleren/devto huggingface dataset:
Top 3 online code editors you must check out as a web developer
Tags: javascript, webdev, programming, beginners
Published: 2022-01-25 09:03:26

The whole world is migrating to online mode, as a web developer we should also. What if I say that you can get your vs code online! Yes, guys I'm not joking you can get your vs code online and that to with some more exciting features like team collaboration and easy deployment to GitHub. 
Before I begin with this article make sure to follow me to get more updates from me and don't hesitate to share my articles with your peers if you find then useful.

## stack blitz
![stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja42049sxtb2vesne1am.png)
 
This is one of the most popular online IDEs for web development
with all the most popular tech stacks like 
Next.js, React, Typescript, Angular, RxJS, Vue, Nuxt ,etc.
You can even add npm packages to your project and easily deploy your code to Firebase and GitHub or you can import your code from GitHub 
 ###Steps 

- visit [stackblitz ](https://stackblitz.com/)
![visit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6dqb9ykzj0ycae6nwok.png)
 
- Sign up or create your account using GitHub and then you will be redirected to your dashboard 
![signup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wyp8vnkdgncqwsn0kw5.png)
-  click on new project & select your tech stack and start coding 

##Repl.it 
 Replit is also one of the most useful online IDE's in the world here you can code in more than 50 languages, can code with your team, and easily push your code to your GitHub repo 

- visit replit.com and click on login/signup 
![replit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1d8k7w64kugz33s8aigb.png)
 
-now hit on create and choose your tech stack 
![create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuj0wubnk0je0w4ftacu.png)
- now write some code then hit on run 
![codeit ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7gfejefs1kct2scxn23.png)
 
## codesandbox
codesandbox is mostly used for frontend development, having features like code embedding, team collaboration, knowledge sharing and the best part I like about it's UI, it's just awesome. 

- visit codesandbox.io
 
![cdesandbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbc58kjx7j8h0tpoox0w.png)
 
 now hit create sandbox and choose your Tech stack, and start coding

![tech stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15ifzdqynn45z55jcb2n.png)

![result ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfjas687cekgu78h2gr6.png)
 
## conclusion 
ok guys we are done, these are the top 3 IDEs in my knowledge and I use them personally, and the best feature I like about replit and code sandbox is the collaboration, i.e. you can invite anyone to code along with you. feel free to comment out if you have any queries and let me know about the online IDE you love the most. Stay happy, Stay safe.

##Connect
 <a href="https://twitter.com/kumarkalyan_">
  <img align="left" width="100px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" />
</a>
AWS CDK  Escape Hatches in GO-CDK
Published: 2022-01-25 08:57:50

With a hint from the jssi issues, I finally managed the CDK escape hatches - https://docs.aws.amazon.com/cdk/v2/guide/cfn_layer.html in GO.

Basic idea is to replace the "any" types defined in the CDK/jsii like:

```go
type CfnBucket_AnalyticsConfigurationProperty struct {
	Id *string `json:"id" yaml:"id"`
	StorageClassAnalysis interface{} `json:"storageClassAnalysis" yaml:"storageClassAnalysis"`
	Prefix *string `json:"prefix" yaml:"prefix"`
	TagFilters interface{} `json:"tagFilters" yaml:"tagFilters"`
}
```

With GoFormation structures, which include all type informations like:

```go
// See: 
type Bucket_AnalyticsConfiguration struct {
	Id string `json:"Id,omitempty"`
	Prefix string `json:"Prefix,omitempty"`
	StorageClassAnalysis *Bucket_StorageClassAnalysis `json:"StorageClassAnalysis,omitempty"`
```

And get rid of the `interface{}`. 

So: Want to use AWS CDK  Escape Hatches as direct Cfnxx Construct modification easy and type-safe in GO-CDK? 
Details here: 
https://www.go-on-aws.com/infrastructure-as-go/cdk-go/escape-hatches/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnyl8s1tzltjbcm1ixk7.png)

What do you think about the methods?

#aws #cdk #golang #cloudformation
How to extract year from a string
Tags: javascript, webdev, tutorial
Published: 2022-01-25 08:56:42

### Hello Folks 👋
What's up friends, this is **SnowBit** here. I am young passionate and self-taught developer and have an intention to become successful developer.

Today, I am here with a quick tutorial. So, let's get started.

### Extracting year from a string
Let use take a date,
```
24 February 2006
```
Now, we have to extract year from the string, so here's how you do it
```js
const extractYear = str => str.match(/\d{4}/)[0];
```
**Works with any layout of date**
```js
const extractYear = str => str.match(/\d{4}/)[0];


console.log(extractYear("24 February 2006"))
console.log(extractYear("24-02-2006"))
console.log(extractYear("24/02/2006"))
```
**Try Now**,

{% jsfiddle https://jsfiddle.net/mwj7314v/1/ result %}

---

Thank you for reading, have a nice day!
**Your appreciation is my motivation 😊**

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe to me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
Download only the pixels you need : image scaling with imagekit
Tags: javascript, webdev, pagespeed
Published: 2022-01-25 08:52:27

In 10 years, the weight of images on the web has increased by 194% on desktop and **500%** (!) on mobile. The size and quantity of images you serve, whether on your portfolio or your professional projects, has most certainly followed the same curve.

![Image size evolution since 2021](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6an4ir6dn9m26axqxbg.png)

Furthermore, you have certainly sized your images to look perfect on your FHD or even 4k screen, which contributes to increasing their weight unnecessarily. And Google points this out to you in every pagespeed report: **Properly size images**

![Pagespeed report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c62pb7i1b5uiyjo6m2n1.png)
 
Well, using [imagekit](https://imagekit.io/) and a bit of JS, you can accomplish just that. Our goal will be to use imagekit's on-the-fly resizing capabilities to resize all the images used on our website **before** they are served to the final user.

First, you will need to create an imagekit free account. Once that's done, **add an external storage location** and configure the base URL to point to your website. Finally, you need to find your **URL endpoint** and copy it as we will need it for our snippet of code:

```js
// we listen for the readystatechange event
document.addEventListener("readystatechange", () => {
  // "interactive" fires when the DOM is ready but the additional content has not been downloaded yet
  if (document.readyState === "interactive") {
    // we get all the images in the document
    document.querySelectorAll("img").forEach((img) => {
      img.dataset.oldSrc = img.src;
      // we remove the base of the URL from the image source
      const src = img.src.replace(window.location.origin, "");
      // we get the dimensions of the image
      const renderedWidth = img.scrollWidth;
      const renderedHeight = img.scrollHeight;
      // write your URL endpoint here
      img.src = `https://ik.imagekit.io/CHANGEME/tr:w-${renderedWidth},h-${renderedHeight}${src}`;
      // if the image returns an error (404 eg.), we revert back the origin
      img.onerror = () => {
        img.src = img.dataset.oldSrc;
        img.dataset.oldSrc = "";
      };
    });
  }
});
```

That's it!
How to Create a Bucket With InfluxDB v2.1 CLI
Tags: influxdb, influx
Published: 2022-01-25 08:51:15

There are a couple of changes in InfluxDB CLI if you upgrade from 1.X to 2.1. The database is now called a "bucket," and it's pretty different when creating one using CLI. Here is what I've learned the hard way (by trial & error and googling):

There is no 
`influx -execute 'SHOW DATABASES'` 
or `influx -execute 'CREATE DATABASE Foo'`.

There are buckets instead, and you need permission to create one:
`influx auth create -o MyOrg --write-buckets`

In v2.1, I have not found any `--all-access` flag.

If you have permission, create a bucket:
`influx bucket create -n BucketName -o MyOrg -r 7d`

When you try to import data to your new bucket and import fails with an error message `Not Found {"code":"not found","message":"no dbrp mapping found"}` you need to create a mapping from bucket to retention policy.  
DBRP stands for "Database and Retention Policy"  
(Shouldn't that be also changed to Bucket and Retention Policy (BRP)?)

Here is how you can create a mapping between a bucket and DBRP for a "week":

First, if you don't have one already, you need permission:
`influx auth create -o MyOrg --write-dbrps`

Second, create a mapping:
`influx v1 dbrp create --db BucketName --rp week --bucket-id mybucketid --default`

And that's it. Import should be successful now.

I'm still a newbie with the InfluxDB. If you have a better way to do this or I miss something, let me know in the comments. I'd love to learn more!
5 CSS card hover effect that will blow your mind 🔥🤯
Tags: beginners, css, uiweekly, ux
Published: 2022-01-25 08:48:13

Hello guys, In this article you'll find of the best CSS card hover effect that are easy to make and looks very awesome. So why to waste time, let's check those effect quickly.

#Card hover - 01

![Card Hover - 01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omn56pd5lfd607dg3cd7.gif) 

This hover effect looks very nice, and simple. You can watch the coding tutorial of it [here](https://youtu.be/LFnmUv-ahSk)

{% youtube LFnmUv-ahSk %}

#Card hover - 02

![Card Hover - 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqvqc0rnfjqnaqr0ycst.gif) 

Isn't it looks nice. See how to code this effect [here](https://www.youtube.com/watch?v=3qMjTZDwxuU)

{% youtube 3qMjTZDwxuU %}

#Card hover - 03

![Card Hover - 03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joovazlpgy3ip5ea1329.gif)

This effect's inspiration I got from the first card hover effect. This is also an amazing effect to me. Check out its coding tutorials [here](https://youtu.be/b2jsWL1cDKE)

{% youtube b2jsWL1cDKE %}

#Card Hover - 04

![Card Hover - 04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9o49aijqkhwbpzffeu75.gif) 

And what do you think about this effect. I had so much fun making this kind of effect. It was easy and interesting to make. Check coding tutorial [here](https://youtu.be/MZLShMEt2xo)

{% youtube MZLShMEt2xo %}

#Card Hover - 05

![Card hover 05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw4mmg1z44d12nwwbrcy.gif)

And the last but not least. This simple effect, which was one of my first youtube videos, I was just starting out and thought of making this effect. See its coding tutorial [here](https://www.youtube.com/watch?v=_tvDctKAtMU)

{% youtube _tvDctKAtMU %}

So these was some of the CSS card hover effects that I made on YouTube channel. Well if you do like any of them, kindly subscribe my YouTube channel. It will really motivate me in making these tutorials more.

<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeitpawvax07cx7r9yoa.png"></a>

Well now, I make tutorials on Full Stack development also. Some of them are these.

###1. Fullstack Ecom website 1.0
{% youtube 0-NF3JMs4E8 %}

###2. Fullstack Ecom website 2.0
{% youtube vHCSnaUdNkE %}

###3. Fullstack Social Media website
{% youtube aBjge1drw0c %}

###4. Fullstack Blogging website
{% youtube AWHGQfzfHxI %}

And much more amazing stuff is available on my channel. So if you do like you can visit my channel - [Modern Web](https://www.youtube.com/c/modernweb)

So with that, Thanks for reading.
Use Tin to quickly set up StackEdit in minutes
Tags: beginners, programming, tutorial, productivity
Published: 2022-01-25 08:37:21

StackEdit is full-featured, open-source Markdown editor based on PageDown.（ https://github.com/benweet/stackedit）
Tin is a product of TeamCode that can generate executable applications instantly without manual environment configuration. Users can click to run project directly in the cloud. 

**Login to Tin and clone the StackEdit**
1. Click the Tin URL of StackEdit.
https://www.teamcode.com/tin/clone?applicationId=273128516352372736
Users who have not logged in should sign up first.

2. Log in to Tin with your email, Github account, or phone number.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqxxifndh2s2nysbat41.png)

3. (Optional) After logging in, you can change the “Application Name” or “Tag”.

4. Click "Clone" button to clone the Tin app to your workspace.
Note: Tin will give new users a free trial for a certain length of time, which is determined by the instance size. After the free trial time, the Tin app will automatically stop working. You will not be charged for the whole process. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttwmktap7r9k98b2z1ke.png)

5. Click "RUN NOW" to initiate the application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhs2z0w5a560jb9muzec.png)

6. Click the "Endpoint Lists" button to go to the Endpoint list, with the entry points for all apps displayed. Click the URL of entry point and you will visit StackEdit immediately.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6mv1s3yjsm9x5x82ywu.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mda881ziu67uy4frd6ro.png)

Click START WRITING to use StackEdit now.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiwlljj0x6tadukn1pyb.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lt88rz1x24fdu4luzqtd.png)

You can also use the Tin to quickly set up other open source projects, see the guide: https://www.teamcode.com/docs/en-US/tin/create-tin
Use Tin to quickly set up MateCloud in minutes 
Tags: beginners, tutorial, programming, productivity
Published: 2022-01-25 08:34:21

MateCloud is a microservice architecture based on Spring Cloud Alibaba.（ https://github.com/matevip/matecloud）
Tin is a product of TeamCode that can generate executable applications instantly without manual environment configuration. Users can click to run project directly in the cloud. 

MateCloud has many versions, instructions below are based on Sentinel.

**Login to Tin and clone the MateCloud**
1. Click the Tin URL of MateCloud.
https://www.teamcode.com/tin/clone?applicationId=273423345540034560
Users who have not logged in should sign up first.

2. Log in to Tin with your email, Github account, or phone number.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u5dd5fs8zo6cnmp18xt.png)

3. (Optional) After logging in, you can change the “Application Name” or “Tag”.

4. Click "Clone" button to clone the Tin app to your workspace.
Note: Tin will give new users a free trial for a certain length of time, which is determined by the instance size. After the free trial time, the Tin app will automatically stop working. You will not be charged for the whole process.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30n1dy24wzdkflsmcxnq.png) 

5. Click "RUN NOW" to initiate the application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t15dc483hfpw7beutkj.png)

6. Click the "Primary Endpoint" button and you will visit MateCloud immediately.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yoqehf3mblvzymelmxgr.png)

You can login to MateCloud and try it now.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztcxrdkl6yvs98eitv24.png)

You can also use the Tin to quickly set up other versions of MateCloud or other open source projects, see the guide: https://www.teamcode.com/docs/en-US/tin/create-tin
Water Ripple Effect on Click & Hover In Jquery
Tags: javascript, jquery, html, css
Published: 2022-01-25 08:33:54

In this element, we used Jquery water ripple effects plugins. We used CDN for these ripple effects on the click and hover side.

This is the responsive element for mobile and tables views. We used images from Unsplash where we free get images.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/water-ripple-effect-on-click-hover-in-jquery/)
How to create the best GitHub Profile ReadMe ?
Tags: github, design, programming, opensource
Published: 2022-01-25 08:31:07

If you are reading this, I assume that you already know the importance of having a good GitHub Profile.

You can find various articles on the internet that will tell you to spend at least 20-40 min and create a good readme but even after spending that much time you will feel that your profile is incomplete, and you start researching, finding things that you can add to your profile to make it look even better and stand out from the crowd. By doing this all, you will spend over 2-4 hrs and then you may get a good profile readme. But what if I say that you can create a **Perfect** profile in **less than a minute** for **free** . Sounds cool ? Let me tell you how you can do this.

So I am sharing this amazing tool '[GPRM : GitHub Profile ReadMe Maker](https://gprm.itsvg.in)' . This is the **Best Profile Generator** and using this website you can create a profile that is **Beautiful, Modern, and Interactive**. Tons of features like:

⚡ **Lightening fast Profile Creation**
Create your Profile ReadMe in just few clicks ! On an average, it takes less than one minute to create a perfect Profile ReadMe using GPRM

📊 **Flex Your GitHub Stats**
Be Honest, everyone loves to flex their achievements. With tools such as ReadMe Stats, Most Used Languages, Streak Stats you can show your achievements.

👥 **Visitor Counter**
With the use of Visitors Counter, you can see how many people viewed your profile, this gives you an idea about how popular you are on GitHub.

🌐 **Add all Social Links**
We have added an option to add your Social Links to increase your reach and promote your works at one place.

💻 **Show Your Tech Stack**
Select from over 300+ tech options and show your tech stack to everyone, Let them know what makes you awesome.

💰 **Let people help you with Donations**
No matter what your aim is, money is required at some point to boost the process for getting closer to your aim. We give you an option to add Donation Links directly into your profile so that people can help you by donating.

😃 **Fun Components**
If fun is required everywhere, how can it be missing from your profile ? Now, You can cheer up other people by adding Random Memes and Quotes in your profile.

🏆 **GitHub Trophies**
Got any trophies/medals but oops! how can you show them on your profile? Don't worry, GitHub Trophies are the virtual trophies for you. Showcase them by adding it to your profile.

**Cherry on the cake, This is Open Source !**
Yes you heard right, this website is open source and you can find code of this website on GitHub. You can request a feature, contribute to project by adding feedbacks and mentioning bugs if they exist.

So what are you waiting for ? [Create Now](https://gprm.itsvg.in) !
Top 3 resources to get assets for your website...
Tags: html, webdev, programming, tutorial
Published: 2022-01-25 08:27:37

Hello, world! In this article, I'm gonna walk you through a few useful resources from where you can get assets for your website.
![An illustration about web dev.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hchtqfmr40964xc7tf0b.png)

> This article does not intend to make use of unnecessary affiliates, advertisements or any kind of misleading content. These are based on my personal interest.

<h2>#1 Unsplash</h2>
<p>
Unsplash is a great asset library for high-resolution images and illustrations. They provide us with free images that can  be used for both commercial and non-commercial purposes, without any kind of attribution.
</p>
Visit Unsplash at [https://unsplash.com/](https://unsplash.com/).

![Unsplash logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1q3o2jhrwdza1moao16b.png)
 
<h2>#2 Icons8</h2>
<p>
Icons8 is a plethora of web assets that you can use for free for your web project, though it might require some kind of attribution.
</p>
<br>
Now, when I say web assets, I mean it all - yeah, Icons8 does contain a wide variety of icons, images, illustrations, design softwares, clipart, music, image enhancement tools, PBR textures, face generators, audio editors and many more.
<br>
While I personally use Google's [Material Icons](https://font.google.com/icons) for icons on web apps, I use Icons8's icons as _favicons_.

Visit Icons8 at [https://icons8.com/](https://icons8.com/).
![Icons8 logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5oaklam9mep61dehltr.png)

<h2>#3 FreeSound</h2>
<p>Since FreeSound is an audio asset library, it is not specific to web only, but any branch of computer science that deals with sound (Remember: By the term audio assets, I mean sound effects and not music). I frequently use this resource for searching sound effects for video editing, game dev, etc. While there are millions of resources out there that can provide you with free music, I couldn't find a better resource for sound effects than FreeSound.</p>

Visit FreeSound at [https://freesound.org/](https://freesound.org/).

![FreeSound logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5kxljxzyz51tlvuxkgv.png)

<h2>Conclusion</h2>
And that's it! I went over a few amazing asset libraries that I personally use during web dev, which might help you too. Thanks for reading - see you next time!
Top Reasons Your Home Requires Professional Deep Cleaning Services
Tags: cleaning, services
Published: 2022-01-25 08:22:06

With the daily hectic schedule of work, deep cleaning your own house becomes tiring and difficult. We don't have extra hours that we can spend to deep clean our houses on a daily basis. It can cause skin infections due to the dust or germs trapped in your carpets or home. This is the reason why people do cleaning on weekends, which makes it impossible for them to enjoy their weekends. In certain conditions, we find it necessary for us to hire [home cleaning services in Bangalore](https://www.homecaresolutions.in/)

## Here are the top reasons when your home screams out for deep cleaning services:

**1. Time Saving**

Doing all the chores such as mopping floors, cleaning carpets, or upholstery at home by yourself does not make any sense when you have a lot of other tasks to do every day. It can save you a lot of time that you can utilize in various other tasks.

**2. Get Perks In Deep Cleaning Booking.**

cleaning service companies offer you the best. When it comes to deep cleaning by professional services, there are a lot of perks you can enjoy like deciding what to get cleaned, which plans to choose, cleaning get completed in a few hours. All the dust, oil, germs, or stains get removed in no time.

**3. Money Saving**

Hiring cleaning experts can save you a lot of money. Without wasting any money on detergents, ladder, mops, or cleaning brushes, you get a squeaky home deep cleaning. Isn't that great? Moreover, you are not an expert in cleaning the oil, dust, or grime that you think you will remove easily.

Steam clean all your surfaces with proper disinfectants  to give you a fresh and clean environment indoors. To know more about the [home cleaning plans](https://www.homecaresolutions.in/) contact us today!