DEV Community: notmahnoor

The Formula of Becoming A Highly Effective Programmer

notmahnoor — Mon, 27 Dec 2021 16:14:39 +0000

Programmers are often looked at like problem-solvers, sitting at their desks with their backs hunched, and upgrading their set of skills to reach solutions in specific programming languages. But is problem-solving the only thing that makes a good programmer? Maybe. Maybe not. Below is a list of things that are common in every effective programmer.

Being more receptive than defensive

As programmers, our code is our child, and if somebody criticizes even a little part of it, we get frustrated and defensive. We give in to vanity and think that our code is perfect. But a good programmer takes that harsh criticism to construct something better than what he/she did before. And that’s true! Keeping yourself open to criticism may lead you to learn new things and make your code much, much refined.

Taking care of yourself

There is a system for everything in this universe. From the way you conduct business to the way you stay alive and functioning, everything has a system and different checkpoints to get to the goal. But if your system starts to fail, so does everything else.

As programmers, we are glued to one or multiple screens throughout the day, working out solutions and trying to make the deadline, often forgetting to give a break to our mind and our body. With average screen time between 7 to 9 hours, we forget that our ‘screentime’ consists of sitting in the same position for hours, our brains glued to one thing only. This might not show that it’s taking a toll on our health, but it all becomes clear years down the line when we’re complaining about our health.

To combat this issue, you can:

Take a 5-minute break in every hour you work, and if you somehow can’t, accumulate the minutes to take a break in the next hours.
Get some vitamin D out in the sun in your break, and give yourself time to breathe and relax. Maybe play Halo Infinite or just stretch, depending on what you want to do.
Hydrate yourself with a glass of water or juice. Take a bite of the chocolate bar you’re saving.

Knowing that you need help

Programmers are not gods. No one is. And if you’re stuck on a problem that is not letting you move forward, and if you’re wasting a lot of time trying to find a solution, you need to be able to acknowledge the fact that maybe asking for help would be much more effective.

So instead of staying focused on one problem for hours, try asking a coworker or fellow developer for help. This will enhance your knowledge for when you arrive at the same kind of problem in the future, and will improve your communication skills. And sometimes when nobody is available to help you, you can divert your efforts and attention to some other task that is equally important. After some time, you’ll either find help or return to the problem with a different perspective.

Saving Time

Kind of related to the previous head, saving time is crucial for any programmer. Most of us have projects that we need to get done before we pass the deadline, and would absolutely spend our nights glued to our screens if we don’t finish it. So instead of letting your physical and mental health take the brunt, try using extensions like Kite, blox, Path Intellisense, and as many extensions as you can to save yourself mounds of precious time that you could invest in something more important.

Not being a show-off

Sometimes a code is supposed to be very simple and easy, but is being made complex just for a programmer to prove that he/she can do it. I’ve come across so many codes that are usually very simple, but look like a thick jungle because of a programmer’s bloated ego that needs to be shown off and validated/applauded.

So, don’t be that. A good and effective programmer can be recognized in a bunch without needing to show off.

In conclusion…

Try and follow these pointers, and let me know if they help. And if there is something else you do other than these, please comment and help your fellow devs out!

7 Resources to Level Up your Web Development Game

notmahnoor — Tue, 21 Dec 2021 11:23:53 +0000

Web development stands for building and maintaining websites, whether a static one or a complex one. A static website doesn’t require a lot of work, but complex web applications have huge databases and real-time, data-intensive applications like eCommerce and social media apps.

A front-end developer designs the part of the web that users interact with. Everything from user navigation, fonts, and colors to drop-down menus and sliders. All of these are built using JavaScript, CSS, and HTML.

A back-end developer powers the front-end part of the website so it could actually work. From storing massive amounts of data to maintaining the technology that powers all components on a website, a back-end developer does it all. Languages like PHP, Ruby, Python, Java, etc. are employed at the back-end.

And a combination of both front-end and back-end makes a full-stack developer.

Web development has recently risen up in high demand in the post-pandemic world where many businesses and services have shifted online, increasing the need for web developers.

And so, this is the perfect time to get your hands dirty with learning web development. Below is a list of websites and platforms to get you started!

Codecademy

Codecademy offers free beginner-level courses as well as paid training on a variety of languages like Java, JavaScript, PHP, Python, HTML, CSS, Kotlin, and SQL amongst others.

Freecodecamp

Freecodecamp offers a huge library of open-source online coding bootcamp along with free training and certification on a variety of web dev skills. With about 40,000 working in big firms all around the world, all of freecodecamp’s courses are free for the taking.

Scrimba

Scrimba is an online learning platform that teaches web dev through interactive screencasts and live events. It offers free and paid courses both.

Road Map

One of the biggest challenges a developer faces is not knowing where to start or the path to achieve their goal. Road map provides visual guides containing topics, tools, and all the necessities that a developer would need to start his/her journey of web development.

W3Schools

W3Schools provides a variety of free online learning resources. It features languages like HTML, JavaScript, CSS, Python, and SQL amongst others.

Udemy

Udemy is a massive open online course provider with multiple courses for you to take advantage of. You can learn Python, Excel, AWS, Web development, JavaScript, etc from the 183,000 online video courses available on the platform.

Frontend Mentor

Frontend Mentor features challenges of different difficulty levels; from beginner to advanced, this platform provides a fun and well thought-out way to learn web development. It also provides Figma design files and image sets.

Epilog

Go through all these websites and choose the one that suits your requirements in the best way possible. And keep in mind that writing good quality code not only leads to high quality software, but also leads to growth and personal satisfaction.

If you found this article helpful, these might help you, too:

Kickass VS Code Extensions To Make Your Life Easy

notmahnoor — Fri, 17 Dec 2021 11:01:30 +0000

Here is a list of some of the extensions that could be useful for primarily front-end developers who want to get the most out of their VS Code. You might be familiar with a lot of them, or you might be not. Either way, these extensions can drastically improve your workflow and make your IDE more attractive.

For Faster Coding

Kite: You just have to press the TAB button to have your code auto-completed, saving you a ton of time. Kite works with almost every language!
Live Server: A live reload feature reflected on a local server with whatever it is you’re coding.
Live SASS Compiler: Compiles your SASS/SCSS file to CSS files in real time all with a live browser reload.
blox: helps you access the full code of pre-built UI kit components with just a click.
Code Spell Checker: This will tell you when you’ve mistyped something in your code.
stylint: Amazing to clean up your messy CSS.
CSS Peek: Manages pull requests and conducts code reviews in your IDE with full source-tree context.
Path Intellisense: Automatically suggests paths you’re currently working with if you forget the location of your image or you need to fill ‘href’ and ‘src’ tags.
DotENV: Supports and highlights .env files.

For Easy Reading

Beautify: de-minifies and properly spaces your ugly markup.
Prettier: Very similar to Beautify, Prettier makes your code pretty and more readable like placing brackets and properly spacing everything automatically.
Better Comments: Creates human-friendly comments in your code.
Bookmarks: Helps you navigate your code, jumping from one section to the other easily.
Log File Highlighter: This gives your VS Code .log file support so the next time you’re reading a log dump, you won’t go bonkers.
MetaGo: Focused on more keyboard usage with fast cursor movements/selections.
Material Icon Theme: Adds visual icons for every file you’re currently using to help you keep track of all the files.
Bracket Pair Colorizer 2: Helps you find where one bracket starts and ends, and helps you understand the structure of a function.
Image Preview: Helps you check if you’ve referenced the correct image/icon by showing a preview on hover and in the gutter.
Rainbow Brackets: Highlights the current bracket-set you are in to identify your location easily.

Other Fun Extensions

Discord Presence: Displays your discord status as ‘coding’ so your friends know when it’s best to not disturb you.
Settings Sync: Syncs your settings, themes, snippets, launch, file icons, keybindings, extensions, and workspaces between multiple VS Code instances using a private gist.
Polacode: Highlights your code and snaps a clean screenshot with your code’s theme colors. Great tutorials and documentation.
One Dark Pro: This is for when you don’t quite like VS Code’s default design theme. You can configure everything as you want it—font size, italics, etc.

A lot of these have been tried and tested by me and my fellow devs, so if you spot the one that's your ideal choice and a choice you can’t live without, give a hoot! And if this article helps you find ‘the one’ for you, please comment and let others know so they could hop on the bandwagon as well!

Build Your UI Faster With These FREE UI Kits!

notmahnoor — Thu, 16 Dec 2021 08:42:06 +0000

Sometimes, as UI designers, it is asked of us to churn out quick and fast, decent UI designs, and the emergence of Tailwind CSS has already made our jobs easy. But it could be much easier if only we could use pre-built components to plug into our code.

So here it is. I’ve done the hard work so you don’t have to. Below is a compiled list of FREE UI Kits to help you achieve the completion of your project within a short time frame.

1. Mamba UI

Mamba UI provides various open-source collections of beautiful UI elements to help make your website in minutes for free.

2. Tailblocks

Tailblocks contains 60+ codeblocks that are responsive, have different color variations, and supports dark mode.

3. Kimia UI

Kimia gives you customizable UI kits that are compatible with Gatsby, Next.js, and create-react-app. You just have to copy and paste the component you want to use.

4. Tailwind UI Kit

This Kit gives you 250+ free tailwindcss components with 30+ templates, all compatible with React, Angular, and VueJS.

5. Tail-Kit

Tail-Kit gives you 250 components and templates. It is also compatible with React, VueJS, and Angular.

6. Meraki UI

Offers decent tailwindcss components that support RTL languages, and is fully responsive via Flexbox and CSS Grid.

7. Salvia Kit

This kit is fully customizable, containing 4 variants: create-react-app, Next.js, Vue, Next.

So, yes. For your many thanks and appreciation gifts, you can post them all to 221B, Baker Street, and I’ll be there to receive them all with open arms. Until next time, fellow devs!

[that's me btw, after making my life easy with UI kits lol]

7 Most Popular APIs of 2021: A Gimmick or Legit?

notmahnoor — Thu, 09 Dec 2021 17:03:21 +0000

API stands for Application Programming Interface. It has been popular for a long time, and is an essential component of the data-driven ecosystem and CI/CD. As APIs get more fame every passing day, and with everything that brings hype with it, people capitalize on all the attention, making it hard for us to differentiate between APIs that are actually good and APIs that are just popular gimmicks.

So as 2021 is coming to an end, let’s see what the top 7 APIs of 2021 are, and I’ll let you judge in the comments what APIs you think are legit and what you think deserve a downvote.

1. Skyscanner API

Since Google self-deprecated their Google Flights API, the market has been open for developers to fill the vacuum of a travel app. So the most popular API of 2021 is the Skyscanner API, a search engine for travel, hotels, flights, car rentals, etc. It has nearly a million downloads, and it’s free.

Endpoints:

Browse dates
Browse quotes
Browse routes
Create session
List places
Poll session
Currencies
List markets

2. OpenWeather API

OpenWeather API is the official API of OpenWeatherMap, a company which has been dispensing weather stations with the help of their data since 1979. They gather data through over 40,000 weather stations all over the world.

Endpoints:

Current weather data
Daily forecast weather data
Forecast weather data
Search weather data

3. API Football

Also known as Soccer to the rest of the world excluding the US, API-Football brings you all the football-related stats that you could ask for.

Endpoints:

Live scores
Fixtures
Standings
Tracker
Sports betting
Creating your fantasy football

4. Cocktail DB API

This API features different recipes of cocktails concocted by people all over the world. It features all kinds of drinks, alcoholic and non-alcoholic.

Endpoints:

Ingredients
Flavors
Origin of drinks
best drinks
Non-alcoholic drinks

5. REST Countries

This API provides useful information about a country of your liking. It is completely free, and is being used by over 1200 people.

Endpoints:

Names
Country codes
Currency
Famous Places

6. Yahoo Finance

The Yahoo Finance API offers financial records and data to people who work closely with economics. It is free to acquire.

Endpoints:

Sorting your watchlist
Sorting your portfolio
Financial news
Stocks

7. URL Shortener API

URL Shortener API is an integral utility API for the backend, and is responsible for one of the many mundane tasks a person has to do daily. It is free and can make up to 3 requests in a second.

Endpoints:

Shortened URL

These APIs are well-recommended and used worldwide, but are they a hoax or are they legit? Let’s hear what you think.

5 Popular Front-End Development Tools

notmahnoor — Thu, 09 Dec 2021 08:29:41 +0000

Front-end Development tools help a developer to make various interesting website layouts and apps. With drag and drop elements and multiple built-in features, development tools help make your life easier. With various open-source and commercial software floating in the market, I’ve compiled a list of the top 5 so you don’t have to research much.

Envato HTML Templates

Envato provides you with 1000+ ready-made HTML5 templates to help you with developing a web page or app. Offering optimized CSS and JS to improve your Page Speed scores, these templates can be power-customized to your liking.

Features:

Templates on Vuejs, Bootstrap, Angular, Laravel, and other popular frameworks.
SASS templates that are responsive with multi-file upload options
Light and dark options
Widgets, charts library, chat, and email apps support
Lifetime updates for FREE
Quick support and documentation through forums
Gazillion color options

Creative Tim

Creative Tim offers Bootstrap based design elements that help you develop web pages faster than normal. You can develop web and mobile apps using this.

Features:

Prompts you to start with pre-built example pages.
Saves your time, and allows you to focus on your business model.
Offers easy to use admin templates.
Offers pre-made sections and elements.

blox

blox is a VS Code extension that lets you drop code snippets with a single click, making your web development faster with the ease of adding pre-built UI components when making websites, web apps, landing pages, etc. It supports React, Angular, and Vue with TailwindCSS. Alpine.js, Svelte, Laravel, with Bootstrap, and Material UI are soon to be released.

Features:

1500+ pre-built codeblocks.
Ridding you of the hassle to memorize syntaxes.
Available within VS Code so you don’t need to switch applications.
Adaptive design blocks.
Cross-border compatible.

Kite

Kite is an IDE for LaTex Editor that makes coding faster by auto-completing multiple code lines. It supports more than 16 languages.

Features:

It is FREE.
Offers Java documentation.
You get a tooltip on mouse hover.
Provides support via email.
Uses machine-learning for Java language.

Sencha Ext JS

Sencha is a very comprehensive framework of JavaScript for building data-intensive, cross-platform web and mobile apps. It offers 140+ pre-built and tested high-performance UI components

Features:

140+ UI components.
100s of user extensions available via user community.
Flexible and responsive layouts.

If you guys use other tools and think they’re better, feel free to comment and let the community know what they’re missing out on! Cheers! :)

5 Tips For A Responsive CSS Design

notmahnoor — Wed, 08 Dec 2021 15:32:27 +0000

Hi there! I’m here with some tips for you guys! Below are some of them that I personally use to make my websites responsive.

Padding/Margin

We usually use a lot of padding to make our websites look attractive and interesting. But you have to keep in mind that, when you’re making your website responsive for mobiles and tables, try reducing the existing padding/margin.

Box Sizing

Using box sizing on HTML with a percentage width will solve a lot of problems that padding causes. Box sizing with a percentage width will keep padding in mind as opposed to you having to adjust the width during padding.
{box-sizing : border box;}

Flex-wrap

Flex-wrap helps you to align your HTML elements like <div>,<p>, and forces those elements on a single line or wraps them on multiple lines according to the width.

em/rem/ percentages

Try to always use em/percentage/rem instead of px the next time you’re trying to make a responsive design so that texts and image sizes would adjust according to the device that is being used.

Media query

To set a graphic according to the breakpoints (refers to the width where the website starts to look distorted), use media query to set the width and height.

If you know of other tips & tricks, let me and our fellow devs know so we’re all better off when we make our next responsive designs. Cheers! :)