Let us assume we are creating a React Project. When we are in the requirement phase and are discussing the architecture, We will ensure to discuss more on CSS styles in our project. We indeed have multiple approaches to go ahead in writing styles and each style requirement would be unique based on the use cases of our project.

We could either go ahead with creating our own styles through Inline Styles, Plain CSS Styles, SASS/SCSS(Synthetically Awesome Style Sheets), CSS modules, or CSS in JS. Or We could go ahead with frameworks that comprise several CSS stylesheets ready for use by web developers and designers. The stylesheets are prepped for use for standard web design functions: setting colors, layout, fonts, navbars, etc. Few of them include BootStrap, Material UI, Ant Design Library, Tailwind CSS, Bulma, etc.,

Since I am focussing here more on building on an open source project for Real Dev Squad which definitely involve us learning details and building projects rather than using pre-built frameworks where we get built components. I would be focussing on

1. CSS
2. SASS/SCSS
3. CSS in JS

CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

We have observed in most react side projects, We create stylesheets and end up importing them to our component. It is easy and common practice for most of beginners who are learning React.

Pros:

• Developers get a chance to strengthen their CSS skills
• We get to utilize all the tools from modern CSS
• Developers who have started learning CSS would be able to contribute as well

Cons:

• We end up creating a lot of boilerplate code which are already available via frameworks
• We need to ensure to follow proper prefixing and variable class names generation
• High possibility of affecting other classes if and when we try to modify the tags/elements since it is not scoped.

SASS/SCSS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. It makes use of semicolons and brackets like CSS.

SASS allows us to write styles in two different kinds of stylesheets, with the extensions .scss and .sass.

SCSS styles are written in a similar syntax to normal CSS. however, SASS styles do not require us to use open and closing brackets when writing style rules. SCSS also provides us built-in variables( $base-color: #c6538c;), nesting, extends, mixins, partials, operators

As we observe above, a few key points to notice here would extensively use of variables, and mathematically calculated generated values, better nesting abilities. Most of the industry-grade projects which I have noticed have been following SASS/SCSS for the above purpose.

Pros:

• SCSS adds structure to your styles, no matter how many files are created, you can compile them into one CSS file, so you have the freedom to organize the project however you want.
• The @import keyword in SCSS allows you to import an SCSS file into another SCSS file
• Easier following for variable name convention, better nesting support

Cons:

• Need to install node-sass@4.13.1 and set up the script to compile.
• It does involve more knowledge of SCSS to contribute to the project

CSS in JS

CSS-in-JS libraries provide us with a new approach to writing CSS. They aim to tackle the limitations of CSS, such as the lack of dynamic functionality, scoping, and portability, providing better performance when it is Server Side Rendered, which we can build as an object or function. We could use Styled components, StyledJSX, and Emotions which support CSS in JS.

Pros:

• CSS in JS provides a more atomic way to scope styles only to the components that use them
• Inlining the styles during SSR provides an increase in page loading performance metrics such as FCP (First Contentful Paint), because rendering is not blocked by fetching a separate .css file from the server
• Dynamic Styling is easier to implement as changes in styles could be controlled by props
• Presence of unused styles won’t affect performance

Cons:

• An additional runtime library is required for handling dynamic styling in the browser
• We end up writing CSS in JS, thus few specific properties which are exclusive to modern CSS would work differently.
• CSS-in-JS also often makes little sense if your page has limited JavaScript to begin with

As I believe I have mentioned before, we need to closely observe our problem statement and how useful the above-mentioned styles would help in scaling the project before proceeding with choosing one.

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️. The Source of images is from RDS and google😅

Happy Coding :)

As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices — Paul Irish, Chrome Developer Relations

As web developers or customers we have all been introduced to a scenario where we check for particular web apps or websites and observe an endless (more than 10 seconds 😛) loading screen. We either wait or end up refreshing the screen or check for internet connectivity.

Async and Defer are boolean attributes that are used along with script tags to load the external scripts efficiently into our webpage.

Let us observe what happens we normally have a script tag, one with an async attribute in the script and one contains the defers attribute.

During the process of parsing of HTML line by line, when it encounters the script tag, the browser would fetch the script from the network, then execute it before continuing with the HTML rendering again. The key point to observe here the browser stops rendering the HTML unless the script tag is fetched and executed.

To make sure that HTML rendering and synchronous scripts are not blocked from executing and their critical work is completed more quickly, we rely on using async and defer attribute in the script as it would help in the optimization of the webpage.

When it comes to the script having an async attribute, as soon as the browser observes the script with the async attribute, the browser would fetch the script parallelly while the HTML is being rendered, as soon as the script is available, The browser pauses HTML rendering, executes the script and then it continues with HTML rendering.

The disadvantage with using the async attribute would be if we have multiple scripts which are dependent on one another. The async doesn’t guarantee that the order of execution is in a particular order which would lead to the breaking of code. If we have an independent script, then we can rely on async. However, we can completely rely on defer attribute due to the below reasons.

defer attribute is similar to async, except for the browser doesn’t execute the script as soon as it is downloaded, it waits until the parser is completely finishing parsing the HTML, then it runs all the script tags in the exact order in which they are defined.

By now, we had reached to the conclusion that defer is most useful when it comes to loading the javascript as it allows the javascript to execute in order which is important when we include interdependent libraries. defer attribute in scripts can never block synchronous scripts, while async in scripts might depending on how quickly they download

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️. Source of images are from google😅

Happy Coding :)

Why does a particular website takes so long to load the page would always be a question is addressed below.

By now, we have realized that Javascript is everywhere, we need to build frontend we have JS, we need to build backend we have JS, we can build games, CLI, etc., I believe all this is possible because of JavaScript’s unique feature of having cross-browser compatibility issues.

However, Internet Explorer, Mozilla Firefox, Google Chrome, Safari, and Opera all have their own proprietary features and their own subset of the standard features. Different browsers implement each feature in their own way, and this can be a major headache for web developers trying to make things work for everybody.

I need to plugin an early career days situation here where I was excited working on the amazing feature which helps the team to create forms with pre-populated data functionality, validations, using modals for better view. I had tested all the scenarios in chrome which is one of my favourite browsers due to its amazing dev tools and shipped the beta version to a set of users in a staging environment.

I was really excited about the new features and the appreciations I would be getting for the same.

Do not be attached to the fruits of your work and do not be attached to not doing your duty.

But Alas!!! I had received a different set of emails along with appreciations where they complained about a different set of issues. The collective conclusion from the mails was to observe the functionalities in many browsers instead of checking in one browser and assuming it works :P

This led me to explore more and more about Javascript and led me to share with you about my learning in POLYFILLS

“Tell me and I forget, teach me and I may remember, involve me and I learn.” — Benjamin Franklin

In this digital world, There are tons of resources for any topic. I have observed a video on Youtube on How to Drink which has attracted a million views too. Being a react enthusiast I was always looking out to learn from tutorials as I assumed it is an easy way to understand and most of the time, we get fascinated by the way they achieve the result without a single bug.

I was a great fan of those series and I used to follow the tutorials to get a better understanding. It would be all well and good to replicate the same but once you start building improvements and extra functionalities, there comes the nightmare which Developers hate to see it in their screen — THE BUGS and the ERRORS.

The most interesting things about tutorials are they never struggle during development. As everyone is focussed on achievements or end results. But we need to realize that success won’t come easily, and errors lead to more understanding of the concepts as we dwell into finding the required solution by going through documentation and stack overflow for a faster solution.

Behold, I was introduced to this workshop — “React in 2020: Getting Started with Hooks”. There are few prerequisites for this workshop which caught my attention.

· The classroom-based approach was introduced where we were asked to not code at all instead to listen to Tanay Pratap’s point of view on react and jot down the learnings.

· They suggested that the point of reference after the session for practicing is documentation instead of referring to videos

· Debugging the errors with the help of documentation and experimenting with the code.

This led the people who followed his words to be more attentive rather than focussing on just copying the code and ponder around the ways to solve the particular problems and the tasks provided us over here

⚙️ welcome to the workshop

It gave us a clear motive to work on a specific level like in-game and move ahead to the next level, which led us to follow the divide and conquer method and we never thought more about bandwidth to complete the project as it was set of tasks.

In my personal opinion, While creating the mini project I encountered a lot of small anti-heroes aka errors which I got to check around for the cause and solve it rather than following the code and get the solutions. This led to the understanding of a lot of concepts which may be destructuring, props, map, list, etc., with clear examples.

During the course of after workshop brainstorming, I got introduced to many bugs and errors and one of them was related to the concept of destructuring. We might be familiar with destructuring which is a javascript expression that allows extracting data from arrays, objects, maps, sets, into their own variable. But, I used to use it least as I was familiar with writing object.subobject.name, but during this course, I assumed to explore more to implement it on the same which made me realize the simplicity and scalability that can be easily attained if I had followed this particular method and that led me to follow destructuring in the future wherever possible.

I had another great learning when I was trying to figure out the importance of map and foreach when I was referring to the list topic. I would request the JS lover who has approach till here to check it out and it will be amazing to see map and foreach importance when it comes to the array.

Finally, following the first set of this workshop, I realized the importance of documentation and solving the problem on your own will clear a lot more problems than copying the code from the picture-perfect tutorials or boot camps where we can generate the end results but we won’t get to experience the struggle behind the same.

I am excited about this series as It is definitely building confidence to work on a project without referring any tutorials and relying on more documentation which will always provide us with the required code with detailed explanation.

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️.Source of images are from google😅

Happy Coding :)

Believe it or not, after a month of learning here and there and replicating someone’s project, oops I mean inspired by other projects, I have started to love React.

There came a turning point where I met my first villain in React called React hooks, It was so confusing and I used to get warnings in red colors to give up, but youtube came to my rescue, So I thought of taking one topic called State to give my perspective on the same.

We know that in React there are stateless components and stateful components. Stateless components just have like one input and output and nothing changes over there whereas state components are components that contain state where we observe constant change and iterations over the component every time something changes within the state. A state can be passed downwards to other components through props.

What is State though? React components has a built-in state object.
The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.

Let’s take the most famous project popularly known as the To-Do List. While I was working on my To-Do List project I realized why I use state…

If we observe the above react to-do list, the task can be filled easily and a bunch of tasks is present here and there. Every time user enters the task state gets updated as something gets added to the list. So basically if you want to use state think of a situation where every time, there is constant change/modification in the data.

How to update a state? In order to update a state, we need to pass a function instead of an object to setState , to ensure the call always uses the most updated version of the state. Here is an example

I know this is like touching the tip of the iceberg. This was something I always wanted to write and explore more on as it looked interesting. I will keep on adding more to this and will update you guys. This is more like a first draft.

I believe this would help someone, I am new to the blogging world, so pardon If I have written something wrong. Open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️.Source of images are from google😅

Happy Coding :)

I am not sure whether it is just me or a few come in my squad where whenever I mention my friends I work as Front End Developer they come to this particular notion that I just work on HTML, CSS which is so not true. It’s really fun when we go on explaining how front end development works as the technology has improved to such an extent that we not only just work on the website but we have the capability to create an entire Progressive Web Application that gets immense capability with logic involvement through Javascript.

Front-end web development, aka client-side development, is the practice of creating HTML, CSS, and JavaScript for a simple website or Web Application so that the user can see and easily interact with them directly. The common challenge associated with front end development is that the tools and techniques we use to create the front end of a website change constantly thus we need to constantly be aware of how the field is developing. Few UI-frameworks and libraries include AngularJS, React, Node.js, ReactJS, jQuery, and the list continue as there is constant development to make sure that Front-end development provides configuration, optimization, and operation of all interface elements.

Here is the list of a few chrome extension which I have relied on so far to help me in front end development

1. ColorPick Eyedropper:

A zoomed eyedropper and color chooser tool which allows us to select color values from different webpages and more

2.JSON Viewer:

Front End Devs would be receiving a lot of API response and we need a medium to view JSON in the right way, JSON Viewer comes to rescue here as it makes JSON so easy to read.

3. WhatFont:

The easiest way to identify fonts on the web pages.

4.Wappalyzer:

Wappalyzer is a utility that uncovers the technologies used on websites. It detects content management systems, e-commerce platforms, web frameworks, server software, analytics tools, and many more.

5.LightHouse:

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

Well, guys, I found these to be very helpful for me in many tireless nights on coming up with good Web Applications. I will keep adding more extensions in my mind and please do comment and let me know which could come in this category but have been missed, I would be really happy to add the extension.

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️.Source of images are from google😅

Happy Coding :)

After referring to many articles and browsing through videos to learn more and more on Progressive Website Application, here are a few of my observations that might be helpful to you.

Why PWA was the first question in my mind, the reasons quite intrigued me as I observe there are a lot of success factor which would make PWA preferable such as

· PWAs are primarily websites and can be easily accessed on browsers only, thus no installation is required in mobile

· Offline functionality for better User Experience

· Quick loading with less data consumption

· Browser friendly

· Easily accessible as Home Screen button

According to the statistics we observe that most of the e-commerce companies and weather websites are investing more on turning their websites to Progressive web application for better User Experience, few examples on the same would be Flipkart, Alibaba, Forbes, Weather Channels Websites, The Washington Post and Twitter, Lancome, The Home Depot, Virgin America, Fandango to name another few.

The reason behind PWA’s success is because in its power to improve the entire mobile experience for the users. Customers are interested to come back more because they can interact with the brand’s website more easily. There is a trend observed where Consumers are shifting from desktop websites and native apps to Progressive Web Apps.

So What is PWA, according to Wikipedia :

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.

My first PWA was on React where I got to introduced to an extension called Lighthouse which was recently acquired by Google. The beauty of Lighthouse is the report it creates with a detailed analysis of the improvement that can be done on the below fields.

· Performance

· Accessibility

· Best Practices

· SEO

· Progressive Web App

You can see the result for one of my project where we can observe the area to be focussed more to convert any website to PWA

If we observe here carefully, there are a set of rules which need to be followed to convert any web app to Progressive Web App

· The First requirement would be to test the page load ie., the request payload time should be set within the timeout threshold time to pass the requirement.

· The problem occurs when the web app needs to respond when offline, so for it to happen we need to create a simple Html page which should be displayed when offline

· Most of the web apps call the URL to begin with the fetch the data from APIs, this the reason most of the web apps won’t be PWAs as we need to create the service workers which need to be worked offline too.

· The fourth requirement would be to use HTTPs which will be resolved once the web apps are hosted which can be done very easily at Netlify.

This is just the beginning of my course on how my experience was on with PWA, I would be investing more time on writing in details on technicality and code changes to be performed in my continuation of the series.

Please note that the source of the image is google and all the information provided here is my personal opinion.

I hope you have found it interesting and would follow my next article whose link I would be posting here soon.

This is my first article so I would be thrilled on my constructive feedback and any appreciation would be overwhelming

Happy Coding :D

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️.Source of images are from google😅

Happy Coding :)

There are so many amazing projects that are present in GitHub that always inspires us, and in a few, we observe there is a collaboration of many coders as a whole who join together to build an amazing product and they would love to involve more people to contribute to their work, we usually call it an open-source project which means anybody is free to use, study, modify, and distribute your project for any purpose. These permissions are enforced through an open-source license.

I have been contributing to Real Dev Squad, an open-source project filled with amazing people, Here, on many occasions, I have got a chance to review the code and work on some issues. The problem with these which I faced was showcasing my work or suggesting some changes to others. I used to find it difficult to clone the repo and run it locally. I believe many might have faced similar problems.

While looking for the alternatives, I came across this wonderful
online editor 😍 CODESANDBOX 😍

CodeSandbox is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click. Use it to create static sites, full-stack web apps or components, on any device with a web browser.

On exploring code sandbox I realized, I can easily share my changes on issues and work on suggestions on code review and share my thoughts with my fellow developers through this.

So, here I am sharing my thoughts and steps you can do to open a Github repo in code sandbox to tweak and work on it on the web browser itself 😁.

Login(through Gmail, Github, etc.,) to Code Sandbox if we need to view the repo changes.

On click of creating a sandbox, we will be provided with multiple official templates of react, vue, Angular, Vanilla, etc.,
Head over to Import Project.

Head over to GitHub repo which you want to work on, suggest some changes, or the PR you are working on (picture for example purpose only)

Paste the link from the GitHub repo on Import from Github section and import the repo.

The code is ready to be played with, shared with other coders to ask for suggestions and it can be easily be forked by others to share their inputs.

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️. Source of images except screenshots are googled😅

Happy Coding :)

Originally published at https://dev.to on June 14, 2020.