Blog & YouTube Channel for Web, UI & Software Development
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.

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.

@media (prefers-color-scheme: dark) {
// your code for dark mode here
}

watch video

CSS tooltips are easy and if planned and use right, can do a whole lot for you. The limitation is that they can only show text but I went over so many details in a video dedicated to this where I demonstrate how to add positioning, theme, and more. But this relies on pseudo-elements and the ability of their content being something you set in an attribute of their parent. …


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 them to work independently from the place it will be used and avoid adding app logic into them. …


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 many applications or for a single one, there is always the same type of components you can use. It is very important to respect their types and to think about your components beforehand to decide how to split and build them. …


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 this trick. This is one of the examples which illustrate a bad CSS API design due to the fact you need all these combinations of properties for this to work. …


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 CSS faster and in a better way. They are full of tools and utilities that help you organize, avoid repetition, and modularize your CSS. I prefer SASS but there are also LESS and Stylus which I enjoy equally as well. The reason I love them is that they don’t introduce a “new way” to style your page. It is still CSS with extra syntax and features. …


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 only worry about your app. …


Image for post
Image for post

It is easy to just underestimate HTML as a simple thing to learn but there is more to HTML than you think if your intention is to learn it right. It represents the structure, the bones of any website and these are 10 things to strengthen these bones.

HTML5 semantic tags are like types in a loosely typed language. You can go ahead and structure your entire site with div tags but you would miss out on the benefits of semantic tags:

  • Help visually impaired users navigate a page with Screen Reader;
  • SEO (Search Engine Optimization) improved ranking;
  • Easy to find, and make sense of the…


Image for post
Image for post

I have worked for different companies which allowed me to experience different strategies when it comes to take an idea and release it to the public as a final product. Whether you are part of a small or big project, I believe any developer would benefit a lot from understanding the entire process of what it takes to deliver software or application.

The first thing that triggers a product or software development is the idea or a solution for a specific problem. After that, you normally look at the market for existing solutions if any. …


Image for post
Image for post

“CSS is not easy “ is probably one of the biggest complaints in the web development community. I strongly believe that beyond learning the fundamentals, CSS requires creativity and the ability to visualize things. CSS is powerful and the more you dig in, the more of a magician you become. When it comes to essentials, these are what I consider to be the top 15 things to master at first.

I know, I know! This is a CSS post, but CSS becomes way easier when you learn all the basics of HTML. …


Image for post
Image for post

I decided to purchase the new Apple M1 MacBook Pro (2020) for development purposes. My current macs work great but I was sold on the long battery life and the power of the claimed M1 chip. Here is why I love it and I am hopeful.

I am a Software & Web Developer and I work in an R&D department, so I am constantly researching and experimenting either for work or to create content. I use IntelliJ, WebStorm, PhpStorm, and Xcode depending on what I am coding.

I also have a Code YouTube channel which I use Adobe Premiere, Adobe Audition, Adobe After Effects, Adobe XD, Photoshop, and Illustrator to edit and prepare the content I post. …

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