Categories
Technology

Wireless Chargers for Geeks

In this day and age wireless chargers are not only convenient but likely going to become required with phones already removing expandable storage slots, headphone jacks and even physical sim cards. The only thing left is the charging port.

After trying out several wireless charging pads from Five Below I realized I needed to spend more than five dollars. Since I am already spending more than five dollars I might as well have a wireless charger that meets my personal aesthetic taste.

Different companies use different terms for marketing their wireless chargers. I have seen the terms “wireless charging pad”, “wireless charging dock”, “wireless charging phone holder”, “wireless charging stand”, and many more variants. In this article I am going to refer to two types. What I call a “wireless charging pad” I define as any wireless charger that lays flat on a surface and you lay your phone flat on that wireless charger. What I call a “wireless charging stand” is any wireless charger that can hold your phone vertically or horizontally at an angle.

Yootech Wireless Charging Pad and Stand

While this particular wireless charging pad doesn’t have a direct sci-fi or fandom connection it comes in at a great price for a sleek design. The pad charger is shaped in a circle and has a green LED that goes around the edge which lights up when charging your device. It also includes a wall adapter which is important to get the full 10 watt charging on the latest devices.

For not much more you can get a nice bundle of a charging pad and a stand. which is really nice for when you are wanting to have your phone charging while watching something. I find this nice for at a computer desk.

If you care more about geeky functionality rather than a geeky look then I would say this charger is for you!


Star Wars: Millennium Falcon Wireless Charging Pad

This Star Wars Millennium Falcon wireless charging pad may not look like much, but it’s got it where it counts. At least that is what Han Solo would tell you and then he would tell you about how it can wirelessly charge at 10 watts. Plus, there are two modes for the LED engines. The first mode only lights up when charging and the second when on will light up the LED engines all the time.

While it does come with a USB-A to USB-C cable and a wall adapter the USB-C plugs right into where the LEDs light up which can detract from the aesthetic. However, if you get a blue LED cable then you can have a wireless charger that even the emperor will be jealous of.


Star Wars: Mandalorian Wireless Charging Pad

This Star Wars Mandalorian wireless charging pad is the way. It can wireless charge at 10 watts and the T-Visor lights up when charging. It does come with a USB-A to USB-C cable and wall adapter which plugs into the top of the helmet.

If you really love the Mandalorian then you may want to buy a Grogu USB Cable to go with it so that the child can sit on Mando’s head.


Kitchen Suitable Wireless Charging Pad

This lemon slice shaped wireless charging pad perfectly blends right into your kitchen making it an adorable fun addition. Plus, it charges at 10 watts and comes with a USB-A to USB-C cable, but it does not come with a wall adapter. So, you may want to also buy a GFCI outlet that has USB ports or maybe a colorful wall adapter that matches the color of your wall.

Doctor Who: Tardis Wireless Charging Pad and Battery Pack

As you travel through time and space you no longer need to worry about being near a wall to wirelessly charge with this Doctor Who Tardis wireless charging pad that doubles as a battery pack.

It has a 5000mAh battery capacity and wireless charging of 5 watts. Comes with a short USB-A to Micro-USB cable but no wall adapter. So, you better hope The Doctor has one you can borrow to get this charged up but once it is, you can keep charging your phone on your adventures!

Doctor Who: Weeping Angel Wireless Charging Pad and Battery Pack

Don’t blink and run! Which you can do with this Doctor Who Weeping Angel wireless charging pad that doubles as a battery pack.

It has 5000mAh battery capacity and wireless charging of 5 watts. Which will allow you to charge even while running from Weeping Angels. It also comes with a short USB-A to Micro-USB cable. It doesn’t come with a wall adapter, though, so you’ll have to look away long enough to get your own.

Star Trek: Starfleet AcademyWireless Charging Pad and Battery Pack

The perfect Star Trek: Starfleet Academy wireless charging pad that doubles as a battery pack. You can make sure you get to your classes on time by charging your phone at your desk since this has 5000mAh battery capacity and wireless charging of 5 watts. Comes with a short USB-A to Micro-USB cable but no wall adapter, I am sure that you can borrow one from one of those Red Squad cadets. They will be impressed with this charging pad they will want you to join their ranks!

Star Trek: Starfleet Insignia Wireless Charging Pad and Battery Pack

No matter if you consider it the Starfleet Symbol, The Arrowhead or the delta emblem, this colorful version of the Star Trek: Starfleet Insignia wireless charging pad also doubles as a battery pack. No matter the class of your ship or where your missions take you, with this charging pad you will be able to charge your mobile communicator on any away mission with its 5000mAh battery capacity and wireless charging of 5 watts. It also comes with a short USB-A to Micro-USB cable but no wall adapter. So, you will have to replicate one of those yourself.

Star Trek: Starfleet Command Wireless Charging Pad and Battery Pack

May you live long and prosper with this Star Trek: Starfleet Command wireless charging pad that doubles as a battery pack It has a battery capacity of 5000mAh and wireless charging of 5 watts allowing you to go to maximum warp without worrying if where you are going will have a charging station. It comes with a short USB-A to Micro-USB cable but no wall adapter. However, that is a minor obstacle to a Starfleet officer like yourself; you can probably just requisition one.

Back to The Future VHS Wireless Charging Stand

Great Scott! This is a cool Back to The Future VHS wireless charging stand that will hold your phone and charge it at the same time! I am not sure how many gigawatts of electricity it can handle but it does come with a USB-A to USB-C cable. Still if you want to try out this temporal experiment of a charging stand and find out how precise it can charge you will need to find your own wall adapter.

E.T. VHS Wireless Charging Stand

Always be ready to phone home with this E.T. VHS Wireless Charging Stand keeping your phone charged. While it is charging your phone E.T.’s finger lights up just like in the movie! It also comes USB-A to USB-C cable, but you might have to trade some Reese’s Pieces for a wall adapter.

Ghostbusters VHS Wireless Charging Stand

You will always be ready to call with this Ghostbusters VHS Wireless Charging Stand. Just place your phone on this detailed stand and it will keep your phone charged and ready to call the Ghostbusters if you spot The Stay-Puft Marshmallow Man out on the prowl. Note that a USB-A to USB-C cable is included but no wall adapter.

SEGA: Sonic The Hedgehog Wireless Charging Stand

Gotta go fast with this SEGA: Sonic The Hedgehog Wireless Charging Stand! It is a retro packaging of the classic SEGA Mega Drive Sonic The Hedgehog game cartridge that has sprung to life with some Sonic arms and legs!

When you place your phone on the stand a golden ring lights up to indicate charging, and just like in the game, you know your phone is not going to die. In order to get this magic working they provided a USB-A to USB-C cable but it’s up to you to provide the wall adapter.

Jaws VHS Wireless Charging Stand

This Jaws VHS Wireless Charging Stand won’t take up too much room on your boat, even with the included USB-A to USB-C cable. Just don’t go in the water until you’ve fished out a wall adapter for it, as it’s the only thing you’ll need to provide yourself- besides the phone!

Pokémon Pikachu Wireless Charging Pad and USB Hub

You can choose this adorable Madcow Entertainment Pokémon Pikachu Wireless Charging Pad which is not only a charging pad but also a USB hub! You do not need to worry about this Pikachu doing a thunderbolt move on your phone as you can easily see when it is charging your phone because Pikachu’s cheeks will light up! Plus, you can charge up to 3 other devices via the 3 USB charging ports.

The links in this article are affiliate links, you can learn more about what that means on my affiliate disclaimer page.

Categories
Game Design and Development Unreal Engine 5

Toggling cursor visibility, mouse capture mode and locking to a viewport inside of Unreal Engine 5 via Blueprints

I will be honest, I feel like in Unity you can easily Lock, and Unlock your cursor but I really struggled for a while with this issue inside of Unreal Engine 5. I looked all over the web using search terms like “UE5 Lock Mouse to Viewport Issue”, “UE5 Show Mouse Issue” and of course switching out the term “issue” with “problem”. I did find a lot of posts out there but most of them only solved for one part of the problem. I believe I have figured out solutions to the issues I was running into. I even made a video talking about the solutions, but I also have gone ahead and written this article to help those who just need a refence point or for those who have watched the video and want stills of the Blueprints.

Fill free to watch the video on YouTube or stay on this page watch the embedded video.

If you don’t want to watch the video you want to have visual reference, I have broken down the blueprint below.

Here is the whole function end to end that I placed in the level blueprint.

Blueprint how I was able to Show/Hide Mouse Cursor Toggle while disabling camera control from mouse movement.

First, we have a trigger event you can have assigned to a key or button on a gamepad.

Next, we have a flip flop which will do first trigger the “A” path the first time that trigger event is fired and then the next time it is fired it will go down the “B” path. You will notice in both paths and all functions in these paths we are always targeting the same player controller.

Using SET we can show or hide the mouse. Since when the game runs our mouse is already hidden, we know that we want the first time someone triggers the event for it to show the mouse.

Next, you will notice that for path “A” we are setting the input mode to both game and UI. The reason for this is so that the mouse can be listened for on both UI objects and the game world objects.

Lastly, we have the look input function either ignore the mouse data or reset.

Categories
Game Design and Development Unreal Engine 5

Adding Camera Zoom Controls in Unreal Engine 5 via Blueprints

This is my first tutorial video on Unreal Engine 5. I have been learning Unreal Engine 5 myself recently and so I decided to make this tutorial showing the easiest way I have figured out how to add zoom to the camera of a pawn using blueprints.

Fill free to watch the video on YouTube or stay on this page watch the embedded video.

The rest of this article is some notes for reference later if you need after watching the video.

Example of Blueprint for testing the output of the mouse wheel axis only when it is being used.

Example of Blueprint for testing the output of the mouse wheel axis only when it is being used.

Example of Blueprint of the zoom controls with some reminders.

Example of Blueprint of the zoom controls with some reminders.
Categories
Web Design and Development

Scrolling is not bad, especially on mobile devices

This article was originally written in 2015 for a team of developers but is now published on this site for public consumption since 2022.

In April 2015 the amount of mobile only internet users surpassed desktop only internet users launching us into a new digital age of mobile first. It’s been over a year since then and it’s now time to look at how our mobile users like to view the web and what design changes we should be making.

After reading this article it made me realize I needed to adjust my view on website design especially concerning mobile users. The article brought out that the web is full of more and more designs that are “long scrolling”. Perhaps it’s a parallax design, one page design or infinite scrolling design. The common theme is mobile users love to scroll! The myth that people don’t scroll and that no one will see your content unless you make sure your it is above the invisible fold, like an old newspaper, no longer exists. Next time you’re on the subway or in a spot to people watch mobile users watch them. They love sites like social media and will continue to scroll and scroll just to see if they missed a post or just because they enjoy the gesture swipe interaction. The thing in design we have to remember is making sure it’s evident in our design that there is more to scroll to. So while the content does not need to be above a magical “fold” we don’t want users to think they are at the end of our page either. Some designers have decided to completely hide content to solve this and while some times that is good, like on a search results page where we may shorten or remove the description, it’s not always good for a page that is supposed to have content on it. Adding collapsed content like accordions or read more comes at a interaction cost.  Mobile users aren’t wanting to click a button to get to the next page or to read more of an article they like using gestures to navigate, they like the sliding feeling of a site going by normally caused by scrolling.

In fact gestures might be more intuitive than we once thought. A study back in 2009 showed that regardless of nationality or proficiency with mobile devices gesture-based controls seem to come naturally to us, or at least can be picked up quickly.  If that were the case back in 2009 just imagine how more true this is now in this new age. Think about the first gesture you learned on your mobile device. It was likely a swipe to navigate or at the very least to unlock your device. Since its the primary gesture for navigation on a mobile device it’s actually more natural and intuitive to scroll on a mobile device then click and drag a scroll bar on a laptop or desktop.

Now let’s think about the future of the web. I look at my brother-in-laws who are only 3 and 5 years old and they can use a mobile device with ease because of how intuitive gestures are and trust me they love to scroll. Growing up in this digital age of mobile first they will desire their web experience to be even more intuitive and even less interaction costs. As we are building the web for this generation we might see a path to pageless websites

Back to the present, the truth of the matter is In split tests, long pages often beat shorter pages. So as we build sites for our modern users, while we wait for this current one to grow up and build even more interactive sites than we dreamed of, let us not be afraid of scrolling content. Now why do I say content instead of design? Because sometimes the design can get in the way of content. While we don’t need to worry about the old newspaper fold when it comes to our content we don’t want our user thinking they are at the end of a site. If it’s perfectly okay if the content goes beyond the page or if content is below the initial view but we have to let the user know it’s there. After all most users don’t have or don’t notice the scroll bar that might popup while they are scrolling. A scroll bar varies depending on their device and browser. So we need to make sure our users know there is content to scroll to. This is especially important when the user goes to a new page on our site, they need to know they have landed on a new page. Since we can’t rely on a scrollbar showing how long the page is we have to make sure our layout is good enough to suggest there is more. Large design elements , such as banners, logos, navigation, search forms and etc, can cause the user to not realize they are on a new page with content. The last thing we want is the user having to scroll past a design to just find out if they are on the page that has the content they want. So if we have a large banner, maybe had an arrow high enough so that no matter you screen size the arrow is there and when you go to the next page maybe shorten or remove the banner all together.

Some goals while designing we can have:

  • Always be able to identify when you are on a different page on load.  A general rule (that might change as technology changes) is your headline for mobile shouldn’t be lower than 340px on the page.
  • While scrolling you should be able to tell that there is more content to scroll to. Don’t allow large images, videos, white space or element that are normally at the end if the site, like social icons, break up the content to the point where you can’t see the next piece of content.
  • Avoid collapsing content, its okay to collapse functions of a site like, search forms and other forms, filters, navigation. Things that aren’t content. Content is why the person is on the page. So if its just a page with a a sign up form and that is why they are there you wouldn’t collapse it but if the content was an article and you had a signup form after the article you could collapse that form so that the user can easily see there are related content links below that.
  • Test your design on devices before development
  • Test your design on devices after development
  • Allow for changes in the design after initial development 
  • Avoid auto scrolling on load, this takes control away from users. It implies we know best for the user, another reason we shouldn’t collapse content is we are suggesting to the user it’s not important they will want to scroll past that section. If we can auto scroll past a section or collapse it, maybe it’s not important enough to even be on the page?

Since we aren’t afraid of scrolling anymore in this age then Is infinite scrolling the way to go? We have seen some major successes with infinite scroll like Facebook, Instagram, Pinterest and some failures like Esty. There are pros and cons to infinite scrolling. Really infinite scrolling is great for combing over large amounts of information. A big flaw is the fact that you easily lose your place if you click away and try to come back. This site is an example of a solution for that but, it really is a limited use case. Most clients have a big header and big footer, really this is only good if you only want to see a list of results. So, the determination on infinite scrolling has to be made with the end user in mind, or else your site will fail like Esty did. Really based on most feedback from users if you aren’t building a social media site then infinite scroll is not the way to go especially with the fact that even in social media users give feedback of frustration on trying to find something they saw before.

So, while infinite scroll has its limitations remember, if you have to scroll a lot on a site, especially on a mobile device, that is okay. Don’t feel the need to collapse or hide content, if the content is long that is fine. If there is content after the main content, that is fine too. Users will scroll as long as design elements don’t suggest they are at the end of the page. Let’s cut back on interaction costs and allow users scroll or more likely swipe through our sites.

Please share this article with anyone you feel would benefit from it.

Categories
Web Design and Development

Fonts on the web

This article was originally written in 2015 for a team of developers but is now published on this site for public consumption since 2022.

For years we have used the term web friendly or web safe font. What is a web friendly font? Web friendly fonts are fonts that are pre-installed by many operating systems. In the past it was considered any font that was supported by both Windows and Macintosh at least by 90% as web safe by many. We would check this percent with websites like cssfontstack.com that estimate the percent a font is pre-installed on a computer. So generally speaking, web safe fonts were Arial, Arial Black, Tahoma, Trebuchet, Verdana, Times New Roman and etc.

There has been an increase of internet usage by smartphones 394% and tablet 1,721% higher between Dec 2010 and December 2014 according to comScore. comScore also reports that March 2015 marks a new era of a mobile first world with Mobile only users exceeding the amount of desktop only users. Now there is still a large percent of multi-platform users, but statics are showing as of July 2015 mobile devices make up 51% of internet usage in the USA.  Something else we have to be mindful of is the increase of other devices that can access the internet and internet users are buying these devices with many owning multiple devices that can access the internet.

So, the question arises. In 2015 can we still use the term web safe font? Arial has always been the choice of font for the web, but Android devices technically don’t have Arial instead it uses Droid Sans that looks similar. As previously noted, Arial black was supported 90% by both windows and Macintosh but it is not supported by iOS or Android. So that means while you may design and program text to look a certain way on a desktop it may not have that same look on a mobile device. And as different TVs and smart watches and other devices grow it will harder to call any font web friendly or web safe.

Should we use custom fonts? Although Android and iOS may not have the exact font we want to use in most cases when we stick to using Arial our designs will generally look the same on mobile as it does on a desktop. So, we should still try to avoid using custom fonts. Still some clients will want a fresh look so you may need to use custom fonts. In this case there are no concerns about it looking different between desktop and mobile but there are some things we do need to consider.

Performance when using custom fonts is extremely important. No matter if you are on a phone or a laptop you don’t want to have to wait for a font to load to see the site. So, when using custom fonts try to limit it to one custom font on the site. The other thing you have to be mindful of is even when you use just one font, how many versions of that font are you using? When you make a font bold or thin or italic that means an additional font file for each look. Try to keep this down as much as possible. You shouldn’t ever really go over normal, bold, italic and bold italic. That is 4 font files a user has to load. Depending on how large the font files are they could extremely hinder a person’s use of the website especially on a limited or slow data plan.

Hosting the file is the next thing you have to think about. If you are getting your custom font from Google Fonts or Typography or a place like that, they often offer a way to link to the font straight from your site to theirs but is that ideal? Think of it this way say you drive up to a fast-food place and order a combo meal. The burger comes out right away but then you see a worker run across the street into the next building and comes out with your fries. Sure, it didn’t take long but for a moment you didn’t have the complete order and you couldn’t leave the drive thru till you got your fries. It’s the same with allowing your fonts to not be hosted on the same site as your website there may be time where the site loads it is the wrong font and then it’s the right font. This can still happen when you are hosting the font on your server, but it does cut down on this issue. Hosting the font file on your own site also helps you keep control of the font and avoid the issue of the font you were referencing gets moved or edited it.

Creative and Development working together. When you are working in an environment where you have artists and developers working separately it’s a key thing for the artist to document what font they are using in their mockups. So that way the developer knows what web fonts are needed. When an artist uses google fonts, they can easily just provide the name and what styles they used. When using something like Typography it would probably be best if the artists can just provide the downloaded font from that site. No matter who gets the font communication is key between both parties for a good user experience for the end user of the website.

So, no matter if we are attempting to use common fonts or custom fonts on the web lets be mindful of all the users and the potential future users of our sites.