Helping you with web development and sharing resources from across the web
Category: Around the Web
The blog posts in the “Around the Web” category are posts where I wanted to share a resource or something useful that I found on the web that could help others.
I came across a few good articles, blog posts and tools that I wanted to share with you, from UX to avoiding bad habits and unprofessional vocabulary and more.
Promotion: Get 20% off with coupon code DISCOUNT20 – Coupon expires August 31st. Create your website today!
SurveyJS – An open-source Javascript survey library
Silent Sundays – A blog post from Jashele.blog, that talks about being a student software developer and how she took a break from learning and working on Sundays to avoid burnout. Also check out Jashele’s Silent Sundays, Part II blog post.
If you have any reactions or thoughts about these articles or tools listed, please let me know by leaving a comment.
I came across a few good resources I wanted to share with everyone, ranging from LinkedIn profile tips to job interview tips to optimizing Google fonts performance.
LinkedIn profile tips – Blog post from dev.to, you may not agree with every tip that is listed but they’re something to look at and consider
12 best job search websites – Blog post from roberthalf.com, with a list of job searching websites (a little arrogant of themselves to list their website as #1)
Optimizing Google Fonts Performance – Blog post from SmashingMagazine.com, where they give great tips on how to optimize load times for Google Fonts on your website
After watching a recent video posted by Google Chrome Developers on YouTube, I wanted to blog about using the “srcset” attribute in the “img” tag in your HTML code to make more web developers aware of this easy-to-use/add code that will help your website. Definitely make sure to watch the video and check out the example HTML code using “srcset” in an “img” tag all down below.
Reduce image size: use srcset to automatically choose the right image (from Google Chrome Developers YouTube channel)
So to implement the “srcset” attribute into your “img” tag all you need to do is use the HTML as in the below example.
As stated in the above video, the web browser will do all of the hard work as it will decide what image best fits on the website and if the web browser doesn’t support “srcset” then it will default to the image in the “src” attribute. Need more information about “srcset”? Then check out MDN’s documentation on responsive images.
After watching the above video, I came across another recent YouTube video that had a conference talk focused on modern image delivery techniques and what can be done to images to speed to up websites. I thought the presenter had some good informative points that all web developers should know about.
Fast and Beautiful Modern Image Delivery Techniques (from Coding Tech YouTube channel)
There are a lot of free online resources, including tutorials and courses. I put together a list of websites that offer free online courses that I wanted to share with others, hoping to help others. If you know of other websites that offer free online courses, please leave a comment. These websites are geared more toward courses on technical topics and coding/programming.
Here’s a quick tip that I thought would be helpful for others (and myself in case I forget in the future). I needed to take a screenshot of a website in the Chrome web browser and I remembered there was an option in the Dev Tools to do this but I couldn’t find it.
So I searched around online and found an answer, which is pretty simple and quick without having to install any extensions. Here’s what to do:
Open the Dev Tools (hitting the F12 key)
Press the “Ctrl”, “Shift” and “P” keys at the same time
Scroll down the list and find the light purple “Screenshot” rectangles and click the one with “Capture full size screenshot”
A prompt will come up asking you where to save the screenshot and you are done
My thanks go to hackernoon.com for the answer to my problem.
This will be a quick/short blog post with a few links to an article and helpful resources for developers.
HTML5 Input Types: Where Are They Now? – Blog post from SmashingMagazine.com, that talks about HTML5 form input types and shows their support in various web browsers
Picular – A free service to see many color variations and get their color code
Changing Our Approach to Anti-tracking – Blog post from blog.mozilla.org, talking about the Mozilla Firefox web browser is working on ways to “protect users by blocking tracking while also offering a clear set of controls to give our users more choice over what information they share with sites”
haveibeenpwned.com provides a free service to check if your accounts have been included in any of the many data breaches online
