An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Some of Our Sources
- Engadget
- Techcrunch
- Web Designer Wall
- Smashing Apps
- Creative Curio
- Crazy Leaf Design
- My Ink Blog
- Web Design Ledger
- Design Modo
- Codrops
Help Webnuz
Referal links:
Showing my Awesomeness
A Site to Show my Awesomeness
Why build it?
Supposedly a portfolio can be helpful when you're looking for a job and it can be useful when trying showing off your projects.
This weeks goal was to build a site for my portfolio. Ive started to do this many times but I kept getting hung up on front end and design stuff. So, I decided I was just going to do something simple with a bit of markdown and a list.
Requirements
I simply wanted a list of ways to contact me, what I do, and what I've done.
I didnt end up with just a list. I decided to use a code snippet and defined some variables to show my projects, articles, and links.
I'll be honest, I didn't expect to learn much when just building a site that says "I know some things".
Once I was done writing everything in the README.md in my github repo, I realized it was ugly and the syntax highlighting was subpar. So, I asked on Twitter, about making it look like my VS Code theme and was told about Prism.js. So, I went on to learn new JS things.
I'm so happy Adam suggested Prism.js as I was not looking forward to attemtping to make this look nice.
Vicki Langer@vicki_langer
It looks sooooooo much nicer in VScode I guess I need to break out some CSS/HTML skills to make VickiLanger.com look nicer.
#VetsWhoCode19:23 PM - 13 Jan 2020
1
2
What I Learned
JavaScript Stuff Learned
I had never needed nor desired to use syntax highlingthing outside of what sites already did for me. I was excited to find out about Prism.js. It was a bit confusing at first, but wasn't too hard to use. Just choose your language, download the js and css files, and add the link and script to your head.
<link href="prism.css" rel="stylesheet" type="text/css" /><script src="prism.js" type="text/javascript"></script>I will say, I didn't want to use the built in color theme, so I had to scour the web for the colors I have in my VS Code theme. It's pretty close now. The only part of the syntax that isn't colored right is the f in my f-strings.
HTML Stuff Learned
At a minimum an HTML head should include charset, viewport, and a title. (reference)
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Vicki Langer - Portfolio</title></head>Thankfully, Mike reminded me to add these or I would likely have forgotten.
@vicki_langer Looks good! I like the style. Only critiques would be to add necessary <head> tags including title, and relevant viewport and metatags.02:06 AM - 14 Jan 2020
In addition to the required head tags, I also found ones to make my site look good when posted on Twitter and Facebook.
Here are the added meta tags for Twitter
<meta name="twitter:card" content="summary"><meta name="twitter:creator" content="@vicki_langer"><meta name="twitter:url" content="https://vickilanger.com/"><meta name="twitter:title" content="Vicki Langer's Portfolio"><meta name="twitter:description" content="Quick review of Vicki's coding history"><meta name="twitter:image" content="https://vickilanger.com/portfolio_preview.jpg"><meta name="twitter:image:alt" content="Python script with variables declaring name as Vicki, language as Python, and links around the web for github, dev.to, and twitter">and a preview from Twitter Card Validator
Here are the added meta tags for Facebook
<meta property="og:title" content="Vicki Langer's Portfolio"> <meta property="og:image" content="https://vickilanger.com/portfolio_preview.jpg"> <meta property="og:image:alt" content="Python script with variables declaring name as Vicki, language as Python, and links around the web for github, dev.to, and twitter"> <meta property="og:description" content="Quick review of Vicki's coding history">and a preview from Facebook Sharing Debugger
Lastly, I needed to add a favicon. I used Favicon.cc to pixelize my profile picture. Though, it looks like you can use them to animate and do other neat things.
What Next?
- I would like to figure out how to use some sort of liquid tag to pull the contents of my python file into the html
<code></code>block. - I am working make this screenreader accessible.
- I'd like to find a way to test the screenreader ability
Links
A link to my Portfolio
VickiLanger / vickilanger.com
A bit about Vicki
"""my_portfolio.md: a introductory page about me and my awesomeness13 January 2020@vicki_langer"""Original Link: https://dev.to/vickilanger/showing-my-awesomeness-2jn9
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To