-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog-two.html
262 lines (209 loc) · 9.98 KB
/
blog-two.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="Himadri Shah" />
<meta name="description" content="Personal Portfolio of Himadri Shah" />
<meta name="keywords" content="Portfolio, Web Development" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<!-- Font Awesome Downloaded -->
<link rel="stylesheet" href="all.min.css" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap"
rel="stylesheet"
/>
<title>11 non-coding tools I use almost every day!</title>
</head>
<body>
<nav>
<ul class="nav-links">
<li><a onclick="window.location.href='index.html'">Home</a></li>
<li><a onclick="window.location.href='about.html'">About</a></li>
<li><a onclick="window.location.href='projects.html'">Projects</a></li>
<li>
<a
onclick="window.location.href='blogs.html'"
style="border-bottom: 2px solid var(--blue)"
>Blogs</a
>
</li>
<!-- <li><a onclick="jumpToDiv('contact')">Contact</a></li> -->
</ul>
<!-- <div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div> -->
</nav>
<div class="blog-wrapper">
<main class="blog-page">
<h1>11 non-coding tools I use almost every day!</h1>
<img
src="./img/blog-tools.jpg"
class="blog-movie-image"
alt="Do more"
/>
<h2>Introduction</h2>
Dev life isn't just about writing code all the time. It also includes
using the apt tools and resources that can make your job easy! So, I'm
gonna reveal my go-to tools/websites for a specific task that I use
daily, and they definitely make my life hassle-free.
<p>Let's dive in!</p>
<h2>1. Time Stats:</h2>
<a href="https://wakatime.com/">WakaTime</a> is a productivity tool that
keeps you updated about the amount of time you spend on coding. It has
plugins for almost all code editors. It also gives the progress rate and
your average coding time along with the percentage of languages used in
your projects. It is a great tool to track your progress. You also
receive a weekly email report depicting your coding stats.
<h2>2. Color Palette:</h2>
<a href="https://coolors.co/">Coolors</a> is an awesome color scheme
generator. Whenever in doubt, I always use Coolors to decide on a color
combo for my project. One can get some ideas by just having a look at
the wide range of color palettes listed there. It has some great
in-built features like palette generator, color picker, contrast
checker, etc. One can also explore and make beautiful gradients using
it. Coolors also provides a
<a
href="https://chrome.google.com/webstore/detail/coolors-for-chrome/paebljbhhfgngkcldmbcogmkgegjgmbg"
>Chrome extension</a
>
which makes it easily accessible.
<h2>3. Illustrations:</h2>
<a href="https://undraw.co/illustrations">Undraw</a> is my all-time
favorite website to search for illustrations for my projects. They
provide a variety of illustrations on almost every topic that you can
think of! You can download them in SVG and PNG formats. You can also
customize its colors according to your projects' color scheme.
<h2>4. Pattern Generator:</h2>
<a href="https://www.magicpattern.design/">Magic Pattern</a> is a unique
pattern generator for non-designers. It allows you to generate amazing
patterns that you can use for your next project. Background pattern
generator, blob generator, and doodle generator are the free tools
available.
<h2>5. Icons:</h2>
<p>I have a couple of favorite websites when it comes to icons.</p>
<br />
<p>
<a href="https://fontawesome.com/">Font Awesome</a> has a great deal
of free and paid icons which can be used in projects. It provides
different styles for each icon and also has documentation for anyone
to get started.
</p>
<br />
<p>
<a href="https://devicon.dev/">DevIcon</a> is a website which I
recently discovered and I am loving it. I use it specifically to get
icons for programming languages and tools. The icons have multiple
versions and can be downloaded in SVG format also.
</p>
<h2>6. Fonts:</h2>
<a href="https://fonts.google.com/">Google Fonts</a> is an everyday tool
for developers, which provides a wide variety of font styles. You can
filter the never-ending result by category, language, and font property.
For every font, there are various styles like bold, italic, and font
pairings are also provided.
<h2>7. Animations:</h2>
<a href="https://lottiefiles.com/">LottieFiles</a> provides a ton of
lightweight and scalable animations for your website and apps. You can
change the speed, background color and also customize each frame of the
animation as per your need. It can also be used in popular WordPress
plugins such as Elementor.
<h2>8. Code Snippets:</h2>
<a href="https://carbon.now.sh/">Carbon</a> is one of the most popular
platforms to convert normal code into attractive code snippets. You can
customize its theme, background color, and appearance. Supported formats
for exporting are SVG and PNG.
<h2>9. Note Taking:</h2>
<a href="https://www.notion.so/">Notion</a> is undoubtedly one of the
best note-taking apps out there. It comes with a variety of features
which makes it your go-to app for almost any sort of note-taking or task
scheduling. You can keep a track of your notes all the time by using its
desktop and mobile apps.
<h2>10. Deployment:</h2>
<a href="https://www.netlify.com/">Netlify</a> is a deployment tool that
you must be surely aware of if you're a dev! It provides web hosting
services for free, with a bandwidth of 100GB. You can host multiple
websites using a single account, by either uploading your local folder
or connecting a GitHub Repository. You can also change the site name and
use other domain names.
<h2>11. Responsive Test:</h2>
<a href="https://websiteresponsivetest.com/">Website Responsive Test</a>
is an online responsive tool that checks the responsiveness of your
website across multiple devices with different screen sizes. Enter your
website URL and preview your website on various devices to know where
your website needs improvement!
<br /><br />
<h3>Some off-track but totally worthy resources/tools 👇</h3>
<h2>Web Skills:</h2>
<a href="https://andreasbm.github.io/web-skills/">Web Skills</a> is a
great website that gives a list of skills needed for every developer
domain. Along with it, the resources required for acquiring those skills
have also been provided.
<h2>Roadmap:</h2>
<a href="https://roadmap.sh/">Developer Roadmap</a> is a step-by-step
guide for learning different tools and technologies. It is after seeing
such roadmaps that you realize where you stand!
<h2>App Ideas:</h2>
<a href="https://github.com/florinpop17/app-ideas"
>Florin Pop's App Ideas</a
>
contains an awesome collection of app ideas to get inspired for your
next project. The projects are divided into 3 tiers(beginner,
intermediate & advanced) based on the knowledge required to complete
them. A brief introduction, user stories, resources, and example
projects have been provided for every project.
<h2>Resume Builder:</h2>
<a href="https://flowcv.io/">FlowCV</a> is one of my favorite resume
builder sites because it is fully customizable. It provides you with a
ton of resume templates, and even if you choose to build your resume
from scratch, it provides plenty of customizable options. Apart from the
resume, it also assists you in preparing a cover letter, personal
website and keep a track of all your job applications.
<br /><br />
<p>
That's it, thanks for making it to the end, hope you discovered some
great tools.
</p>
<p>Have a great day!</p>
</main>
</div>
<div class="contact-section">
<div class="title">Connect with me!</div>
<div class="contact">
<a href="mailto: [email protected]" title="Email"
><i class="fas fa-envelope-square"></i
></a>
<a
href="https://linkedin.com/in/himadri2110"
target="_blank"
title="LinkedIn"
><i class="fab fa-linkedin"></i
></a>
<a href="https://github.com/himadri2110" target="_blank" title="GitHub"
><i class="fab fa-github-square"></i
></a>
<a
href="https://twitter.com/himadri2110"
target="_blank"
title="Twitter"
><i class="fab fa-twitter-square"></i
></a>
</div>
<div class="footer">Made with 💚 by <u>Himadri Shah</u></div>
</div>
<!-- Scroll to Top -->
<div class="scroll-to-top">
<i class="fas fa-chevron-circle-up" onclick="scrollToTop()"></i>
</div>
</body>
</html>