Last Updated on 2023-01-08 by Kassandra
Looking for some front end development tricks for full stack engineers or web developers?
This post will provide that and even some video tutorials.
Hello & welcome! If we haven’t met yet, I’m Kassandra & I’m here to help break tech things down into easy-to-understand byte-sized pieces for budding developers & entrepreneurs!
How To Get More Front End Development Tricks
As of this most recent update for this post, I do not yet have a new newsletter you can sign up to that’s purely for programming tips & tricks. But if you would like more information on how to work with me (including information on how to join my monthly mentorship program), be sure to send me a message on LinkedIn.
How To Save Time & Frustration When Manually Testing Mobile Responsiveness
Are you frustrated with inadequate testing tools for mobile responsiveness?– And I’m not talking about automated testing with things like Selenium.
As a front end developer, it can be extremely frustrating to spend so much time getting everything JUST RIGHT – only to have a mobile device you didn’t know about make your site look like garbage. But what if you could prepare for that in advance?
How much easier would your life be if you could check out how your site looks on multiple devices of varying sizes? Or if you had a way to see all possible viewport sizes for devices you don’t even know about?
In the below video … I’m going to reveal 2 websites & 1 handy developer trick to make your life easier.
At the beginning of December 2022, I was informed that my software engineering role was eliminated in a company restructuring. While I have time to find a new role within the company, there is still the possibility of finding a better opportunity elsewhere.
While it’s still in the works, phase 1 has been completed. But not without some new frustrations.
My main programming language these last few years has been Python and it’s related packages. And from those experiences, I’ve developed several best practices to help save me time — and things that I share with my students. But I’ve not yet had the opportunity to do so for front end work.
Which led to way too many hours practically pulling my hair out not understanding why the Chrome web developer tools would show a view of one way but it would not work when actually published.
And because I desire to empower others, I want to save you the time and heartache by revealing what I promised earlier … And doing so now!
How To Determine Your Viewport Size
First, after way too long I realized that the built in Chrome web dev tools just weren’t enough – they didn’t even have my phone model! So I went looking for viewport sizes and found these two sites.
Now there are several sites that say they can tell you your current viewport size … But they don’t all show the same data. So do be mindful of this, and be sure to check the manufacturer’s details for confirmations.
The one I found that really helped me the most was Viewport Sizer – which can be used on desktop or mobile. I found it on mobile, which is how I was able to determine I was looking at the wrong device in Chrome web developer tools.
What’s also great about this site, is they have a page where you can see different viewport dimensions by device. Not all devices are there, but there are many – you can even download the data straight from the site!
An alternative you could use would be What Is My Viewport – it will tell you what your viewable viewport size is based on the screen you are testing it from. And if you press F11 to go into full screen mode and it doesn’t update? Just refresh the page. It’ll work after that – even if you go out of full screen and back in again. (At least it did for me)
How To Add New Emulated Devices To Chrome Developer Tools Device List
Now for the web developer life hack you’ve been waiting for – the Chrome web developer tools configuration! Save yourself some time and stress by adding additional sizes to your arsenal of alternative sizing!
Here’s how …
- In Chrome, open up your website or live server version of your code
- Press F12 to load your web developer tools (or follow any of these other options here)
- If it’s not already turned on, turn on Toggle Device Toolbar
- Select the drop down of devices
- Choose Edit…
- Under Settings > Devices you will select Add custom device… under the Emulated Devices section
- Fill out the required information – be sure to have the proper width & height, or your final publication will not look right on the device you’re trying to add
- Be sure the new devices (and whatever others you would like to have in the drop down) are checked
- You can now select the devices to preview how it will look – or do a freeflow responsiveness test!
Using this, you can see what sizing options need to change in your media responsiveness sections. On my digital resume, you can see how the sizing changes based on the screen.
That’s all for today!
Thank you for spending your time with me to learn how to save yourself time and frustration with these front end development tricks. You could have been anywhere else, so I appreciate the opportunity to empower you for greater success.
Be sure to check back here, as I will be updating this post from time to time with additional tricks and tips to empower you on your programming journey.
I’m Kassandra the Prosperous Heart – & I’m here to help break the tech things down into easy-to-understand, byte-sized pieces for budding developers & entrepreneurs!
Thank you once again. I hope you have a wonderful and prosperous rest of your day.