Bostonian Adam

Blog

  • How to add a circle border around a Bootstrap icon

    I previously blogged about how to add a circle border around a Font Awesome icon back in 2019, but since then things have changed and Bootstrap now has their own icons, Bootstrap Icons. Can that same code be used today for Bootstrap 5 and their icons?

    The answer is pretty much, yes! The HTML and CSS code is identical with a few small edits. I made a few notes further down below about some changes to the CSS you can make. Please note that the below code is using Bootstrap 5.2.3 and Bootstrap Icons 1.10.3, and it displays a blue building icon with a red circle around it. Obviously, you can change the colors to your liking.

    CSS Code

    <!--Copy and paste inside the <head> tag-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

<style>
.icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid red;
    font-size: 5rem;
    width: 8rem;
    height: 8rem;
}
.icon-wrapper .bi {
    color: blue;
}
</style>

    HTML Code

    <!--Copy and paste inside the <body> tag-->
<div class="icon-flex">
  <div class="icon-wrapper"><i class="bi bi-building"></i></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    A few notes about my CSS code

    • In the “.icon-wrapper” class…
      • You can change the color and thickness of the border by editing the “border”
      • You can change the size of the icon by editing the “font-size”
      • You can change the size of the circle by editing the “width” and “height”
    • In the “.icon-wrapper .bi” class…
      • You can change the color of the icon by editing the “color”

    Please let me know your thoughts about this code and if you have a better or more efficient way to do this. Always feel free to share your knowledge and thank you for reading this blog post.

  • How to zoom in using CSS transitions

    Ever mouse over an image on a website and it zooms in subtly and then you move your mouse pointer off the image, and it goes back to normal? Well, they are most likely using a CSS transition to make that effect.

    Below is some CSS and HTML code to use to make that effect. Yes, that is all the code you need. Check out the transition and transform pages on Mozilla’s MDN Web Docs for more information.

    CSS Code

    <style>
.img{
  transition: all 1.1s ease;
}
.img:hover{
  transform: scale(1.1);
}
</style>

    HTML Code

    <img src="path to your image file" class="img">

  • Sharing tech news and resources – Jan 2023

    Wow it’s 2023 already. There were a few articles and resources that I meant to share but did not, and even though some may be from last year, the information in them is still relevant and useful.

    Resources

    • Want to understand the different between Git, GitHub and GitHub Desktop, then check out this YouTube video, I definitely recommend it. (Video by Coder Coder via youtube.com, February 1, 2022)
    • A very helpful and useful HTML resource about what not to do and how to do it right (Source: HTML Best Practices via github.com)
    • Anyone who works with HTML emails knows that it can be a pain sometimes to troubleshoot issues across different email clients or even different versions of an email client such as Microsoft Outlook, and I found this Litmus article to be useful. (Source: Outlook Email Rendering Issues and How to Solve Them via litmus.com, August 18, 2022)
    • To opt out of personalized advertising on your iOS device or Android, make sure to do these few easy steps on your phone so you won’t be tracked. (Source: Delete this secret ID hiding on your phone that gives away your personal details via komando.com, November 25, 2022)
    • If you have ever searched your name on the internet and found personal information in the search results, well you can do something about it, make sure to check out this article. For me, #2 on their list is the most important as data collection sites are annoying and seem to be popping up more and more. (Source: Your Private Data Is All Over the Internet. Here’s What You Can Do About It via cnet.com, April 4, 2022)

    Tech News

    • Google Chrome web browser is going to stop being supported on Windows 7 and Windows 8/8.1 soon. Google Chrome version 109 will be the last version of the web browser that will be available on those older Windows operating systems, as Google Chrome version 110 will require Windows 10 or later. (Source: Google Chrome will stop working properly on millions of Windows PCs next week via metro.co.uk, January 3, 2023)
    • If you use the Google Chrome web browser, then definitely check out this article about it using your computer’s memory. (Source: Enable This Setting to Stop Chrome From Hogging So Much Memory via lifehacker.com, December 9, 2022)

  • A beautiful quote on diversity

    I was on LinkedIn a few weeks ago and came across a post from Diversity, Equity, & Inclusion, a Business Consulting and Services organization in Atlanta, Georgia. The post had a great quote, which is down below, that made me smile while reading it and made me wonder, why can’t we all see that diversity is good? What are some people afraid of? Change? What? In any case, I think this is a beautiful quote and one we should all live by.

    “We are all different and that’s beautiful because it goes to show that diversity is not something we should be afraid of. It’s our strength and it helps us build connections with other people and find ways to better ourselves. We should embrace it.”

    Source: A post by Diversity, Equity, & Inclusion on LinkedIn

  • Sharing tech news and resources – July 2022

    I wanted to share a few articles regarding tech news and also a few interesting links I found around the internet. First, I posted a few quick notes in bullet points and then I list out a few articles/blog posts I found that I wanted to share with you and give my thoughts.

    • I was on GitHub this week and noticed an article on their The ReadME Project, about turning the tables in your job interview where you ask the interviewer some important questions that I found interesting and useful. You can read the article, Interview the interviewer, on GitHub.com.
    • Google Chrome and Microsoft Edge have both had updates recently to fix exploits, so as always, make sure all of your web browsers are updated to the latest version to keep safe.

    Gmail has a new view

    Google’s Gmail has a new integrated view coming, which tries to make it easier to switch between Gmail, Chat and Meet. I was able to see this new view with one of my Gmail addresses and don’t worry, there are no big changes to your Gmail. You can read more about the new view and see images of it in the article, Updated timeline for the new integrated view for Gmail, on WorkspaceUpdates.GoogleBlog.com.

    Google Keep

    Google Keep is my favorite app to keep notes on my cell phone and a new update brings a feature that lets users drag and drop images saved in Google Keep to a third-party application. This info was found in the article, Google Keep now lets you drag and drop images to other apps, on AndroidCentral.com.

    NES games in 2022?

    I love playing video games so seeing this next story was really cool. GitHub posted on their LinkedIn, how some people are still creating games for the original NES (Nintendo Entertainment System). The post included a link to a Reddit post where the author explained what they tried and also gives links where to find the kits to do the same. The original NES was the first console my brother and I had, so hearing about this brings back good memories. This is really cool to see and I wonder what talented people may make with these kits.

    Need to erase data on your hard drive?

    The Washington Post has an article talking about how to delete data from your hard drive that I found interesting. I am no computer hardware expert so I can’t say these are the best ways to do just that, but do note that one of their approaches is to actually take the hard drive out and physically smash it to pieces. You can read the article, Deleting files is not enough. Here is how to properly erase hard drives., on WashingtonPost.com.

    Google Chromebook

    I bought a Google Chromebook a few years ago when they were on sale on Amazon.com and I’m glad I did. It has been useful for when I went out of town for personal or business trips. I highly recommend getting one for basic computer use (checking email, going online and visiting websites, editing text documents and completing other basic tasks). I found an article where the writer switched to a Chromebook for a week and gave their thoughts, you can read the article, I switched to a Chromebook for a week. Here’s what surprised me as a Windows user, on DigitalTrends.com.

  • New Edge browser feature saves resources when gaming

    In June, the Microsoft Edge web browser had an update where it released a new feature called “Efficiency Mode,” which helps improve power usage by saving computer resources (CPU usage). This is especially useful when running high resource applications on your PC such as playing a video game or even when you’re running applications that hog resources, such as Adobe Photoshop.

    How to turn on Efficiency Mode

    Follow the below steps to turn on “Efficiency Mode” in the Microsoft Edge web browser:

    1. Go to the browser settings (click the three dots icon in the upper right) and click “Settings” which is near the bottom of the vertical menu that appears
    2. Now on the “Settings” page, on the left side, find “System and performance” and click it
    3. On the right side, under “Optimize Performance” you can turn on “Efficiency Mode” by enabling the first two settings as in the screenshot below, and you’re done

    Screenshot

    Screenshot of Edge's settings, Optimize Performance section

    A competitor to Opera GX?

    If you didn’t know, the Opera web browser has their own separate version specifically for gamers, named Opera GX, which lets you set limits on CPU, RAM, and network usage. I do wonder if the Edge web browser, with this new feature, will challenge the Opera GX browser specifically for use during gaming? Opera/Opera GX are also based on Chromium, as Edge is. I’ll have to try out both for myself when I game, but if you use one or the other web browser while gaming, let me know how it goes.

  • Sharing resources and tech news – June 2022

    This will be a quick blog post where I wanted to share a few online resources and also discuss a few interesting articles with a brief summary and get your thoughts.

    Resources

    • AnimatiSS – A collection of CSS animations for your web projects. If you visit the website, click the “STYLES” button to see the different CSS animations you can choose from. (Credit goes to Ray Villalobos for sharing this link on LinkedIn)
    • Avataaars Generator – A free online avatar generator
    • Tabler Icons – A free open-source collection of icons to use for your website or app. (Credit goes to Ray Villalobos for sharing this link on LinkedIn)

    Adobe Photoshop

    Adobe is currently testing a free web version of its popular Photoshop software in Canada, where users can use its core functions. According to the article I read there is no timeline when the free web version will be available to other locations. This info was found in the article, Adobe plans to make Photoshop on the web free to everyone, on TheVerge.com.

    I personally think this is great, especially for those who have never used Adobe Photoshop before. I remember before my wife and I started paying for the Adobe Creative Cloud subscription, which includes Photoshop, we had to use free image editing software and I could never get use to the user interfaces, and they were missing features (or I couldn’t find them LOL) that Photoshop had. Also, the high price tag that Photoshop once had (before Creative Cloud) kept us away from it. Are you going to try out the free version of Photoshop or are you already paying for it with Adobe Creative Cloud?

    Google News

    Do you use Google News on your desktop? Well if you do, you most likely have seen an option to switch to the new look. The biggest change was moving the main categories from the left side of the page to across the top which I like. If you want to read more about this, check out the article, Google News gets more personal with desktop redesign, on TheVerge.com.

    Amazon Alexa

    Amazon is working on something creepy… they are developing a feature for Alexa which can emulate anyone’s voice. The article I read even suggests it could emulate a dead person’s voice. This info was found in the article, Amazon demonstrates Alexa mimicking the voice of a deceased relative, on CNBC.com.

    To me, this screams security concerns and ethically just wrong, but that’s just me. My wife and I don’t even have Amazon Alexa. What do you think of this? What benefits does this bring?

    If you made it all the way down here, thanks for checking out my blog post, I appreciate it. Stay safe and try to do everything in love, the world really needs it.

  • Sharing what made my first job memorable

    A few weeks ago, I was on the LinkedIn website, and they had a question under the “Start a post” section to try and get users to share their experiences, which was, “What was your first job and what made it memorable?”

    I shared my experience on LinkedIn and I thought I would share it as well here on my website, but with names and companies redacted, as it may help those who are looking to start their first job.

    For me, I think it was back in 1999 or 2000, my first job was at a local grocery store, which was about a 20-30-minute walk from home. I started there as a bagger, helped bring in the shopping carts from the parking lot, helped stock shelves, then was trained to be a cashier and I helped with that when it was really busy in the store.

    What made that job memorable for me was that I made friends with four really nice co-workers. They were all pros at the job, they were patient with me as I learned how things worked there, and they made the job fun. I won’t ever forget that.

    My advice to anyone starting their first job, or any job really, is to find the nice people there and try to make friends with them. I received this same advice and fully agree with it.

    What about you? What made your first job memorable?

  • WordPress 6.0 and what’s new

    On May 24th WordPress 6.0 was released and I’m excited to see the changes and future upcoming additions and improvements to the CMS. WordPress noted that this release has over 600 updates and over 600 bug fixes from more than 500 open-source contributors. I wrote out a quick list of features that came in 6.0 down below, but you can also watch a cool video the WordPress team put out showing what the update is bringing, which is also down below.

    Fun fact that the WordPress team included in their blog post for WordPress 6.0, is that WordPress powers more than 42% of websites worldwide. That is just amazing.

    What’s new

    • Style Switcher, block themes now have the option to change between multiple style variations
    • Expanded template creation, block themes now have new template options for author, date, categories, tags, and taxonomy
    • Writing improvements, selecting text across multiple blocks; keeping styles when changing block type; and customize buttons, tag clouds and social icons
    • Integrated patterns, patterns are now available to use in more places
    • A new color panel, border controls, flex-based container blocks, improvements to the list view, and block locking

    Introducing WordPress 6.0

  • Handling loss

    Back in April I did something I don’t normally do, I opened up on my personal Facebook account where I talked about how I was feeling. My mom passed away a few years ago and my dad passed away earlier this year due to covid, I am now in this world without the two people who brought me into this world and it feels weird, there is this empty feeling inside me, like a piece of me is missing.

    I had wrote this over the course of February and March but only got the courage in April to post it. I thought I would share it publicly, as maybe it will help others somehow who are feeling the same.

    I Miss You

    The two people who gave you life,
Who brought you into this world,
Are no longer in this world,
There's this empty feeling,
Something missing inside,
Nothing will replace it.

You're keeping on,
Trying to stay strong,
Remembering the good old days,
Those memories that make you smile or make you burst out in random laughter that have others ask if you're ok,
The memories only you and your brother know of,
The car wipers story,
Dad driving off while you were changing seats with your brother,
The family time car drives,
The Blockbuster video rental weekends with chips and dip,
Street hockey at a nearby park and hitting dad in the not-so-good spot as he tried to play goalie.

But also remembering the bad,
Knowing mom had demons she fought, but she always, always made sure we were fed, clothed and that we were good,
You take the lessons they taught you,
You learn from your mistakes and their mistakes,
You vowe to yourself to never do what scarred you deep so long ago,
You do the best you can,
Hopefully they're looking down at you, pleased and proud,
The love they gave you, you hope you can give the same to others.

You keep keeping on,
Doing good as much as you can,
Knowing you will mess up, we all do,
But don't beat yourself up, learn from it, do better,
Do everything in love,
Hopefully making this a better world in the end.

    If you read the whole piece, thank you.