DEV Community: UIXKinguin

Monolith vs Micro

UIXKinguin — Fri, 09 Apr 2021 19:27:10 +0000

What exactly is a monolith and what is a Microservice? They're not exactly tangible and the definition seems a bit obscure at a glance so lets take some time to define both of them.

What is a Monolith?

It's a type of architecture where everything is self-contained in a singular pipeline. Think of your major CMS' like Drupal or WordPress. These are large applications/services that attempt to cover a large breadth of tasks and workload. It's both versatile but also very heavy.

What is a microservice?

Think opposite. These attempt to do a singular task or very specific task in a very small lightweight solution. Often times they are working in tandem with other microservices to achieve a larger task at hand. They are additionally usually paired with APIs so that they can properly communicate with other microservices.

Why is this important?

We as developers need to understand the mechanics behind this so that we can further refine our own understanding of web development, not just at a face value but the technologies that drive our workflow. The current trend is to rely on microservice technologies instead of monolith types. This is because code deployment is taxing and resource heavy when attempting to do deployments or fixes on Monolith type services. In a microservice type system we can deploy hundreds of times a day and fix small parts of the system that need work or make changes without having to fear of damaging the overall system.

Some industry leaders such as Uber, Netflix, and Amazon have realized this a long time ago and have shifted over to the microservice model.

How a deployment works with Docker:
Youtube

Why You Should Use Web Components

UIXKinguin — Fri, 26 Mar 2021 18:19:41 +0000

What is a web-component?

It's quite literally what it sounds like, a component that's on the web!...That's not exactly the whole gist of it but essentially its a block of code that works pretty much anywhere because of the fact that certain web standards pertaining to web-components have finally been met.

Around 2018-2019 Era of WebDev all 5 Major Browsers (Chrome, Firefox, Edge, Safari, and Opera) all came to a consensus on the web-standards surrounding web-components allowing for an increased modularity of code.

WC are essentially lego bricks that you can put into any build on the web and just have them fit. They don't run on frameworks or libraries, so no installations are required. Nor does it's functionality change due to the platform its on. ah the bliss of using vanillajs am I right?

WCs use Custom Elements and Shadow DOM and HTML Template in tandem to create some of the most creative modular code blocks we've seen in WebDev history.
Here's a short list of super convenient WCs:

A video player with a built in transcript scanner
A midi to sheet-music converter
to-do lists
Gallery Carousels
Anything you can come up with?

Some of the benefits of using WCs:

They can be deployed in any environment
They are modular and reusable infinitely
Versatile and Flexible
Communities can share/ship components to be used elsewhere

So what are you waiting for? Get out there and make some Web-Components!

Here are some extra links to help you get going.
https://www.webcomponents.org/
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Shameless plug:
https://youtu.be/_ZG1Jh3CDRs

Git Good starting With Github

UIXKinguin — Thu, 18 Feb 2021 22:04:08 +0000

Don't underestimate the power of version control. Long past us are the days of sending code over email. What are we, cavemen?

We have Github for that now. If you haven't created a Github account you are missing out on greatness. Kind of.
Github is an amazing tool, personal profile, workflow assistant, and damage control platform for teams to use. Using dynamic repositories and branching of repositories you can do amazing things to contribute to the work of code projects.

First and foremost is setting up a repository. Once that's done, you want to establish your team hierarchy, permissions, and such.

Using the power of cloning, branching, commits, pushes and pulls, you can separate a small isolation chamber where you can edit, change, and view your version of the application that you and your team is working on. This is what's known as branching. Once you've finished your changes on your branch you can commit to your branch. Push your changes and request your changes to be pulled / merged into the main branch.

That's your baby. Don't let anybody hurt your main branch. This is done using controls, discussion, and a request/confirm system that is native to Github.

There's a lot more to Github than just what I've talked about here but if you want to hear some more of my thoughts on that you can check out the video that I put out on it.

Video:https://youtu.be/CI6yyNpOncw
Channel:https://www.youtube.com/channel/UCDRkz-mU0NWAZTgN9kVc0Ag

Accessibility Audit on Amazon

UIXKinguin — Fri, 12 Feb 2021 18:28:13 +0000

Something that is taken into huge consideration when designing websites is how accessibility plays into it. Especially for larger corporations like Amazon having an accessible webpage for many different demographics is essential to their business.

How did Amazon do?
I first ran a LightHouse Report using a webtool called web.dev.
It came up with these metrics:
Performance: 44
Accessibility: 88
Best Practices: 86
SEO: 92
(Max 100)

As you can see the latter 3 categories scored fairly well. The performance category, however, did not fare so well. When I analyzed some of the details that the report had generated this is what I found.

Large amounts of unused JavaScript
Time to Interactive was at 7.7seconds (meaning that's how long you had to wait to interact with the webpage)
Images improperly formatted.

All of these things were found in the performance category. You might be asking, weren't we talking about accessibility not performance? Yes, but no.

By reading in between the lines of this report, you can make the assumption that when your performance takes such a large hit it will trickle over into your accessibility inevitably. Accessibility covers not only physical capabilities but also network capabilities as well. In the case of people with slower internet connection this webpage would be a horrible experience to browse.

Secondly I also ran a WAVE Audit. This kind of audit gets more into the nitty gritty details of accessibility and what you can do to fix the issues in your design. For example I found that ARIA menus were broken on the webpage. For people browsing the web that navigate via keyboard controls instead of a mouse, this would severely impact their experience. For example a user with tremors in their hands would use keyboard navigation instead of mouse for ease of access, but with a broken menu that would cause issues.

Video: https://youtu.be/pdrFRWhtK2Y
Channel: https://www.youtube.com/channel/UCDRkz-mU0NWAZTgN9kVc0Ag

into the rabbithole of Vue

UIXKinguin — Fri, 05 Feb 2021 19:37:05 +0000

So I got around to fiddling with Vue and this is how it went.
First I questioned myself a bit. Why should I use this framework?

Simply put.
Componentization.
...is that a word?

Anywhos! I decided I wanted to make a header component for a resume as it was pretty easy to visualize and separate in my head. First I made sure all of the CSS and HTML code were up to par and wouldn't get messed up because of me adding in Vue.
I added the script in and bam it magically started working. Not really.

First I had to go through and add IDs to the div or ul or whatever elements so that I could reference them in the JS. Next I went through with all of the proper bracket syntax and adding in the Vue Code. You can see my struggles in my codepen here.

Link to Code Monkey Heaven

In all seriousness it's pretty powerful in an age where development speed is taken for granted. You can create components for quite literally anything you can imagine. So flexible you could call it the Simone Biles of frameworks. You can find Vue componenets, create, your own, etc. Its like using legos to build a webpage and its all in all a really powerful tool.

If you want to check out a more detailed explanation of what I did. You can visit my YouTube Channel for more.
UIX Kinguin

Still Haven't Beat the Tutorial

UIXKinguin — Thu, 21 Jan 2021 23:38:18 +0000

Hey Everyone,
Kinguin here.

Its been a rough 2020 for a lot of folks. Including me. But to start anew I wanted to go ahead and introduce myself. I'm a new developer primarily focusing on UI/UX Design. I'm still having a lot of difficulty breaking into this world and any advice is appreciated.

In my personal life I love to watch and talk about anime as It's always been a hobby of mine since I was young. Everything from Gundams to Romance is fair game. I also enjoy skiing down snowy slopes and photography. If I wanted to sum up my interests in one word, it would have to be 'moments'.

There are moments in life that need to be captured, talked about, experienced and sometimes its almost impossible to replicate that. And that's why I've dedicated my professional life towards developing skills that will help me create moments of comfort in UX.

In terms of what I've worked on, it boils down primarily to passion projects and client projects.
Here is a short list of projects that I have worked on:

Penn State AMA Style Web App. This app was intended for specific use in large lecture settings and now can be flexed towards virtual learning as well.
Penn State Lost and Found Item Tracking App. This application was a consolidation of the original process of finding a lost item on campus.
Urban Outfitters Item Stock Tracking Mobile App. An application that was designed for internal use to help sales employees keep track of what was in stock and what was not.
Penn State Student Account Management Redesign. This application was a component of a large scale ID Account/Card management upgrade.

I appreciate learning new tools to help speed up my workflow along with browsing what other design trends are on the rise. My favorite design trend has to have been minimalism.

Although I have experience with coding itself in languages like HTML/CSS and Javascript, I tend to lean away from coding and lean more towards rapid fire wireframing and prototyping in development tools like Adobe XD, Invision Studio, and Figma.

I have a lot to learn in this vast expanse of the web and to be quite honest, it's daunting. I hope to learn many of the modern tools and platforms that developers use everyday so that I can slowly but surely grow as a developer/designer. I've recently learnt all about agile methodology, version control, and how varyingly different each company runs its development process. Expenses and realities... (yikes)

As I improve on this journey I hope to land a spot as an entry level or associates level UX Designer. The goal of Working together with the front end team to create something amazing and to create some social impact on the lives of the people that end up using the published product.

Youtube: https://www.youtube.com/channel/UCDRkz-mU0NWAZTgN9kVc0Ag
Newest Video on Adobe XD Plugins: https://youtu.be/yLloEGkvxWg