DEV Community: Haris#

Take your Front-end Team's Productivity to the Next Level

Haris# — Tue, 14 Dec 2021 16:58:24 +0000

Whether it's a baseball team or a team of developers, at the end of the day, Team Leads are responsible for bringing the best out of them. Managing a team can be hard, but it doesn’t have to be. You can make sure that your team is performing best to its abilities by providing them with the right tools. Same is the case with blox. It can help you and your team build complete UIs in a jiffy. Here are a few reasons why you should be using blox to maximize the productivity of your Dev Team.

No need to reinvent the wheel

Sometimes the best way to start a project is to avoid making it from scratch. Why waste all the precious time of developers in making a component from scratch when it's already available out there. It is like they say: work smart, not hard. blox helps developers with its huge library of 1500+ drop-in ready components.

Building MVPs

For example you’re building a MVP as your next project. You need to put in as little effort as you can while making sure that it is capable of delivering the core functionalities. So, while developing its UI, you can simply use the drop-in ready components from blox. It will save your team from starting everything from scratch while enabling them to focus on the main features of the MVP.

Best Development Standards

It is very important that you keep yourself up to date with all the modern development practices that make the project and UIs stand out from the rest of the crowd. You then pass it on to your team so that they are also up to date with the latest trends. For example, Accessibility features are highly important to Google these days and Google encourages websites to give them the utmost priority for better ranking. Now what you can do is to ask your team to use the components from blox which are all WCAG (Web Content Accessibility Guidelines) compliant. This way your team is implementing the best development practices while saving time as well. Hence resulting in increased productivity.

Less Code. More Productivity

Memorising syntax for multiple different frameworks is hard. Every developer can tell you that. It is standard practice to look up the syntax from documentation and then implement it accordingly. While it gets the job done, it also takes a lot of time. And when the time comes, developers might have to do this all over again for a new component. This is where blox comes in. It offers 1500+ pre-made components that can fit the needs of every possible scenario. With just a click, developers can paste hundreds of lines of code into their project thus saving them the effort of going back and forth with the syntax implementation.

Between low-code & no-code

If you’ve been working with developers then it might not come as a surprise to you that they don’t like the concept of no-code. Most UI kits get the same treatment from multiple developers out there and blox might come off as just another UI Kit. But blox is more than just a UI Kit. It offers more convenience and is the sweet spot between low-code and no-code. It still allows the developers to make changes to the code according to their preferences and saves them from making every component from scratch. So it's an easy tool to pass off to your development team without getting any backlash.

Conclusion

Developers and Team Leads should always work closely together so that they can better understand each other. As a Team Lead, it's your responsibility to guide them in the right direction and give them access to the tools they need to boost their productivity. I would definitely pass blox off to my development team (if I had any lol). Let me know what you guys think. Would you recommend blox to your teams?

React practices for Beginners

Haris# — Thu, 09 Dec 2021 15:25:10 +0000

React is arguably one of the most used Frameworks out there today and everyday people are opting this framework for its UI first approach. It's safe to say that the React Library and the whole ecosystem has matured over the years and is still growing. So here are some practices that you can opt and avoid while getting comfortable in the React bubble.

1. Importing Order ++

Code readability is something that every developer should take care of and importing everything in order can help a lot with this. Usually its a good practice to import in the following order:
Built-in
Internal
External

2. JSX without Parentheses --

Always wrap a component in parentheses if it crosses more than one line.

3. Ternary Operators ++

To reduce the amount of lines in your code, you can opt for Ternary operators if the condition involves two values.

4. Function inside Render --

The best practice would be to keep the logic inside the renderer to a bare minimum and avoid defining a function in there as well.

5. Fragment ++

In order to save the Virtual DOM from creating unnecessary nodes, always go for a Fragment instead of Div. Just remove div from <div> and you’re left with a fragment i.e <>

6. Reserved Prop Naming –

Avoid the use of DOM component prop names when you have to pass props between as these names might not be expected by the others.

#7. Memo ++
To help the compiler avoid unnecessary rendering, you can go with Memo and React.PureComponent. It will drastically improve the overall performance of your application.

8. CSS outside Javascript --

Most of the developers know that organizing CSS is harder than Javascript so its best to avoid the use of raw Javascript during the development phase of React Apps.

9. Template Literals ++

For a nice and clean code, try using template literals for large strings. It can also reduce the string concentration in your code.

10. Explicit return --

Prioritize writing beautiful and easy to understand code. Instead of adding {return}, you can use Javascript’s implicit return to format your code in a nice way.

Conclusion

So this wraps up my personal picks for the best Practices for beginners starting out with React Framework. Let me know your favorites!

Happy Developing!

Improve your Lighthouse Score today

Haris# — Tue, 07 Dec 2021 15:57:33 +0000

As a developer, one of the most important things to consider during development is site speed. It can make or break an entire business and is directly related to all of the operations that happen on or off site. If site speed is really important to you as a developer, you might have heard of a tool called Lighthouse. If not then let’s discover what it is and why its really important to your development practices.

What is Lighthouse?

Lighthouse is a tool that was released by Google in 2018 to help developers improve the quality of web pages. It is an open source and automated audit tool that can be run against any website whether it is public or requires authentication. It basically gives the developers insights on how a web crawler would assess their webpage so that they can optimize it for the best performance.

How it Works?

Lighthouse can be run from a command line, as a node module or directly from Chrome DevTools. A web address is provided as an input and then Lighthouse runs an audit of the complete website against 4 different metrics. It goes through the structure, tags and performance of the website to collect data and then give it a score from out of 100. This score can expose several weaknesses that might be causing a huge problem to the User experience. This way you can identify the problems and then sort them out accordingly.

Audit Metrics

Lighthouse audits your website on 4 different metrics.

1. Performance

This is calculated on the basis of how quickly your website loads. Lighthouse provides you a score on the basis of several categories including metrics, opportunities and diagnostics. These diagnostics allow developers to improve their site speed by various different methods such as deferring the downloading of unnecessary resources.

2. Accessibility

This test determines how clearly the website is visible to the users. This test is very important as it holds the highest number of metrics at 35. Google really cares for accessible content and puts it on high priority in Lighthouse audit as well. To score higher in this test, Lighthouse requires you to add proper tags to all of the content present in your website for it to be as descriptive as possible.

3. Best Practices

There are a total of 16 metrics that are included in Best Practices and are targeted towards Website Security and the modern standards of Web Development. In order to score higher in this, developers need to stay up to date with all the modern development practices and avoid using resources from unsecure resources and not leaving the javascript libraries vulnerable.

4. SEO

The SEO audit is targeted towards all the basic practices of Search Engine Optimization. Every website should at least follow these simple SEO rules to score a 100 and to get featured at a good number in the Google Search Algorithm. After you’re done with optimizing your website, SEO offers multiple other improvements that should definitely be explored.

Tips to improve your score

Here are some tips that you can apply for a higher Lighthouse score:

All images should be optimized. I recommend using them in webp format for low size and better quality.
Remove redundant or unnecessary code
Follow the WCAG to improve accessibility throughout the design
Don’t use any unnecessary widgets or extensions
Load the FCP(First Contentful Paint) as fast as you can
Add descriptions to all links
Add images at multiple sizes so that only the minimum size is loaded
Minify your resources
Use ARIA or Alt tags for all images
Go for Server Side Rendering for faster load times

Taking care of each and every one of these metrics can be quite time consuming and tedious, that’s why I recommend using code snippets from blox as they come with baked-in accessibility with best development practices so that you can save the time and focus on your productivity. Let me know what tricks you’ve used to improve the score of your webpage.

Happy Developing!

Give more Attention to your README file

Haris# — Fri, 03 Dec 2021 10:28:57 +0000

Starting out as a Web Developer can be quite overwhelming. You are bombarded with so many different technologies to choose from. But one thing that can make you stand out from all the other people starting out is the discipline you put into your projects. And one of the best ways to add it in your projects is to write proper documentation of your process.

README.md

Readme is a text file that is used by developers to explain and introduce their projects to the external users. It contains the information that is needed to get acquainted with the corresponding project. It's used as a way to answer all the frequent questions that other developers might have regarding the project such as identifying the technology stack or installing it for personal use.

Why should I write Readme

Readme is usually ignored while adding projects to your repositories. As a newbie it seems unnecessary to write long lines that probably no one is going to read. But you might come back to your code after a while and that readme file is going to help you a lot in identifying what was what. A good readme file should be as good as the project itself.

Readme is very important in growth

Adding a readme file might seem as a small step as it is often ignored but this one small step can go a long way in your development career. Your projects on GitHub are basically your portfolio. It’s very rare that you start landing big clients after starting out so until you make a name for yourself, adding your projects in a presentable way to your repositories is the best way to showcase your talents to your possible clients. If you’re in a learning phase and trying to code on different test projects, then it's best to add them to your repositories with a good description. The best part about these descriptions is that even a non-technical person (maybe a recruiter) can get an idea of your talents from these files.

Tips on writing a good Description

Essentials:

Title:

Make sure to add specific and to the point titles that describe what the project is about

The project's aim:

Mention what you want to achieve by making this project. It's good to start developing with deliverables in mind.

Tech Stack:

Add what framework or library you’re using and it’d be super awesome if you add why you used it in the first place.

Installation

If your project is a software or an app, make sure that you add proper instructions on how to install it on whatever platform you’re providing support for.

Really Stand Out:

If you’re feeling a wee bit fancy and really want to make a good impression by going the extra mile, consider adding these sections as well.

Table of contents
GIFs of project in action
Scope of functionalities
Project status
Sources
Other information

Let me know what you guys think about Readme files.

Happy Developing!

Templates vs UI Blocks

Haris# — Tue, 30 Nov 2021 14:14:26 +0000

Starting out in the front-end development can be quite complicated with so many different options out there. They range from selecting a base framework to choosing between different CSS Libraries. But one thing remains constant. To get work done as fast as possible, most of us do lean towards the use of pre-made templates or ui blocks. So the question arises here, which should be used for the best productivity? Templates or UI Blocks?

Templates

Web Templates are pre structured web pages that allow developers to create full-fledged websites by injecting them with their own content. Templates are usually sold as complete web pages or websites and they follow a single structure across all pages. Developers can fast track their workflow by using templates since they don’t have to start anything from scratch. They help those developers a lot who are on tight deadlines and want to please the clients.

Pros:

It can save a huge amount of time
No need to spend a lot of money on building everything from scratch
There’s a huge market out there so you’re probably covered with whatever idea of the website you have in mind
Easier to switch to a new template since not much time and effort was spent on the first one

Cons:

Affects the learning curve
Not good for the brand identity
Very restricted in terms of your creative decisions
Code quality is not always up to the mark
No unique identity, your website can be similar to several other Brands
Host a lot of useless code if a section is not being used

UI Blocks

UI Blocks are basically snippets of code that make up a specific component that builds up a specific section. Unlike templates, code snippets are mostly used for just one section of the website. Developers can use these UI blocks within their existing projects just for one section that they do not want to develop from scratch. Let’s look at some of the Pros and cons of using code blocks:

Pros:

Easily customisable
Do not affect the learning curve as much as templates
Mostly Free
Not as restricting as templates
No redundant or useless code
Easy to integrate into existing projects
Less set up time

Cons:

Difficult to find the perfect code block
Market is lesser than Templates
Hard to find supported frameworks

Conclusion

Coming from the perspective of a beginner, I would personally take the side of UI blocks. It gives me the chance to develop new components from scratch that will help me in learning development, all while fast tracking my workflow. I can easily integrate a UI block into any of my projects so I can be done with my task. I can set up the easier sections myself and use the UI blocks for complex sections until I’m better equipped to tackle those. The only problem I was having with UI blocks was that it's hard to find the perfect code snippet online that supports the framework I’m currently using. Even if I found a UI block that fits my design preferences, it would not be in the current framework I’m using. Fortunately this problem was solved by blox since it gives me access to many different ui blocks within vs code and each of that ui block is supported for different frameworks including React, Angular and Vue. But I'd love to hear what's your take on this topic. Comment down below what you think about Templates VS UI Blocks.

Happy Developing!

Setting up VS Code for beginners

Haris# — Mon, 29 Nov 2021 16:46:59 +0000

VS code editor has arguably become the most popular tool for development. It is no doubt powerful, easy to get along with and very light. Customizing VS Code according to your needs and work can bring a massive difference in the performance of your development. But the question remains - Does it even matter how the code editor looks? Because after all it’s just a tool to get the job done. I personally think attention to details is very important, as a good looking working space or even a tool can greatly influence productivity. If I like how it looks, I’ll probably enjoy writing code even more. Also, for how long can you look at the same editor, I bet you get bored looking at the same thing all the time.

So, in today’s article, I’ll present to you my top preferences to customize VS Code editor for maximum efficiency.

Theme

Customizing themes according to your preference in VS Code is very well known in the dev community. Here are a few of my favourites that you can find and use for free through its marketplace.

Andromeda:

Andromeda is for devs who want to combine art with programming. It has one of the best UI with vibrant colors, dark background, etc. It has vivid colors and high saturation but if you like your interface to be minimal this is not the right choice for you.

Try Andromeda

Monokai Pro:

Monokai Pro is undoubtedly a professional visual studio code theme that comes with colors. This is the one I use the most as I love colors and I’m one of those devs who love to have a plethora of colors to play with while coding. Monokai Pro is colorful but you won’t get overwhelmed with colors. So, it is bright, clean, and perfect to code on.

Try MonoKai Pro

Abyss:

This is one of the most underrated themes but I enjoy using it for some reason. This is literally like art. Very eye pleasing caring colors which fantastically classify semantics of the code.

Try Abyss

Icons

Material Icons:

I recommend it to anyone who would like their VS Code workspace to look modern, spiced up, and professional. It helps me instantly find folders without any issue and looks beautiful. Best theme for highlighting important project directories. This is the only Icon theme I’ve used and I’m enjoying it so far. Let me know your favourites down in comments and I'll give them a try.
Try Material Icons

Fonts

Fira Code:

Fonts depend on personal taste. If you’re been writing code for years there is a chance that you might not want to change but for beginners it’s common to experiment and set one for yourself. Fira is one of my favourite fonts when it comes to coding as it makes it easy for me to read the code.
Get Fira Code

Monoid font:

Another favourite font is Monoid as it has extra-large punctuation marks and operators, apertures are large to help make characters more distinguishable, and ascenders and descenders are kept short and because it’s open source you can even tweak it to your tastes if you like.
Get Monoid

Hack Font:

Last but not the least, Hack. This is not the best but I like this font because it’s easy to read and is easily distinguishable.
Get Hack

Extensions

Prettier:

It is a tool that automatically makes your code more readable and consistent with your project's style guide. Prettier also integrates with your editor, so your code is tidied up every time you save your changes.
Try Prettier

blox:

blox is another extension that I prefer as a beginner because it lets you drop code snippets. It’s aimed at fast tracking the developer workflow through the ease of adding pre-built UI components without leaving your VS code window.
Try blox

Live Preview

Instead of switching between tabs/desktops everytime I want to see a change, Live preview hosts a local server where you can preview your web projects inside VS code. It has many preview features including HTML file previewing, Embedded preview, Persistent Server task with server Logging, External browser Previewing & Debugging, Console Output Channel, Workspace-less Previewing, and Multi-root Support.
Try Live Preview

Conclusion

So this wraps up my top picks to set up Visual Studio Code for Beginners. Let me know your favourite picks down in the comments. Hope y'all enjoy this article too.

Happy Developing!

VS Code extensions to increase your Productivity

Haris# — Wed, 24 Nov 2021 14:59:19 +0000

Hey everyone, here's another VS Code extensions post that'll help you boost your productivity and fast-track your workflow.

Tabnine:

It is the world's leading AI tool trusted by 1 million developers in almost all programming languages. Tabnine AI studies your code using deep learning to predict and create customized suggestions depending on how you write your own code. It can help you cut your coding time to less than half, and minimize the chances of mistakes. It’s local completion model runs on your machine keeping your code safe and Tabnine even works offline. Tabnine supports most of the popular libraries, frameworks and languages including Javascript, Java, React, Python, Vue, PHP, Kotlin, Angular, C / C++/ C# Rust & Typescript,

If you like to work in teams they have a pro version that is trained using advanced AI models. Tabnine is trained while you’re on the team project and even a small interaction with it will improve it’s AI accuracy improving team productivity.

Get Tabnine

Better Comments:

Better comments is an extension that can help you create “Human friendly” comments in your code. It is an example of how a small idea can help you increase your productivity and improve the quality of your work. Using this extension you can categorize your annotations into queries, alerts, Highlights and To do’s. This extension also gives you an option for comment style other than default comment style that can be selected through settings. Personally, It helps me spot important To Do's that might get skipped from my agenda.

Get Better Comments

blox:

blox is another extension that can help you improve your productivity as it lets you drop code snippets with a single click. It’s aimed at fast tracking the developer workflow through the ease of adding pre-built UI components without leaving your VS code window. blox is supported by React, Angular, Vue and TailwindCSS.

Get blox

Stepsize:

Stepsize helps you bookmark your code, report technical debt and code to refactor. If you find an issue while coding that needs to be fixed but you don’t have enough time to do it, In that case you can bookmark code and create TODOs straight in your IDE without compromising on your work or affecting your workflow. Stepsize also allows you to collaborate with your teammates on maintenance and refactoring work.

Get Stepsize

SonarLint:

Sonarlint is another extension for devs that lets you fix coding issues even before they exist. For example, just like spell checker, SonarLint points out bugs and Security Vulnerabilities as you write your code, with guidance on how you can fix them before the code is even committed. SonarLint in VS Code supports JavaScript, TypeScript, Python, Java, HTML & PHP code.

Get SonarLint

Hope y'all enjoy using these extensions!

Happy Developing!

How no-code solutions can actually help coders

Haris# — Tue, 23 Nov 2021 17:11:35 +0000

Over the past few years there’s been a growing debate about the no-code or code-less tools and platforms. Many people have mixed thoughts and feelings when it comes to this and the majority likes to believe that these platforms are mainly for non-technical builders. No doubt these platforms serve non-technical builders but low-code and no-code solutions are also tools for developers themselves, making their own jobs trouble-free and facilitating them to compose business related prefabricated application components rapidly.

No-code or code-less tools help them build fast but it in any way does not mean that functionality or performance needs to be sacrificed for development speed. Yes, no-code and low-code make it far easier for non-technical developers to bring colors to their ideas, but “building faster” means much more than that. These tools can help developers focus on the elements of true differentiators like UI design and logics etc. once a simple task is out of the equation. This way you can also spend more time experimenting with new and innovative ideas and actually think about the end result rather than being stuck in the process. It's not only about what you’re providing to the users/customers but also about how you’re giving back to your own community, and you can always contribute back to your community for making their work easy and less time consuming for them.

Conclusion

There are so many advantages of code-less or no-code tools. Using these tools can give you the motivation to work on projects that you’ve been ignoring for too long as they’re very time consuming. It also helps non-technical individuals to build something of their own without thinking about how they’re going to do it. Most of all it helps the dev community and teams by taking the burden off their shoulders and focusing on what needs to be focused on. So, ultimately in the end everyone wins, dev, designers and entrepreneurs etc. No-code or code-less tools opens doors for everyone. Here are a few of my personal no-code tools that I’ve been using and any designer, developer or entrepreneur can use to fast track their workflow.

Personal Favourites

Following are some of my favourite no-code or code-less solutions:

Hope y'all like these too.

Happy Developing!

Best VS Code extensions for Beginners

Haris# — Tue, 16 Nov 2021 15:53:19 +0000

Hi everyone,
I’m Haris and I’m a newbie to the developer realm. Today I'd like to share my favourite VS Code extensions that will definitely help you if you’re starting out like me.

Prettier

Prettier is a code formatter that greatly improves readability in teams. It's a tough job to create consistent code formatting in large codebases. As soon as you install prettier in your project, it gets implemented throughout your dev process. It works as automatic formatting on save or while you’re typing. Prettier is a well renowned extension that saves time and improves readability for teams and individuals as well.
Check out prettier here:
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Live Preview

Live preview hosts a local server where you can preview your web projects inside VS code. It has many preview features including HTML file previewing, Embedded preview, Persistent Server task with server Logging, External browser Previewing & Debugging, Console Output Channel, Workspace-less Previewing, and Multi-root Support.
Try Live preview:
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

Settings Sync

Settings Sync allows you to maintain a consistent IDE experience across multiple machines by downloading your extensions and reconfiguring all of your settings by saving everything via GitHub. You can keep everything in sync by adding this extension in your VS code.
Check out Settings sync
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Bracket Pair Colorizer

Bracket Pair colorizer identifies different brackets through different colors. You can easily define which characters to match, and the colours to use. You can also configure custom bracket characters. Additionally, it becomes pretty simple to configure a list of colors, as well as a specified color for orphaned brackets.
Check out Bracket Pair colorizer:
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

blox

blox is a VS code extension with a built-in library of 1500 code snippets. It lets you drop whole chunks of code blocks with a single click. It supports different frameworks including Tailwind CSS, Angular, React, and Vue. It will also support Alpine.js, Svelte, Laravel, Bootstrap, and Material UI in the future.
Check out blox:
https://marketplace.visualstudio.com/items?itemName=vsblox.blox

Live Share

Live Share allows developers to collaborate on projects where they can edit and debug together. Developers can join different sessions and receive all of the editor context from another developer's environment that ensures they can start collaborating immediately, without the need to clone any repos or install any SDKs.
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

So this sums up the list for now, do share your experience if you’ve given any of these a shot.
What are your favorite VS code extensions that you use on a daily basis?

How to make a TailwindCSS SaaS Landing Page in record time

Haris# — Fri, 12 Nov 2021 15:38:11 +0000

Hi everyone,
My name is Haris and today I’ll be showing you how to make a SaaS Landing Page with TailwindCSS within 5 minutes, and the best part is that it’ll be totally free! So, let’s jump right in!

To make this Landing Page, we’ll be using the blox extension for VS Code. You can grab it for free here on VS Code Marketplace.

Let's start things off with a hero section. I'll be using Center Aligned with Image for this.

Next up we’ll add a Feature section. Here you can highlight the main features of your product. For that purpose Feature 7 will work just fine.

After the feature section, we can add a Pricing section to showcase the offerings of the product. We’ll go with 3 Cards with Yellow Hover

We’ll close things off with a CTA and I think Right Aligned Avatars with Gradient will look perfect for this.

And just like that, we’re done with the first draft of the SaaS Landing Page. Here’s how the end product looks.

Since blox offers support for other frameworks like React, Angular and Vue, the same page can be developed for those projects as well. So with just a couple of clicks, we can set up the structure for our TailwindCSS landing page and make modifications according to the project from that point onwards. Hope this helps you save your precious developer hours.

You can access the page that I made here at: https://github.com/vs-blox/examples

Happy Developing!

I guess I'm getting Fired...

Haris# — Wed, 10 Nov 2021 15:52:37 +0000

Hi everyone, hope y'all are doing great (unlike me). I’ve recently joined the marketing team for blox. I’ve been tasked to get at least 100 users on board.

Well, let me be more specific.
I NEED TO GET 100 DEVELOPERS TO DOWNLOAD OUR EXTENSION.
I’m completely lost and I have no idea what to do. Please let me know where are the developer communities that are on the lookout for great new content and what gets your attention because I just can’t get past the 15 users that I already have.

The way my boss described this product to me, it looked pretty cool and I think it can actually contribute towards the developer experience so I thought marketing this would be easy. Little did I know that soon it’ll become a pain in the a** for me.

Just for the sake of my internship, help a brother out and give this extension a go. You can get it here at https://www.vsblox.com/