DEV Community: Ramesh chandra pola

53 .new shortcuts to perform new actions in one step

Ramesh chandra pola — Sat, 06 Nov 2021 03:57:50 +0000

Hello everyone! 🧡

Before we start, Let’s connect on Twitter and also follow me here for more useful blogs.
In this article, we will see .new link shortcuts to perform actions in one simple step.

Let's get started 🚀

Here are some handful of .new shortcuts which save yours 100+ hrs. 😱.

Don't worry, I am here to save your time. For that, I just need your feedback and support 🙌🧡.

Excited right?

What's .new?

.new links are shortcuts to your favourite actions on the websites you love. Instead of typing the full URL or searching for it, you can simply enter the .new shortcut.

For example:

If u want to create a GitHub repository just type repo.new and then boom🚀.

If u are new to this shortcut, you might have tried this right? 😉🙌.
In the same way, we have 100's of shortcuts for Posting, creating, linking, designing, recording etc... it’s all possible with action-based .new links.
But here I will share 53 .new link shortcuts of most daily using websites that can help you get things done faster.
You can also check all shortcuts on What's new website.

Looks interesting right? yes, If you have your own website and want to register .new Domain for your users. So you can also apply to register your own .new-Domain. For that just type get.new ( shortcut for registering a shortcut 😂).

Here the list starts:

folder.new → Create a new notebook for your API on RunKit.
docs.new → Create a New Google Doc.
jam.new → Start a new Jamboard with Google.
form.new → New Google form.
slide.new → New Google slide.
site.new → New Google site.
sheet.new → New Google sheet.
keep.new → New Google note.
cal.new → New Google Calendar event.
meet.new → New meeting room with Google meet.
repo.new → New GitHub repository.
gist.new → New GitHub gist.
pen.new → New Codepen project.
csb.new → New code sandbox project.
js.new → Create a new JavaScript project using.
ts.new → Create a new Typescript project with CodeSandbox.
react.new → Create a new React project with CodeSandbox.
vue.new → Create a new vue.js project with CodeSandbox.
ng.new → Create a new Angular project with CodeSandbox.
svelte.new → Create a new Svelte project using CodeSandbox.
next.new → New NextJS project using stackblitz.
flutter.new → Prototype your app using Flutter's online editor.
api.new → New Node.js API endpoint from Runkit.
story.new → New Medium story.
design.new →Create a new Canva design.
snippet.new → Create a new snippet on Codespace.
playlist.new → Create a new Spotify playlist.
podcast.new → New Anchor podcast episode.
discord.new → Create a new discord server.
notion.new → Create a new page in Notion.
sign.new → Fill and sign PDFs & forms with Adobe.
compresspdf.new → Compress PDF documents with Adobe.
mergepdf.new → Combine PDFs into one file.
pdftoword.new → Convert PDFs to Word documents with Adobe.
link.new → New Create link using bitly.
websitebuilder.new → Build a website with GoDaddy.
wix.new → Create a new Website using WIX.
logo.new → Create a new logo for with Adobe Spark.
photo.new → Edit an image using Adobe Photoshop online.
luma.new → Create an event page for your Zoom event with Luma.
pdf.new → Convert anything to PDF.
board.new → Collaborate remotely on an online whiteboard.
ppt.new → Create a new presentation using PowerPoint.
excel.new → Create a spreadsheet using Excel.
docx.new → Create a new document using Word.
todoist.new → Create a new task using todoist.
action.new → Set up a new workspace to manage your Chrome tabs.
kahoot.new → Create an online quiz using Kahoot.
bitcoin.new → Buy, sell, and trade Bitcoin on eToro.
ionic.new → New ionic project using ionic framework.
sql.new → Write SQL queries for your data in other applications.
deploy.new → Deploy a new vercel project.
matlab.new → Use MATLAB through your web browser.

That's all for today! 😁 You have reached the end of the article 😍

If you found this article helpful, please like and share it 🧡.

Don’t forget to share this article with your friends or colleagues. I'm Ramesh Chandra Pola who loves to build projects and share valuable tips in my Blogs. Feel free to connect with me on Twitter.

19 tips to Google like a pro

Ramesh chandra pola — Wed, 27 Oct 2021 15:07:00 +0000

Hello everyone! 🧡

Before we start Let’s connect on Twitter and also follow me here for more useful blogs.
In this article, we will learn how to search on Google like a pro.

Let’s get started🤩

Googling is one of the most important skills for every developer. It helps you to search effectively for a solution to a problem or an error by saving 1000s of important hours and getting your desired result quickly.

Don’t worry, I am here to save your time. For that, I just need your feedback and support 🙌🧡.

Here are tips on how to master the art of googling as a developer.

1. If you are looking for a file for any topic on Google, then filetype: will help you:

Example: filetype:pdf how to learn react

2. Asterisk (*) can be used as placeholders, which will be replaced by any word or phrase.

Example: how to learn * in 1 month

3. Using site: will search within a specific website.

Example:  site:twitter.com polarameshchan2.

⭐*Do follow me on Twitter . *😁

4. Use quotes to search for an exact-match search:

Example: “What is Web3.0”

5. Using .. Search within a range of numbers like years

Example:  money heist 2017..2021

6. You can use AND Operator to get the results only related to both terms:

Example: frontend AND backend

7. Using OR operator will return results only related to either of two keywords:

Example: Java OR C++

8. If you want to eliminate a website from your search results, then -site: will help you

Example: -site:youtube.com javascript

9. Whenever you want to compare two things, then use vs with quotes on the terms.

Example: "javascript" vs "typescript"

10. Using Location: you can find news related to a particular location.

 Example: Location:india web developers.

11. Define: helps you to find the definition of a word or terminology in a simple and easy way.

Example: define: Web3.0

12. If you came across a new website, then the question arises, what is this website about? so info: will help you to know about that website.

Example: info:freecodecamp.com

13. inurl: helps you to search for information originating in a particular year

Example: inurl:2020 React

14. If you want to find time of different countries, this trick will help you

Example: time "new york"

15. Using related: to get sites that are similar to other sites

Example: related:youtube.com

16. Using the before: operator will return only results before a given date. You must provide only a year or Day/month/year dates.

Example: Python before:2020

17. In the same way as before: after: operator will return only results after a given date. You must provide only a year or Day-month-year dates.

Example: Python after:2020

18. - operator will help you to exclude a term from the search results.

Example: Javascript -CSS

19. Last but not least, Advanced search is a built-in feature of Google that allows a user to specify additional requirements for a search.

Advanced Search

That's all for today! 😁 You have reached the end of the article 😍

If you found this article helpful, please like and share it 🧡.

Don’t forget to share this article with your friends or colleagues. I'm Ramesh Chandra Pola who loves to build projects and share valuable tips in my Blogs. Feel free to connect with me on Twitter.

CSS Gradient: The Ultimate Tool

Ramesh chandra pola — Mon, 18 Oct 2021 16:04:43 +0000

Hello everyone! 🧡

Before we start Let’s stay connected.
GitHub⭐LinkedIn and also follow me here for more useful blogs.

In this article, we will learn what gradients are and also types of CSS gradients.

Let's get started🤩

What is a gradient?

Gradients are CSS elements of the image data type that show a transition between two or more colours. Gradients are very much important as they give good UX to the users. The most popular use for gradients would be in a background element. Backgrounds have a massive impact on a website’s design. So I hope this blog will help you to make beautiful coloured gradients.

The term background-image refers specifically to gradients. Because gradients have a stacking order, you can think of them as layered background images

Types of Gradients ✨

There are three types of gradient functions in CSS:

Linear-Gradient (created with the linear-gradient() function)
*Radial-Gradient *(created with the radial-gradient() function)
Conic-Gradient (created with the conic-gradient() function).

Linear Gradient

A linear gradient creates a band of colours that progress in a straight line.
A linear gradient is made up of two basic components: direction and color-stops.
To create a gradient, You must have at least two colors, but you can have as many as you want.

1. Direction

// Default direction will be from top-bottom if no direction is given 
  background-image: linear-gradient( #fc00ff, #00dbde);
// From left to right
  background-image: linear-gradient( to right, #fc00ff, #00dbde);

In the same way, we can change their rotation by specifying a direction.

// Diagonally, From corner to corner
background-image: linear-gradient( to bottom right, #fc00ff, #00dbde);
// Specific angle
background-image: linear-gradient( 70deg , #fc00ff, #00dbde);

2. Color stops

Color stops define what colors make up the gradient and optionally, where to put them.
If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point

  background-image: linear-gradient(#eb622c ,#fc00ff 70%, #00dbde);

Radial Gradient

Radial gradients are similar to linear gradients, except that they radiate out from a central point

// Simple Radial-gradient
  background-image: radial-gradient(#1CD8D2,#ff77cd);
// Radial color stops
  background-image: radial-gradient(#1CD8D2 12px,#ED4264 30%,#7474BF 60%);

Conic Gradient

Creates an image consisting of a gradient with color transitions rotated around a center point.

// Simple Conic Gradient
  background: conic-gradient( #EECDA3, #EF629F);
// Positioning the conic center
  background: conic-gradient(at 10% 30%, #fffb00 20%, #e246cd 30%, #27f1f1 40%);

Bonus ✨

Here are some websites which provide a huge collection of gradients where you can copy CSS codes.

My work here is done, We have Hundreds of beautiful colors out there. Now it's your work to use your creativity and make beautiful Gradients for your websites.🥳🧡

That's all for today! 😁 You reached the end of the article 😍
If you found this article helpful, please like and share it 🧡.

Don’t forget to share this article with your friends or colleagues. I'm Ramesh Chandra pola who loves to build projects and share valuable tips in my Blogs. Feel free to connect with me on any of the platforms below!🧡

GitHub⭐LinkedIn

Getting started with GitHub pages

Ramesh chandra pola — Mon, 11 Oct 2021 14:34:05 +0000

Hello everyone! 🧡

In this article, we look into How to get started with GitHub pages.🤩
Probably you already know how to use Git and GitHub. Suppose you built a complete project for your website and upload it on Github. Now you want others to see what you built, but you don’t know how to use GitHub pages, now I am here to help you all how to get started with GitHub pages.🙂
GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from your repository on GitHub, optionally runs the files through a build process and publishes a website, that are freely hosted on GitHub’s github.io domain.
Project sites whether owned by an organization or a user account, are unlimited.

Let's get started🤩

Now let's create a new repository and name it with your project name.

Now upload your files to this repository. You can store any code you like in your Github repository, but to use the GitHub Pages feature to full effect, your code should be structured as a typical website, e.g. with the primary entry point being an HTML file called index.html.
Now you need to turn on the GitHub pages feature for your repository.
To do this, Go to your GitHub repository and click“Settings".

Then select Pages from the sidebar on the left.

Now underneath Source, choose the "main" branch, and click save

Again go to the GitHub Pages section, and you should see a line of the form "Your site is ready to be published at https://username.github.io/projectname/."

If you click on this URL, you should go to your Project-site, provided the home page is called index.html — it goes to this entry point by default.
Though this looks empty but it’s just an example to give you an idea. Now you can deploy your own project.

My work here is done, Now it's your work to build creative projects and host it using GitHub pages🥳🧡

That's all for today! 😁 You reached the end of the article 😍
If you found this article helpful, please like and share it 🧡.

Don’t forget to share this article with your friends or colleagues. I'm Rameshchandra pola who loves to build projects and share valuable tips in my Blogs. Feel free to connect with me on any of the platforms below!🧡

GitHub⭐LinkedIn⭐Twitter

Top 15 VS Code Extensions For Web Development

Ramesh chandra pola — Wed, 29 Sep 2021 16:45:36 +0000

Hello everyone! 🧡

In this article, we look into 15 useful VS Code extensions for web development.

Visual Studio Code has become one of the highly used IDE now Because of its huge library of extensions that increase developer productivity. Here are Top VS Code Extensions Every Developer Should Use. If your favorites aren't listed here, comment down below. Would love to add those to this list.🧡

Here’s how to install an extension via the VS Code Marketplace:
Click on the “Extensions” icon in the Activity Bar on the side of VS Code. Alternatively, you can use the shortcut ( Ctrl+Shift+X ) to open the “Extensions” screen.

Let's get started🤩

1. Live Share

This extension helps you to start collaboratively editing and debugging in real-time, including integrated audio and text chat with your team. This provides you to begin pair programming, performing remote code reviews, driving interactive lectures, and more, without needing to leave Visual Studio Code.

2.Live Server

This is a useful extension for web developers as it enforces auto-reload and makes our work easier by displaying our code results immediately on Our web browser without refreshing the page and It prevents us from going through the stress of always saving our work in the editor and then refresh our browser every time before seeing changes.

3.JavaScript (ES6)

This extension provides various commonly used code snippets for JavaScript in ES6 syntax for Vs Code editor. It supports both JavaScript and TypeScript.

4.Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. This extension helps you identify which closing bracket belongs to which functions when you have more than one or two closing brackets.

5.Path Intellisense

VS Code plugin that autocompletes filenames. If You type the name of the file in statements and it will search and give you suggestions.

6.CodeSnap

CodeSnap provides you to Take beautiful screenshots of your code in VS Code!

7.Auto Rename Tag

This extension makes it possible for us to rename both opening and closing tags at once. when you change the opening or closing tag it will automatically change the other tag as well.

8.GitLens — Git supercharged

GitLens supercharges the Git capabilities of VS Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features)

9.Quokka

Quokka is used for testing JavaScript code in the Visual Studio code editor. With Quokka, you don't have to console.log()` everything. It works like a live server for your JavaScript or TypeScript code.

10.Peacock

we have used two editors open and coded in the wrong one. Peacock helps us differentiate between different workspaces by setting a different color theme to VS Code.

11.Turbo Console Log

Easily log variable names and their values to the console with a keyboard shortcut. Can be configured to include things like file name and line number in the log for easier debugging.

12.Markdown Preview Enhanced

You just start writing Markdown text, then this extension helps you with a live preview of the markdown file

13.CSS Peek

Allow peeking to CSS ID and class strings as definitions from HTML files to respective CSS.

14.Snippet Creator

There are many snippets extensions that help us saving time, but this extension helps you to make your own custom snippets. While creating, it auto-detects which language you’re using.

15.Random Everything

This extension generates random ints, floats, strings, words, etc.

That's all for today! 😁 You reached the end of the article 😍

I hope all that are listed here will increase your productivity. If you found this article helpful, please like and share it 🧡. What's your favorite VS-Code extension? Let me know in the comments 👇 😊

Don’t forget to share this article with your friends or colleagues. Feel free to connect with me on any of the platforms below!🧡

GitHub LinkedIn