DEV Community: Morgan Smith

I completed the Daily UI challenge, was it worth it?

Morgan Smith — Mon, 16 Dec 2019 18:29:33 +0000

As a front end developer, I get bombarded with “challenges” to up my skills every day. I try to find challenges that are worth my time and will make me a better dev. When I heard about the 100 days of UI, I thought it was perfect! Each business day, a prompt is emailed to you, something like “checkout”. A small enough prompt to get me started, but not so overdone that I would get overwhelmed. Plus, when I didn’t have a strong design portfolio. I was so excited about this challenge. If you are already sold on doing it, you can click here.

I knew from the beginning that I wanted to track my progress and that I also wanted to track how I felt about my skills and the project as a whole. I created a document that was broken up into sections each day like this:

Day 1- Sign up form
Feelings about doing it:
Process:
Feelings after:

I did this for every single day of the challenge, however, most of the thoughts were much more emotional. Such as from day 42, where the prompt is a do to list my feelings about it were “UGH NO SO FRIGGEN FRAGGEN BORING”. During this process, I learned a lot about how I work. Setting up time is vital for these types of work to actually happen, otherwise, I would do like 6 of them on a Sunday morning then not touch it for a week. The quality of these fast ones was much lower than of the daily ones for sure. I learned that I need to follow the normal UI flow of making the design in a tool like Figma or Adobe XD.

Another design tip that I learned was what online resources I could find for design inspo, such as Dribbble or even Pinterest. One of the hard skills that I got from 100 days of UI is I am much more comfortable with Bootstrap. I also learned that I can do big things like this. If you would have told me even a year ago that I would complete Inktober, hacktoberfest, and 100 days of UI in the same year I would have laughed because it would have seemed impossible. I also learned a lot about critiquing my own work.

Here is my least favorite piece I did, it was supposed to be a landing page for downloading an app.
This was my least favorite because it could have been really interesting, but I was lazy. The colors are wonky, the font is sized incorrectly, and with most of my other codepens, the buttons would at least do something. This is a perfect example of me not putting enough work in, and in return only learning what not to do.

This was the piece I am most proud of was my CSS/HTML recreation of a train pass.
I am most proud of this piece because I really learned how to use CSS grid, and I am really happy with the background texture. I would have liked to spent more time finding the actually icons the tickets use, but I made do with the icons I had at the time. It was also a wonderful learning experience to think about in-depth how the tickets look and what choices were made.

Runner up:
progess bar
This was just fun little js experiment

Normally the phrase “you get what out what you put in” is annoying to me. However, in this case, I do really feel like if I would have taken this more seriously I would have learned a lot more. If I ever did something like this again I would probably ask someone else to do this with me so I would have had more accountability. I also learned that it is vital to have a plan before designing components, so next time I will be sure to make a plan before I just start. I do think this challenge was worth it, and I think if you are interested in I would do it.

Again, the signup link is here.

How to make your own eCommerce site on the cheap-Part 2

Morgan Smith — Wed, 20 Nov 2019 21:20:12 +0000

This is a continuation of this article > "How to make your own eCommerce site on the cheap-Part 1". At this point, you should have a server and a domain name set up. Now, we are going to take it from a blank landing page to a real store! At this point, you can lean on the Magento dev docs, and a few other resources to get everything you need.

Next, you are going to actually download the software from Magento.

Go to this link:https://magento.com/tech-resources/download
Click download on the latest stable version of Magento 2 with NO sample data as a zip file. The sample data build tends to break more than the build with no data. And, you probably want to put your products on the site anyways without deleting a bunch of made up products.
You will be asked to make an account, complete the account creation process.

Now that it is downloaded you will log into your server and upload the zipped file to the root of your file system. If you unzip the file before you try to upload it, it will take a long time. There are a few different ways to do this, but since you are using Plesk it is very easy.

Log into your server
Click Files in the left navigation
Click upload and upload the zipped file
Move it to your document root, which is httpdocs
Unzip the file. This may take some time

Once it is unzipped, you can follow the Magento install instructions which I will just link because they are pretty good. These are the instructions you want to follow: https://devdocs.magento.com/guides/v2.3/install-gde/prereq/zip_install.html. If you run into any issues during your process, there is a very good chance someone else has ran into the issue and you can just google the error message and get good results and help. The dev docs (which is what the link with the instructions is a part of) is a great place to start but you also have Magento’s StackExchange. This is a great place to ask questions and find answers, but be sure to follow community guidelines. Additionally, because Magento is opensource you can find out a lot on their GitHub: https://github.com/magento/magento2 .

After installation, you want to log on to the back end through the admin link you created during installation. Let’s walk through some steps you will need to do to get your store running. When you first log into your backend you will probably get an error about “index not valid” or “cron job not running”. This just means you don’t have your backend jobs running properly, so you will go index management from the side menu:

Then select all indexes and update to schedule, so that it looks like this:

This can also be done through the CLI, which is the faster more recommended method. This is the command if you want to do it that way:

php bin/magento indexer:reindex

After updating your index, your error message will change to “your cache is out of date” or a similar error. From system tools go to cache management and select all and refresh. These should all also be enabled, so if any are disabled, enable them. You may also need to Flush the cache. This step can also be done with the CLI and the command is:

php bin/magento cache:flush

After this, your site will be operational and now you can do fun stuff like adding plugins, products, and themes. Once you get your site fully customized and have set up all of your payment handling solutions, you are good to go!

Here are some recommendations to get your site perfect (not sponsored):

Plugins:

Payment processing: Stripe
Tax handling: Taxjar

Themes

https://marketplace.magento.com/

It is also recommended that you set up remote backups on your server before you do too much so that you can always restore your site.

Products can also be uploaded via CSV, and there are many paid services that will help you switch your products from a different system to Magento 2 if you already have a lot of products on another system.

It is also recommended to set up your site on Cloudflare, which helps prevent DDOS, and can make your site a lot faster.

Remember, the Magento community is open source so ask lots of questions! Good luck!

How to make your own eCommerce site on the cheap-Part 1

Morgan Smith — Fri, 15 Nov 2019 02:46:57 +0000

Many tutorials will teach you how to set up Magento on a server, but if you don’t know what a server is those tutorials might not be that helpful. This tutorial is for people who are running their own small business and are either: selling on Etsy/Amazon/eBay or wanting to start selling online but unsure of where to start. You do not need to know how to code for this tutorial, but you will need to be able to read error messages and keep good documentation. To have an online store, we need a few things:

A place on the internet for your site to live (your server)
A way for other people to get to your website (a web address)
eCommerce software (this is where Magento 2 comes in)
A few other things (marketing, order management, etc)

This document will guide through the entire progress, and by the end of it, you’ll have an eCommerce site that is one-hundred percent yours. This will cover the first two items on the list.

Our first step is going to be to find a home for our new website. There are dozens of hosting options that you can use. Digital Ocean is one recommended resource, but we will be using AWS because you can set up many of your services under one account, which makes accounting much easier. AWS is Amazon Web Services which hosts a huge array of services. We are going to focus on four services: Lightsail, Route 53, billing and cost management, and key management service. Let’s get our server set up:

Make an AWS account
Login to your management console
Click services near the top of the page, and under the compute section click on Lightsail, you’ll be taken to a new page

Now you will create an instance-click the create instance button, these directions go in order with the options that are presented.

On the select a platform choose Linux/Unix
On the select a blueprint select Plesk Hosting Stack on Ubuntu
Don’t worry about the launch script.
The key pair is an important step! Keys are how we will be able to get into our server. Click create new and give it a name. When it asks you to download the key, make sure you save it somewhere safe. If you lose the key, you won’t be able to get into your server.
Automatic snapshots are a cool feature, but not needed as you will be setting up backups later.
For your instance plan, either the 20-40 dollar plan is good for most businesses, but I have gotten it to work on the 5 dollar plan.
Identify your instance- give it a name (probably your website name, but besides organizing billing, this name doesn’t matter)
Tagging options is a cool feature that amazon gives you to track your billing easier if you are hosting multiple stores. These tags will show up in your billing console.
Click create!

Congrats! You are now hosting a server in the cloud! This will take a moment to spin up, so we will move onto our next step while that loads.

Our next step is to buy a domain name for our website. This is the URL, like google.com. Again, much like server hosting options, there are dozens of different providers to get this domain. For the sake of keeping billing simple, we will be using route 53, but if you have a domain name on another system you can skip this step.

Go back to your management console
Click services and search for route 53 (or scroll to networking & content delivery)
Under the Register domain section, type the domain name (like google) for your website. If you don’t have one in mind(or yours is taken) many sites can help you generate a name
Click check, and hopefully, it will process. If it doesn’t try another name, or instead .com, maybe a .co

Awesome! Now you have a domain name and a server. Now you need to make them talk to each other, so let’s head back to the server. At this point, the server should be running and you are going to click it. You will be taken to this page:

Now, click on the networking tab. What we are going to do is change some rules so that our server will work as expected. Scroll down to firewall and click add another. Add rules so that it looks like this:

Now go back to the connect tab, and click connect using ssh. This is going to open a terminal, which looks scary, but I promise it’s not. If you get an error that says it can’t connect it might not be done setting up, so you may just need to wait a few more minutes.

So all that you need to do is follow the directions and type “sudo plesk login” and hit enter. You will be given a URL, which you will copy and paste into a browser. You might an error from your browser telling you that your connection is not private, but that is because you have not yet set up your certification.

You will be asked to make an admin account, this is very important. Once you log in there will be a button that says “add domain”.Follow the instructions being sure to hit the button that says “secure the domain with Let’s Encrypt” if it gives you errors, don’t worry about it and you can try again later.

At this point, if you go to your website, you will get an error. That is because you haven’t finished updating our relationship between the server and the domain name.

Copy your IP address. This is the 4 numbers separated by periods like this 0.0.0.0
Head back to route 53
Click hosted zones
Click your domain
Click create a record set
Create an “A” type record with a name of blank and value of your IP address.
Click create

Awesome! Now if you go to your website you will get a page that says something like “this website isn’t set up yet!” This means your server and your domain are now linked to each other. We are going to stop at this point, and next time we will learn how to get Magento up and running!

SEO & accessibility

Morgan Smith — Mon, 29 Jul 2019 19:12:32 +0000

Hey everyone, this will be the last article in this quick series about accessibility. Today we will be talking about SEO and accessibility. While many developers know what SEO is, I would like to define it so everyone is on the same page, and I’m also going to do that for accessibility in the context of web development. The most important reason to make your site SEO friendly is easy to understand: the better your SEO, the more clicks you will get from google. SEO stands for search engine optimization, and this can take place in many different ways, from speeding your site up to adding alt tags. We will be discussing some SEO tips that also improve your accessibility. I’d also like to take the time to talk about some other forms of accessibility that may not get touched on as much, in the development community. Then I want to walk through how making your site accessible makes it more SEO friendly.
One of the biggest things that impact your SEO is your mobile site speed. Google does this for a few reasons, but I think the biggest two are that people are impatient, and there are still many people who do not have a good connection to the internet. I will not spend time discussing why people are impatient, everyone has their own opinions on that. However, I do want to spend some time discussing why it’s important to design your site with poor connections in mind. There are many people who either have older devices or live in places where there isn’t accessible internet. So making your site light, fast, and responsive means your SEO will improve and it increases the number of people who can access your site. Making a site faster also makes more accessible for a few reasons, it makes it easier to navigate since tools will be faster to load. I’ve also noticed that faster sites tend to have a very clear hierarchy, which makes your site have better SEO + easier to navigate for everyone.
Other things that can improve your SEO scores are things like adding all of your alt tags. Labeling your images helps two groups: the spiders that rank your site and people who use screen readers. Another quick tip is to make sure you use contrasting colors, as this helps people with vision issues, and it will help your SEO score. One final tip is to ensure all of your links have descriptions and make sure it is clear that the link is a link. This is so that keyboard users will be able to navigate your site better, and it makes it easier for the spiders to map out your site.
I hope these definitions and tips helped you learn something new today!

Jumpstart your accessibility journey

Morgan Smith — Fri, 19 Jul 2019 19:02:24 +0000

I have seen a groundswell of articles discussing accessibility and what it means for developers, but I haven't seen as many articles discussing how to make your site accessible. So, I wanted to talk about some quick tips that can help any level of developer(and/or designer) to make their projects more accessible. First, I’ll talk about how developers can test their sites, then discuss some resources that I have used to make my sites better. Finally, I’ll list out some tools that I have found to be helpful.
Sometimes when people use a new metric to judge websites it can be very stressful for developers. What comes to mind is when google changed their metric to focus on mobile-first, which forced many devs to change the way that they made their sites. In the same way, it feels like accessibility is currently going through this change. To make it less stressful, the first step is to understand the metric and how you measure up to it. There are a few places to do this. One of the most popular tools is google’s Lighthouse, which is easy to use and many developers already use it to test their speed. Here is how you use Lighthouse (you will need to have the dev version of Chrome installed):
1) Open Chrome dev
2) Go to your site
3) Open dev tools (same as inspecting the page)
4) Navigate to audit
5) Click audit
6) Done
This tool is extremely useful for a few reasons: it helps you understand what google thinks is important to help your ranking, it’s pretty intuitive to use, it’s free, and it can also help point you down the path of making your site accessible. There are also many paid services you can use.
Alright, awesome, you have figured out what our accessibility score is. What do you do if the score isn’t so great? First, you can look at some resources and figure out what actions you can take to fix it. You can go to w3c’s site for a lot of helpful tools, or a11y’s websites for help. My personal favorite, but probably the hardest to get done is actual user testing. If whatever validation tool you choose said that your site isn’t accessible to people who only use keyboards, do you know someone like that?
It’s not the end of the world if you don’t, because many other devs have run into the same issue. Chrome has a lot of plugins for you to see how your site looks to people with disabilities. For example, it will show you what your site looks like to color blind people. And to keep this article from being too Chrome heavy, firefox has also released an accessibility inspector, which can be another helpful tool (plus you get some cross-browser testing for free).
To finish off this article I want to quickly run through some tips that aren’t complicated to implement on your site. Make your text high contrast. There are many tools to check this, and it's just good design to have your text be legible, and it will also be easier for users on mobile. Your text should also be easy to understand. This does not mean dumbing down your text, but being clear and concise. This will also help your SEO since most spiders aren’t “smart” enough to read at a high level. Another tip that will help your SEO is adding alt tags to all of your meaningful images. Doing this will also make your site friendlier to screen reader users. Finally, to go back to talking about metrics, your speed metric can affect your accessibility. For example, if someone only has an older device and your site is huge and slow, they will not be able to access it at all.
I hope this gave you some tools and tips to actually implement accessibility, not just think about it (like the newest js framework).

Accessibility Myth Busting

Morgan Smith — Mon, 15 Jul 2019 17:25:30 +0000

Recently, I was asked to do a talk for a local coding bootcamp. During this talk I discussed many different factors about accessibility and SEO, and I wanted to take some time to talk about some myths about accessibility. While there is a wide swath of misinformation and misconceptions about accessibility I am going to hit on three points that I have dealt with in my career. The first of this is the “disabled people won’t use my site”. Secondly, I have heard the myth that “accessibility is ugly”. I’ve also heard it’s troubling sibling “accessibility will make my site”. Whenever I heard these- or variations on the theme- I am suddenly transformed into the meme of the confused math lady meme. These myths show a huge knowledge gap in the people who say things like this.
Normally, I try to be really lenient about knowledge gaps because most of the time the person can’t really help that they have a gap. For example, I recently found I had a huge gap in my understanding about how web browsers actually work and it was negatively impacting my coding abilities. So, once I found the gap I did research and I feel like my gap is smaller. However, when it comes to accessibility it shows a bigger issue about how web-dev/STEM in general is taught. If you are only taught to make things for abled people, there is no way you are going to think about making things for disabled people. Exposure to making things for everyone should be taught at the base level of web-dev. It’ll help prevent misunderstandings about making websites for everyone.
Another issue with this knowledge gap is that this tends to be hand in hand with ableism. Many people assume that people are either capable of doing things in a “normal” way (i.e. using a computer with a mouse alone) or they need help. It doesn’t occur that people think about the spectrum of ableism. When you make your site accessible you can make better for everyone. One group of people that is slowly getting more recognized by developers is people with vision problems (blind + low vision). Many developers are realizing that their sites need to be screen reader friendly, and that their text needs to be high contrast. However, when you do this you are positively impacting your SEO* and making your site easier to read by elderly. So, by making an inclusive choice you are possibly expanding your audience.
Another thing about high contrast, easy to read, easy to navigate sites is that they tend to be better UX/UI. It has been my experience that when you discuss making things accessible people immediately think about ugly and clunky things, like in real life they think about slapped together wheelchair ramps. However, well done design includes everyone. A real life example of this would be something like cut outs in a curb, they make sidewalks accessible to wheelchair users, but they also make it easier for people pushing strollers or luggage. It also is less effort to step up on the sidewalk, even if you are perfectly abled bodied and not carrying anything. Good UI/UX is the same way. Giving your site a clear, easy to understand hierarchy is just good design, and it makes it easier for everyone, including people with learning disabilities.

Finally, I have heard some developers complain that making their site accessible will make it slower. This is the one that normally makes me the most confused, since the most accessible site would just be text + html which would be lighting fast. Typically, the more inaccessible your site is the slower it is, because there is extra plugins or scripts or flashy pictures running. When you have something like a 3rd party pop-up running, it will annoy your abled users, it will mess up screen readers, and can confuse users with learning disabilities. Many other dark patterns in development will have similar effects.
To wrap it all up, understanding that the internet is for everyone and designing your site accordingly will typically make you have a better site. Making your site accessible will not lead to a slower site. It will not lead to an uglier site. It also will increase your range of potential users. Following good accessibility practices also means that your site will be easier to user for everyone.
Thanks for taking the time to read this, and I hope you learned something new about web dev!

*good alt tags can help spiders read your site better, and hopefully increase your ratings