Blog & YouTube Channel for Web, UI & Software Development - beforesemicolon.comyoutube.com/c/BeforeSemicolon
Image for post
Image for post

Javascript Date object is not very well-loved in the community. It is something Javascript adopted from Java but both grew in different directions. Its API can be confusing and lacks a lot of methods and information that you often need when working with date and time in your projects.

The Javascript Date object came from Java. Java introduced Calendar in recent versions and deprecated a lot of Date methods but you still have, what I consider to be, only the good parts about the Java Date object. Javascript Date object feels forgotten sometimes but it includes many things super useful…


Image for post
Image for post

HTML is the backbone of any web application and despite being very easy to pick up, there a large number of tags containing easter eggs. Since HTML will not complain when you do things wrong you may be affected by not following a certain good practice for your application.

The only thing that can override an inline style is the CSS !important flag which is not a good practice (check 50 CSS best practices article for more details). …


Image for post
Image for post

You can read about part one of 25 Javascript tricks in another article where you can find equally awesome code solution snippets to improve your codebase with and learn more about Javascript by examples.

These are code snippets you can use in your projects and evolve to become something bigger. They teach various lessons and reveal great features of Javascript and the Environment where it runs. All code links are below the images.

This simple function leverages the power of the Array reduce method to allow you to retrieve the deep value…


Image for post
Image for post

There are common patterns you can use in Javascript that will improve your code substantially. These are techniques to simplify and better structure your code in a way that makes it reusable, modular, easier to consume and test, and will speed up your code and your coding process.

There are three(3) types of patterns. Creational, structural, and behavioral.

  • Creational — Addresses problems related to creating objects.
  • Structural — Addresses the relationship between entities and how together they can compose a larger structure.
  • Behavioral — Addresses how objects communicate and interact with each other.

This is one of the most common…


Image for post
Image for post

Continuing our series on CSS tricks where you should probably read about the first one, I have collected more tricks that have the potential to blow your mind and ask why you never knew about them before.

CSS Tricks Part I

If you ever need to detect whether the user prefers dark or light mode to style your site accordingly, CSS gives you this ability through the media query API.

watch video

CSS tooltips are easy and if planned and use right, can do a whole lot for…


Image for post
Image for post

I have helped build massive react apps with hundreds of components, a lot of states to manage, complicated data relationships, endless routes, and complex API services. I have made and experienced the consequences of a lot of bad decisions which I would like to share with you.

I actually wrote about a strategy to build components in another article which you can check later but, a common mistake is to jump right into creating components. Even when using an external library.

Preferably build all your components separately from the app you will use them. This will make sure you build…


Image for post
Image for post

The problem with Javascript frameworks component building is that a lot of developers that use them do not approach the application from a system design and architecture perspective. Web Apps have increasingly got more complex to the point we are even hearing about Micro Frontend architecture but let me share with you a better way to approach your components building process.

By the end of this article, I will show you how to build a simple search application and you can view the full code on my CodePen example page.

Type of Components

Whether you are building components that will be used among…


Image for post
Image for post

I started to share 25 Javascript tricks and solutions you need to know about which were well received so I decided to share some CSS tricks as well. I really believe that a lot of people adopt a library or framework because they want a solution but are not aware of how simple these solutions can be. I am constantly sharing tricks so follow my YouTube channel for video tutorials.

If you want to maintain a single line of text but want to show 3 dots(ellipsis) at the end in case the text ends up being too big, you need…


Image for post
Image for post

I recently wrote about 15 CSS things to master to become a better web developer and then realized that writing CSS requires so much more than focusing on certain features. Often times, what makes CSS hard is that developers don’t have a set of tools, guidelines, and best practices to follow and use to help them enjoy the art of writing CSS.

Over the years, I have collected a set of rules and tools that helped me a lot in my CSS journey and I would like to share 50 of them with you.

CSS preprocessors help you write less…


Image for post
Image for post
Photo by Tim Mossholder on Unsplash

The webspace has been growing, so has Javascript and its community. Although I feel that things are slowing down on the Javascript and Frameworks side as far as new exciting things, the web has gotten so powerful that amazing applications are being built to run in browsers first. With everything that is going on, these are the 5 technologies that will keep on advancing and taking over.

RIP dealing with servers, scaling them up, and maintaining their complexity. More and more the need to set up a server is fading away with services coming out promising simple setups where you…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store