Forem: menomanabdulla

How I maintain large-scale dataset in react

menomanabdulla — Mon, 04 Oct 2021 06:08:12 +0000

Frontend technology turns in robust at current decades. Modern web technology now more dynamic, more interactive seems like more realistic then earlier. Business owners want more engaging of user and there is a cold-war among companies to, how provides more realistic feel, more efficient user-experience for potential customers. And here data plays a big game. If we are on frontend side then terms going like how efficiently maintain data at frontend. Today we are going to explore, how productively we could maintain large-scale data-set at frontend.

Live Preview
Source Code

Pagination:

Pagination is one of conventional and proven way of handling large-scale of dataset. We can reduce pressure from DOM tree by using pagination in large data context. As well as it’s also favorable for makes frontend UI organized and clean. For paginate I use react-paginate npm package. It’ s really highly customizable and super simple to use. For customization it has a large list of props, personally I found it handy for dealing with large-scale data-set.

Infinite-scroll:

Infinite-scroll is more trendy approach of maintain large-scale of data-set at frontend. I love infinite-scroll for its smoothness. Infinite-scroll is a bunch handy for news-feed component for this a large amount if popular platform are using infinite-scroll like facebook, twitter, linkedin most of the social-media platform are using infinite-scroll concept. In react we can use infinite-scroll by a popular package called ‘react-infinite-scroll’. Most interesting things about ‘react-infinite-scroll’ are its size and usability. Super simple to use, with super handy use-case.

Virtualized and Window:

According to react-windows doc:

React-window reduce the amount of work required to render the initial view and to process updates.
It reduces the memory footprint by avoiding over allocation of DOM nodes.

React-window is new form of react-virtualized. React-window is smaller and faster than react-virtualized. I would suggest go for react-window instead of react-virtualized for those size, customizability and speed issues.

Last-words:

Thanks for staying till now; I highly appreciate your effort. If you have any suggestion about maintaining large-scale data-set at frontend especially in react please share in comment box so that it will resourceful for others too. If you love this article let me know by your activity. Happy coding.

CSS3 flexbox in simple way for beginners to master.

menomanabdulla — Wed, 11 Aug 2021 03:49:04 +0000

Today’s world you can’t survive without flex-box as a frontend developer whether you are expert or beginner. Flex-box give you extra superiority for managing your content in final layout, also flex-box has huge market demand for building complex web-layouts.

CSS flexbox will added new weapon in your visual development portfolio. Here I am explained all CSS3 flex-box property in simple way with visual example and copy ready code. So stick till to the end and give your CSS expertise next shape.

Here is live examples, you can check it from here.
Here is github, you can see source-code from here.

1.Display:

Display is CSS box-model properties, it’s primary properties for next all flex related properties. This defines a flex container, inline or block depending on the giver value. It enables a flex content for all its direct children.

2.Flex Order

Flex item maintain default order as a source order. Order properties can controls order in which they appear in the flex-container.

3.Flex Direction

Flex-direction defines how flex-box items are ordered within a flex-box container. Value example and use case:
row: Same as text direction
row-reverse: Alternative to text direction
column: Same as row but top to bottom
column-reverse: Same as row-reverse but top to bottom

4.Flex Wrap

For Flex-wrap stick by-default inline, flex-wrap is also flexible like others property. You can change that and allow the items to wrap as needed with its property. Value example and use case:
nowrap: all flexf items will be on one line
wrap: flex items will wrap onto multiple lines, fro
wrap-reverse: flex items will wrap into multiple lines, from bottom to top

5.Flex Shrink

Flex-shrink is just opposite of flex grow. It only comes into play if the elements must shrink to fit into their container(when the container is just too small).
By-default every item has flex-shrink of 1 which means it will shrink as the box contracts.

6.Flex Flow

CSS This is short-hand for the flex-direction and flex-wrap properties, simultaneously they define flex containers main and cross axis. The default value is row and nowrap.

7.Flex Basis

This defines the default size of an element before the remaining space is distributed. It could be a length with unit or keyword like auto, content flex-basis default value is “auto”.

8.Justify Content

This properties define alignment of flex item along with ‘x’ axis or main axis. Justify-content’s default value is “flex-start”.

flex-start: item will appear at the starting of the flex-container along with ‘x’ axis.
flex-end: item will appear at the end of the flex-container along with ‘x’ axis.
space-between: items get space between those mainly left and right side when they appear along with ‘x’ axis.
space-around: items get space combinedly mainly left and right side along with ‘x’ axis.
center: items will align center along with ‘x’ axis.

9.Flex

Flex properties determine short-hand of flex-grow, flex-shrink and flex-basis combined. The second and third property are optional. The default is ‘0 1 auto’ but if you set it with a single number value it’s like ‘1 0’;

10.Align Items

Align-items properties defines the default behavior for how flex items are aligned or laid out along with ‘y’ or cross axis.
flex-start: item will appear at the starting of the flex-container along with ‘y’ axis.
flex-end: item will appear at the end of the flex-container along with ‘y’ axis.
center: item will appear at the center point of the flex-container along with ‘y’ axis.

11.Align Self

For This allows the default alignment, to be overridden for individual flex items. We can overridden align-items properties only for any individuals.

12.Align Content

This property define flex container’s lines within when there is extra space in the ‘y’ axis, similar to how justify-content aligns individuals items within the man the main-axis.

On this article I tried to cover all CSS3 flex-box properties with example and also include live example with github source code.

I hope you enjoyed it, please let me know your words. If you want to deep drive with CSS3 coding guidelines and front-end web development best practices please check it. Also you can check my 15 Best practices of HTML5 for beginners for give your markup good shape from here. If you find any errors or mistakes then do let me know. Thanks for this journey & Happy Coding.

15 CSS3 Best practices of for beginners to pro.

menomanabdulla — Fri, 16 Jul 2021 04:12:32 +0000

Whether you are a beginner or an expert in Frontend Development it is important to follow some best practices in order to keep your cascading style-sheet (CSS) optimized and organized.

CSS guy is an artist, as an artist you should have some unique working strategy that’s make your action while working more enjoyable and fun. Here is some tips I share, you could follow and write your style as pro. Wow! let’s get started:

01. Don't put everything in to one CSS file

Case-01: One large CSS file leads to fewer HTTP requests,
which can improve performance.

Case-02: Several smaller file leads to easier organization
which will make development and maintenance cheaper and easier.

Now what should our strategy for both scenarios? That’s a million
dollars question. Okay let me clear your confusion; we can follow
the win-win rules.

“We could use multiple style sheets to keep things better
organized, and then compress them into one file before putting
them on the site, to improve performance.”

02. Follow top-down approach for organize your stylesheet

You can follow your HTML elements hierarchy in your stylesheet. I called it top-down approach, that will help you to write more structured and organized code. You will find top-down approach very handy to find your expected code block form the entire stylesheet.

03. Make UI components

Tried to make some prebuild UI component that you may use in future just simply plug a class name and have some properties.

04. Comment your CSS

For better readability and organized coding, code commenting play insane role. Code commenting helps code refactor in future and helps other developer to understand the project codebase. Code commenting is always good practice. Those developer who write code with proper commenting, have huge market value.

05. How to write consistent CSS

Consistent CSS is important for team collaboration as well as in large project. At the beginning part of the project you can set some rules for maintain throughout to your entire stylesheet. It will help you to write consistent CSS.

06 CSS namespacing

CSS namespacing helps you to create a structure that governs how CSS properties get written. If you follow the convention, you’ll be able to write CSS without being afraid of side effects.
Here’s a list of namespaces I use:

.l-: layouts
.o-: objects
.c-: components
.js: JavaScript hooks
.is-|.has-: state classes
.t1|.s1: typography sizes
.u-: utility classes

07. Use BEM or Block elements modifier

Have you worked on large websites that spans more than a few pages? If you did, you probably realized the horrors of not conforming to a robust CSS architecture. You probably would also have researched on ways to write maintainable CSS.

BEM convention is the good choice for well-maintained CSS architecture. If you’ve never heard of BEM before, it stands for block, element and modifier. It looks incredibly ugly when you first feast your eyes on it.

I hated BEM to a point where I didn’t even give it a chance when I first got to know about it. I can’t remember what made me try BEM, but I realized how powerful it is to work with it.

08. CSS class nesting or complex selectors

Logically there is no problem with CSS class selector nesting but future will make sense. When you want to modify existing rules this will be a bit complex.There another main reason is when you use complex selectors browser takes more time fir match selectors.

Let me clear how browser trying to interpret selector and decide which element it matches. Lets related with an example.

Browser start with the a tag, it will trying to match all the a tags then trying to match next selector then so on.

It's not good practice to using tags as CSS selectors because it will try to match for every tag. Try to use more specific selector and reduce complexity.

09. Use CSS preprocessor like SCSS, SASS and LESS

For keeping your CSS DRY(Don’t repeat yourself), use CSS preprocessor like SCSS,SASS or LESS. The biggest benefit to using these preprocessor is that you can define your re-usable code at the top and reuse it by @ include and @ extend throughout all of your CSS.

CSS preprocessor will make your life easier to write modular based CSS, it’s helps to write more organized and more consistent cascading stylesheet. BEM naming convention with CSS namespacing and CSS preprocessor is perfect combo for robust CSS architecture.

10. Reduce redundancy

Reduce redundancy a bit tough, you will not find both case are exact same. In my suggestion if find 70%-80% style match then you could use different class to outsource rest of 30%-20% style. I hope it will make sense.

11. Vertically align any elements using only CSS

For vertically align any elements modern CSS introduce CSS flex and grid system. Those are awesome tolls for dynamically centered any elements.

By Flex:

By Grid:

12. Try to use shorthand CSS properties

There is lots of way, you can ménage your style but try to stick with best approach. Always try to use CSS shorthand, it will reduce your code as well as give your stylesheet a nice and good looking shape.

Bad Practice:

Good Practice:

13. Use rem’s or em’s

Using rem’s or em’s is more dynamic way instead of using pixels. Try to use rem’s or em’s rather than pixels.

14. Avoid !important

For avoid code collusion and if you don’t want to break normal flow of browser behavior with your CSS don’t ever use !important. It’s really hard to find-out conflict within !important and refactor the whole codebase in large scale application.

15. Use mobile first development approach

A mobile-first approach to styling means that styles are applied first to mobile devices.
Concern with:
1.Min-Width Media Queries
2.Progressive Enhancement (CSS & javaScript)
3.Content (Not Device Width) Determines Breakpoints

Last Words

I hope you like my CSS3 coding guidelines and front end web development best practices. You can check my 15 Best practices of HTML5 for beginners for give your markup good shape. If you appreciate it or find any errors let me know in comments. Thanks for this journey & Happy Coding.

15 HTML5 best practices for beginners to master.

menomanabdulla — Sun, 11 Jul 2021 16:42:34 +0000

Whether you are a beginner or an expert in Hyper Text Markup Language (HTML) it is important to follow some best practices in order to keep your HTML documents consistent and organized.

HTML5 has been around for many years now and has been stable and supported at least partially supported by most major browsers since 2014. Here I present list of best coding practices regarding HTML5 markup. Let’s get started:

File Structure

Be concerned to the project file structure from day one. It’s extremely important for mid to large scale application for batter maintenance.
Declare correct Doctype

If correct Doctype is not declared new HTML5-specific tags will not interpreted by the browser.
Write w3c valid markup

Use validator like w3c validator to check your markup and write error free more structured code. Validator will suggest you some best practice of HTML5 coding standard. I strongly recommend you to valid your code by w3c validator.
HTML5 semantic elements

Make sure correct use of the HTML5 semantic elements like: ,,,. It’s will help you to write more structured piece of code.
Meaningful img alt attribute

Always try to use “alt” attribute with meaningful text in img tag. It’s also best practice for SEO purpose.
Kebab-case class naming

Use “kebab-case” while class naming. If you don’t use any structured naming convention like, BEM convention.
Relevant selector naming

Tried to use meaningful class naming relevant to your block of –code .
Tricks: Tried to use “.noun-adjective” format.
Type attribute with link and script

Don’t need to use “type” attribute for external styleSheet and script linking in HTML5 structure.
Atomic Class

Use specific class or atomic class when needed, try to use short meaningful class name.
Variant class in parent element

Tried to added class in parent element if need give another style to the same block or need same block different style.
Complex wrapping

For better performance please tried to avoid unnecessary wrapping. It will create unnecessary node in your HTML tree and reduce performance too.
Bad Practice

Good Practice
Closing tag

It is best practice to always concern with closing starting tag even if it is self-closing tag.
Injecting external stylesheet

External stylesheet always injects in tag. Because The HTML5 specification stated a element must have a “rel” attribute and if the “rel” attribute us used, the element is restricted to the head element.
Injecting external script

External script always injects at end of the body tag.
As we know that HTML is loaded and execute line by line. So, when the browser encounters a script tag, it loads and executes the JavaScript code on the spot. This may low down the page rendering also JavaScript is often user to manipulate DOM and add new functionality to the webpage if script tag not added at end of the body tag, DOM may not be ready by that time this leading to unknown behavior.
Code Comments

It’s best practice to write human-readable code. Tried to comment your block of code. It will help you or any other developer to refactor the piece of code blocks.

Last Words

I hope you enjoy this article html5 coding guidelines and front end web development best practices. If you appreciate it or find any errors let me know in comments. Thanks for this journey & Happy Coding.

Forem: menomanabdulla

How I maintain large-scale dataset in react

Pagination:

Infinite-scroll:

Virtualized and Window:

Last-words:

CSS3 flexbox in simple way for beginners to master.

1.Display:

2.Flex Order

3.Flex Direction

4.Flex Wrap

5.Flex Shrink

6.Flex Flow

7.Flex Basis

8.Justify Content

9.Flex

10.Align Items

11.Align Self

12.Align Content

15 CSS3 Best practices of for beginners to pro.

01. Don't put everything in to one CSS file

02. Follow top-down approach for organize your stylesheet

03. Make UI components

04. Comment your CSS

05. How to write consistent CSS

06 CSS namespacing

07. Use BEM or Block elements modifier

08. CSS class nesting or complex selectors

09. Use CSS preprocessor like SCSS, SASS and LESS

10. Reduce redundancy

11. Vertically align any elements using only CSS

12. Try to use shorthand CSS properties

13. Use rem’s or em’s

14. Avoid !important

15. Use mobile first development approach

Last Words

15 HTML5 best practices for beginners to master.

File Structure

Declare correct Doctype

Write w3c valid markup

HTML5 semantic elements

Meaningful img alt attribute

Kebab-case class naming

Relevant selector naming

Type attribute with link and script

Atomic Class

Variant class in parent element

Complex wrapping

Closing tag

Injecting external stylesheet

Injecting external script

Code Comments

Last Words