One of the common things about a smelling code is the naming strategy. If your team doesn’t have project naming conventions or principles, then you should propose that. As the app grows, having a naming principle is crucial.
Maybe you’re already a lead developer or a senior, and you have your own ways of naming variables. Still, a team has beginner developers, some senior developers, architects if the project is significant, and a project manager.
At some point…
Let’s get into the code step by step to understand what it does. If you want the whole code, you’ll find it at the end of the article.
/!\ — If you haven't yet generated the…
To avoid using our real password in plain text we need to generate credentials (client ID and client secret) for the app who needs to access the resource it needs.
Credentials are not for accessing all our emails, contacts, …etc. No, we need only credentials for limited access, in this case, for our app to send email through it to its users.
To generate credentials for our app, we need to:
Hi dear reader, let’s start with some facts.
In 2021, mobile phones generate 54.25% of the traffic compared to desktops with only 42.9%.
Mobile usage vs desktop usage comparison shows that 58% of all multi-device purchases use mobile to close the sale. — Merchant Savvy
Don’t get me wrong. Desktop users have an important role here. After all, browsing a site is much easier on a bigger screen. I’m trying to tell you here that there is a big chance that your web app or website gets accessed by a mobile phone. …
We often use
em to size a text. Well, this practice is not responsive friendly. What’s wiser is to use for responsive typography is the viewport units.
Viewport units like percentages are relative units to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element. Therefore this way is for sure responsive friendly because it’s based on the device screen.
There are four viewport-based units in CSS. These are
These viewport units are:
10vwcorresponds to 10% of the…
This principle resolves a famous problem about images. When it comes to high resolution, there are mainly 2 displays, known as the
Retina display or the
For example, recent iMac computers are famous for their High-Resolution (Retina display). Therefore, a display can be different from a device to another based on the pixel density PPI (Pixel Per Inch) or DPI (Dots Per Inch). So, obviously, if you don’t take action to avoid this issue, you may have some images that have not been made with a High-Resolution Display in mind and look “pixelated” when rendered on a High-Resolution…
This is less complicated than the first principle.
It’s actually very simple. There are mainly 2 properties that do the job:
100%makes sure the image is never wider than the container it is in.
automakes the image keep its original aspect ratio.
Create a CSS class that makes images responsive. And use it whenever you have an image.
</style><img class="responsive-img" src="image.jpg" alt="responsive image">
This is the most important principle. It is a technique that was introduced in CC3. It’s about changing the look and the content of your web page based on the different viewport sizes.
The viewport size is the visible area of a web page. It is what you see on different devices, the visible area.
Think of this technique as a
switch condition. When the screen’s width is less than or equal to
100px, then apply the following style: change a class name's width to another value, change its position. To sum up, change things to make them fit the…
If you are already a developer, then you should know that tutorials are interesting when looking to solve a particular problem and not for building your coding skills. And if you are a beginner in this field, here is my golden advice for you:
There is nothing better than building real project and solving real world problems to learn and strengthen your coding skills!
That’s why I’m sharing this article with you to help you find the right places and ways to build and strengthen your front-end skills as a developer.
This article covers a list of my top projects…
Do you want to tune up your front-end skills? Do you want to be a front-end developer? Or are you already a front-end developer and want to be a better at what you do each day?
Then these resources are for you!
⭐ Superb resource to get feedback on and tune up your front-end skills.