Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
34

Proper UI Hierarchy

from bt RSS Feed [alt+shift+b] in programming

Proper UI Hierarchy 2019-02-05 I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it’s core seems so simple - yet is overlooked in almost every current modern interface. I’m unable to pinpoint the exact reason why designers swapped out depth, hierarchical layouts and accessibility for muted colors, abstract imagery, illegible typography, and unimaginative flat designs. But then again, maybe I’m just a design-dinosaur of a time long forgotten. Maybe I need to adapt and move with the times. Or maybe the current design trends are just lazy. I’m pretty sure it’s lazy design trends. Stop complaining and do something As an example, I’m going to breakdown the process of improving the overall design on a set of “flat” button elements. Hopefully this demo article inspires even one designer to rethink their method when approaching UI design and push away from what is currently accepted as the “correct way to design UI”. And one final note before we deep dive into this demo: The statement that flat design is inherently worse than it’s predecessor is not subjective. By stripping away the visual cues that help users distinguish between interface elements you are purposely making a worse experience for them. Designers need to stop designing for other designers. What we will be designing In this demo we will be improving the default flat design inspired button layout of the following: Live CodePen Example Designing the skeleton This will be our basic HTML structure, along with it’s default styling (based on today’s UI standards): The HTML <div class="buttons-container"> <button>Sign Up</button> <button>Log in</button> </div> The CSS /* Parent container for the buttons */ .buttons-container { background: #E0E9EE; border-radius: 5px; display: flex; padding: 20px; margin: 0 auto; max-width:...
5th Feb 2019

Stay updated

Get a weekly newsletter with the top 5 articles worth reading every week.

More from bt RSS Feed

Installing OpenBSD on Linveo KVM VPS

Installing OpenBSD on Linveo KVM VPS 2024-10-21 I recently came across an amazing deal for a VPS on Linveo. For just $15 a year they provide: AMD KVM 1GB 1024 MB RAM 1 CPU Core 25 GB NVMe SSD 2000 GB Bandwidth It’s a pretty great deal and I suggest you look more into it if you’re interested! But this post is more focused on setting up OpenBSD via the custom ISO option in the KVM dashboard. Linveo already provides several Linux OS options, along with FreeBSD by default (which is great!). Since there is no OpenBSD template we need to do things manually. Getting Started Once you have your initial VPS up and running, login to the main dashboard and navigate to the Media tab. Under CD/DVD-ROM you’ll want to click “Custom CD/DVD” and enter the direct link to the install76.iso: https://cdn.openbsd.org/pub/OpenBSD/7.6/amd64/install76.iso The "Media" tab of the Linveo Dashboard. Use the official ISO link and set the Boot Order to CD/DVD. Select “Insert”, then set your Boot Order to CD/DVD and click “Apply”. Once complete, Restart your server. Installing via VNC With the server rebooting, jump over to Options and click on “Browser VNC” to launch the web-based VNC client. From here we will boot into the OpenBSD installer and get things going! Follow the installer as you normally would when installing OpenBSD (if you’re unsure, I have a step-by-step walkthrough) until you reach the IPv4 selection. At this point you will want to input your servers IPv4 and IPv6 IPs found under your Network section of your dashboard. Next you will want to set the IPv6 route to first default listed option (not “none”). After that is complete, choose cd0 for your install media (don’t worry about http yet). Continue with the rest of the install (make users if desired, etc) until it tells you to reboot the machine. Go back to the Linveo Dashboard, switch your Boot Order back to “Harddrive” and reboot the machine directly. Booting into OpenBSD Load into the VNC client again. If you did everything correctly you should be greeted with the OpenBSD login prompt. There are a few tweaks we still need to make, so login as the root user. Remember how we installed our sets directly from the cd0? We’ll want to change that. Since we are running OpenBSD “virtually” through KVM, our target network interface will be vio0. Edit the /etc/hostname.vio0 file and add the following: dhcp !route add default <your_gateway_ip> The <your_gateway_ip> can be found under the Network tab of your dashboard. The next file we need to tweak is /etc/resolv.conf. Add the following to it: nameserver 8.8.8.8 nameserver 1.1.1.1 These nameservers are based on your selected IPs under the Resolvers section of Network in the Linveo dashboard. Change these as you see fit, so long as they match what you place in the resolve.conf file. Finally, the last file we need to edit is /etc/pf.conf. Like the others, add the following: pass out proto { tcp, udp } from any to any port 53 Final Stretch Now just reboot the server. Log back in as your desired user and everything should be working as expected! You can perform a simple test to check: ping openbsd.org This should work - meaning your network is up and running! Now you’re free to enjoy the beauty that is OpenBSD.

21st Oct 2024 • 96 votes
Burning & Playing PS2 Games without a Modded Console

Burning & Playing PS2 Games without a Modded Console 2024-09-02 Important: I do not support pirating or obtaining illegal copies of video games. This process should only be used to copy your existing PS2 games for backup, in case of accidental damage to the original disc. Requirements Note: This tutorial is tailored towards macOS users, but most things should work similar on Windows or Linux. You will need: An official PS2 game disc (the one you wish to copy) A PS2 Slim console An Apple device with a optical DVD drive (or a portable USB DVD drive) Some time and a coffee! (or tea) Create an ISO Image of Your PS2 Disc: Insert your PS2 disc into your optical drive. Open Disk Utility (Applications > Utilities) In Disk Utility, select your PS2 disc from the sidebar Click on the File menu, then select New Image > Image from [Disc Name] Choose a destination to save the ISO file and select the format as DVD/CD Master Name your file and click Save. Disk Utility will create a .cdr file, which is essentially an ISO file Before we move on, we will need to convert that newly created cdr file into ISO. Navigate to the directory where the .cdr file is located and use the hdiutil command to convert the .cdr file to an ISO file: hdiutil convert yourfile.cdr -format UDTO -o yourfile.iso You’ll end up with a file named yourfile.iso.cdr. Rename it by removing the .cdr extension to make it an .iso file: mv yourfile.iso.cdr yourfile.iso Done and done. Getting Started For Mac and Linux users, you will need to install Wine in order to run the patcher: # macOS brew install wine-stable # Linux (Debian) apt install wine Clone & Run the Patcher Clone the FreeDVDBoot ESR Patcher: git clone https://git.sr.ht/~bt/fdvdb-esr Navigate to the cloned project folder: cd /path/to/fdvdb-esr The run the executable: wine FDVDB_ESR_Patcher.exe Now you need to select your previously cloned ISO file, use the default Payload setting and then click Patch!. After a few seconds your file should be patched. Burning Our ISO to DVD It’s time for the main event! Insert a blank DVD-R into your disc drive and mount it. Then right click on your patched ISO file and run “Burn Disk Image to Disc...". From here, you want to make sure you select the slowest write speed and enable verification. Once the file is written to the disc and verified (verification might fail - it is safe to ignore) you can remove the disc from the drive. Before Playing the Game Make sure you change the PS2 disc speed from Standard to Fast in the main “Browser” setting before you put the game into your console. After that, enjoy playing your cloned PS2 game!

2nd Sep 2024 • 96 votes
Perspective

Perspective 2024-08-06 I recently read both Starting Hospice and No Salt posted on Jake’s blog and was quite moved. I don’t know Jake and have never met him - but his writing and shared experiences give a very real look into his mind and perspective. If you haven’t yet, I strongly recommend giving his site a read (or at the very least those two posts). It made me reflect on my own life, shift my perspective and realize how fortunate I truly am. Losing Focus I think we all find ourselves losing focus on the truly important things in life. That’s normal and expected. Maybe your house needs repairs, or you’re crunching for an upcoming deadline, or your prepping for a long a work trip, or your stressed out hunting for a job. Whatever it might be, our brains are very good at getting derailed and putting all our attention into less important things. But I believe our minds need to wander and focus on the less important. Otherwise your mental health would suffer greatly. And I should note, some of these “stresses” still require our attention. I just don’t think they should consume us. I’m not advocating that we need to constantly be obsessing over the limited time we have on this spinning rock, or that we should smother our families with over-the-top love. Just stopping and reflecting on these things can really put any worries you have into perspective. It might be cliche to state the obvious, “Be grateful for what you have!” but cliche or not - it’s true. Jake will be leaving behind not just his friends and family, but also his wife who is 7-months pregnant. I can’t begin to imagine the range of emotions everyone close to him must be feeling. I know I would be furious, which doesn’t make sense since something like this is so far removed from human control. Being angry would just be wasted energy. But that’s easier said than done. I don’t have a whole lot else to say on the matter. This post also pales in comparison to Jake’s actual experience and shared perspective on his site. I really wasn’t even sure to share this on my site, in fear that I would be somehow disrespecting Jake’s memory (along with his much better writing skills and openness). But then I thought, if anything, I could help reach Jake’s story to even one other person and help them reflect on their own perspective as well. Now if you’ll excuse me, I’m going to take a long, purposefully slow walk with my family.

6th Aug 2024 • 47 votes
Dual Booting OpenBSD and Alpine Linux on a X220 ThinkPad

Dual Booting OpenBSD and Alpine Linux on a X220 ThinkPad 2024-07-10 I’ve always found it useful to run both OpenBSD and some form of Linux variation on my personal machines. Most times, I would default to running one OS on bare metal, while the other would simply live in a VM. This works okay but I prefer my operating systems having a “hardware separator” - if that makes sense? So, I set off to start dual booting both OpenBSD and Alpine Linux on my X220 ThinkPad. I should mention that I planned to write this blog post a couple weeks ago, but the original Dogfish mSATA SSD I ordered wasn’t compatible with my X220 (even though they say it is supported…). Luckily, I found a replacement drive in one of my “computer parts” drawer. Hoarding tech always prevails! The original Dogfish mSATA slotted in the X220. Too bad it didn't work... I came across my old Raspberry Pi 400, which I previously wrote about when stuffing an SSD inside it, and proceeded to gut the drive. It’s a cheap KingSpec SSD with a whopping 64GB of storage space. But that didn’t matter since the plan was to install the wonderfully small Alpine Linux. 64 GB would be plenty of space for us! Getting Started I already had the Alpine Linux ISO installed on a random thumb drive, so that made things quicker right off the bat. The next step was opening up my X220 and slotting in the very tiny mSATA. This introduced the first minor issue: the drive was too small. I could have looked into something more “professional-looking” in order to seat the drive properly but I decided to stick with electrical tape. Get it?… After applying the tape I closed the machine back up. The KingSpec mSATA slotted in the X220 and secured with top-of-the-line electrical tape... Installing Alpine Linux Next, I needed to tell the BIOS to boot into my thumb drive containing the Alpine ISO. Once the proper order was set, I rebooted the machine and ran through the standard Alpine installer. No problems to report there. My X220 booting into the Alpine ISO thumb drive The Alpine Linux installer showing both disk options for installation destination. SDA is currently running OpenBSD. Once that was done, I rebooted the machine, being sure to remove the thumb drive and set the BIOS order to point to the new mSATA disk. Then I ran through my personal Alpine Suck installer to get my go-to applications installed alongside my dwm desktop environment. Again, no problems to report during this process. Alpine Linux running my personal `dwm` setup. Absolutely beautiful. Extras? That’s really it. Nothing super interesting to report, but that seems to be the running theme with these older ThinkPad machines: they were built for tinkering and taking apart regularly. If I was less lazy, I could look into setting up a boot loader to avoid swapping between disks via BIOS settings, but for my use case this setup works fine. Now I have the power of OpenBSD and Linux on my personal machine!

10th Jul 2024 • 46 votes
Building rbenv on OpenBSD 7.5

Building rbenv on OpenBSD 7.5 2024-06-02 I use Ruby (specifically with Jekyll) for a lot of my clubs/projects while using my personal laptop (X220 ThinkPad) which is runs OpenBSD. Since I recently upgraded to OpenBSD 7.5 I thought it could be helpful for others if I shared my process of building and using rbenv to install different Ruby versions. Before We Build First, be sure to install the required packages in order to build from source, and then clone the core rbenv repo: pkg_add git gcc gmake libffi libyaml openssl git clone https://github.com/rbenv/rbenv.git ~/.rbenv Building rbenv Add rbenv to your PATH and initialize it (place this inside your .bashrc or .zshrc etc): export PATH="$HOME/.rbenv/bin:$PATH" export PATH="$HOME/.rbenv/shims:$PATH" export RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" eval "$(rbenv init -)" Then reload your shell (zsh in this example): source ~/.zshrc Next we will need to install ruby-build as a rbenv plugin. Clone the ruby-build repository into the rbenv plugins directory: git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build Installing Ruby and Setting Our Version Now use rbenv to install the desired version of Ruby (we will get an older version for this example): rbenv install 3.3.0 If you run into issues, you may need to specify your openssl directory: RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" rbenv install 3.3.0 If you’re on a slower machine (like mine) this might take a little bit. Just grab a coffee or a snack while you wait! Then navigate to your project of choice and set the local Ruby version: rbenv local 3.3.0 That’s it! If you’d prefer to set this version of Ruby for all projects going forward, simply replace local with global.

2nd Jun 2024 • 35 votes

More in programming

The classic console corner's CRT changeover

In the corner of the rear Floodgap lab sits a pile of classic game consoles. It used to look like this: Sega Dreamcast all the consoles here only came with NTSC RF output and date from the pre-flat panel TV era. That includes multiple Atari consoles (including the inevitable VCS, here a Darth Vader 2600), several Pong machines — including two Commodore units — with various chipsets, an Intellivision (as the rebadged Tandyvision One, my first) and a Bally Astrocade with lots of upgrades. It seems wrong to use them with a flat panel, and CRTs lag less. Plus, games with a light gun (here the Dreamcast and one of the Pong consoles) often rely on the CRT's rapidly scanning beam to know where they're pointed. So what do you do when the CRT TV goes bad? I should note that this isn't all the old school gaming fun in the house. In the commons next to the pinball machines are an Xbox 360 Slim and a PlayStation 2, and in the home theatre connected to the 3D projector is a PlayStation 3 since it has some stereoscopic titles. These might appear in future articles. But most of the rest are here. I bought this Panasonic Omnivision PV-M2035 from a friend at church in 1999 for $100 [about $200 in 2026 dollars]. He had no use for it, and the top of the plastic shell had been heat-warped by sitting in his car too long, but it worked, still had the remote, and was a suitably cheap TV for my unsuitably cheap studio apartment. I used it for local news and Friends with a set of rabbit ears, VHS movies, and speakers for playing music by connecting a CD player to the single rear input. When I moved to a less cheap 1-bedroom, it came along, and its flat top was flat enough to become a shelf for a DVD player. I got the Dreamcast from Fry's in 2001 after Sega discontinued it and managed to share the composite input between them. That apartment was my crashpad for about a decade before moving to the current orbiting HQ, whereupon I bought a passive-3D flat panel TV and moved the Omnivision to its current location in the back of the house. It shared the RF input between the Inty, and later the Atari 2600, and later still the Astrocade and various Pongs. At any one time there were at least four consoles always connected to it via switches and switchboxes, and I wired up an accessory port for more. plastic was broken and on these TVs that's pretty much the load-bearing part. When it arrived at the mailbox and I unpacked it, I could see the lower half had sandwiched right through the VCR slot, with visible PCB fragments and broken buttons; aside from the tube itself (ironically), the thing was a total loss. The seller nevertheless made good on the refund, to their credit, and I got to schlep it to the recycler. Overall, however, it had occurred to me that there were very few TVs sufficiently contemporary with the M2035 out there, which might be a hint about their general longevity. So, if I was going to be forced to buy a different Panasonic, then it might as well be a more recent one, and it should be one of the "triple play" units (i.e., TV, VCR, DVD) so that I could at least get rid of the external DVD player. Mission: Impossible '88 and '89 DVD sets, where the "in stereo" animation was even burned into the video stream.) not recording and thus impossible to watch many DVDs, for which the Sima CopyMaster was the cheapest solution: it simply blots out that portion of the vertical blank along with the pulses, which also has the side effect of sometimes stripping closed captioning (in the vertical blank as well), though DVDs with proper subtitles are of course unaffected. Later Sima devices could regenerate portions of the vertical blank for better quality, and Macrovision actually sued them over their products in 2005, but later settled. The mixer on the right was purchased literal decades ago at Radio Shack (more specifically a "Video Enhancer Stereo Audio Mixer") that I think we used for a Halloween display exactly once and then forgot about. Here it was used first as a cutoff switch, and second as a way to match the audio volume from the DVD player with the audio volume from the Dreamcast, which was also directly connected to the second rear Y-cable. This TV is mono, so the stereo channels from the audio mixer and the DC get merged using their own Y-connectors (also Radio Shack) before going into the Y-cable to the single line audio input. The video function isn't used here at all; it was just a audio mixer on the shelf I wasn't otherwise using. The DVD player is under the mixer and the CopyMaster, a cheapie Sony special that will only eject discs if it's in the mood or summarily threatened with violence. You already met this system when we adjusted the laser pickup and refurbished its rechargeable battery. you met the Tandyvision One (otherwise identical to the Mattel Intellivision Master Component, and manufactured by them as an OEM) when we installed a composite video modification and a front power-cutoff reset. I later upgraded it with an original Mattel Intellivoice speech synthesizer (Tandy never rebadged these) and a CuttleCart. But you haven't met the Bally on the bottom, officially introduced in 1978 as a game console and simple home computer, sold under various names such as the Bally Professional Arcade seen on early units, later the Bally Computer System badging here, and now collectively referred to under its final incarnation as the Astrocade. These machines were based around a 1.789MHz Z80 (half NTSC colourburst) combined with the same graphics hardware Dave Nutting Associates used for Midway's arcade games Gorf and Wizard of Wor, among others. Unfortunately, much of its theoretical graphics power went unrealized because it only has half the video memory of the arcade units (i.e., 4K) — and that's all the memory it has, so it has to interleave bits in the video memory to store BASIC programs, meaning only game ROMs can take full advantage. Still, that was enough to be solid competition for the likes of the Atari VCS and Fairchild Channel F, and it holds its own well against the slightly later Intellivision. does have is a doozy: the cooling vents are on the underside. These machines are very prone to overheating and can be easily damaged by it, which is why I use two foam struts to keep it off the carpet. The yellow label is for Astrovision, a separate enterprise that had been attempting to develop their own console. The (then) Bally Professional Arcade was selling poorly, though part of this was due to a tardy launch and Bally's weak retail presence, and Bally decided to sell off the consumer products division in 1979. Astrovision, unable to get their unit to market quickly, bought it in 1981 along with a limited license to the Bally name and reintroduced it at Winter CES 1982. Astrovision units are otherwise the same except for the badging and are the most common Astrocades today, though the company became another victim of the 1983 video game crash and went bankrupt shortly afterwards. Simultaneously, an Astrocade derivative merged with Bally's unfinished ZGRASS-100 expansion chassis was reworked into the Datamax UV-1 graphics generator, sold in small numbers until around 1982. the wall warts and power strips, and do a little spot vacuuming with the Roomba. out in spring. Gremlin's Blockade; and a simple calculator and screen paint toy ("Scribbling"). The display is a bit noisier than the Inty/Tandyvision, probably because of the difference in shielding, but still quite good. Videostak Video Game Center, which allegedly could accomodate a VCS, Intellivision or ColecoVision. The front decal is somewhat worn and the woodgrain veneer doesn't match the Vader VCS nearly as well, but it's still a fun-looking setup. Intellivision System Changer which has Atari 2600 hardware in an expansion box for the Intellivision II (useable on the original Inty with modification). It might be fun to explore the reputed irregularities between what is believed to be a VTI clone TIA in the System Changer and the slightly earlier Coleco Expansion Module 1 (and the related Coleco Gemini), and see how they differ in practice. Now for the Pong machines. These attach to the "accessory port" on the input switcher. The current Pong menagerie are mostly MOS 7600-based, MOS' own Pong-on-a-chip: two from Commodore themselves but PAL only using the MOS 7601 (the TV Game 2000K and TV Game 3000H), plus two MOS 7600 (NTSC) systems, a Coleco Telstar Gemini, not to be confused with the Coleco Gemini or Coleco Telstar, and an Allied Leisure Name of the Game II, possibly the earliest use of the chip in NTSC regions. We'll play the Name of the Game II and Telstar Gemini below. These will be consoles for another day, but I also have a boxed Atari Video Pinball, an "honorary" Pong machine though it plays several other games, and a boxed Atari Ultra Pong Doubles, which we had before we got the Tandyvision, but I don't ever recall it working fully and it later failed to power up and got thrown away, so this is a replacement. My least favourite of the Pongs here (I really only picked it up because it was cheap) is a 1977 Magnavox Odyssey 3000. The 3000 is basically an upmarket Odyssey 2000 with proper handheld controllers, but otherwise the same me-too AY-3-8500 Pong-on-a-chip generating the same black-and-white display. Allied Leisure Name of the Game II is a two-player Pong based on the MOS 7600-001. This chip notionally contains three field games (a tennis game, a "goal" game usually billed as either soccer or hockey, and a racquetball game) and a skeet shooter, but the racquetball game can be put into a single player mode by setting it to "four" players and the NotG2's switch triggers this mode in place of the skeet shooter. It was noisy on the other TV and it's noisy here, possibly because it has its own internal RF switchbox, but it plays fine. Coleco Telstar Gemini, an MOS 7600-004 system. This has two "pinball" variants (with flippers and moveable Pong paddles, so it's still a Pong of sorts) and two shooting gallery variants involving shooting a deformed bear sprite. The light gun connector is the same as the Coleco Telstar, so I borrowed the gun from that. sing along with The Offspring. But the output looks crisp through the rear jacks, the sound is proper stereo, and we now have front inputs I can use for something else without rigging a whole bunch of Y-adapters again. Plus, if the Telstar Gemini's gun works, it's all but guaranteed the Dreamcast's does. am likely to play some Video Pinball, and in its box that's easy to move, so that can go on top of the 2600 and the NotG and Telstar Gemini can sit next to it. The old TV is out in the garage and as I have time I'll extract its circuit boards and go over them more thoroughly, since I had a lot of good times with that television and it would be nice to fix. If I do, I'll write it up here, since it's an actual old VCR. Meanwhile, I have some possible projects in mind for the Tandyvision and Astrocade, and maybe some mods to go in the VCS, and you can read about those in future articles too. In the end, with the new TV all set up, the 1980s can live again in my rear office. Or, as my wife likes to point out, they never actually died there either.

an hour ago • 1 votes
Unattended reboots with encrypted disks

An introduction to ZKeys: a new service that stores encryption keys off-site and automatically locks access to them if the client machines go offline for a long period of time.

3 days ago • 1 votes
Education Shouldn't Be Held for Ransom

Google told K-12 schools they could turn off AI, but only if they gave up search too. That isn’t integration. It’s holding education for ransom.

6 days ago • 1 votes
AI Assisted Sermon

Once a year at my church, I usually give one sermon. I was asked to tie the theme to a young adult retreat we had taken to the Sunshine Coast. My first experience giving a sermon was many years ago at my old home church in El Monte, California. It was a Vietnamese-American church, but…

6 days ago • 1 votes
Fortune Telling and Speculative Design

Practical tools for design engineers to explore possible futures through speculative design

6 days ago • 1 votes
📚 BoredReading

You seem to be enjoying this.

Join free to unlock everything.

Create free account

Already have an account? Sign in