#100DaysOfCode Day 39 – Success with mobile FCC Tribute page!

Day 39: November 20, 2017 – Time spent, 1 hour

Today’s Progress: Completed transition of Free Code Camp (FCC) Tribute page from CodePen to standalone web page. Fixed mobile display and found colors that suited me AND passed the WAVE evaluation tool. Put my portfolio page CodePen Code into an HTML wrapper.

Thoughts: This was a productive day and made me think about what might be lurking in the background of the various tools we use. For example, my CodePen portfolio page had acceptable text size in my mobile view, but my standalone page did not. I fixed my text display by using a responsive meta tag (see below). That makes me think that the CodePen site has responsive meta tags as well that my “bundled” CodePen was getting the benefit of.

I didn’t notice the responsive meta tag in my review of “Responsive Design with Bootstrap” at FCC. My searches for “text not resizing in Bootstrap” gave me results on media queries that might have been helpful but I couldn’t quite wrap my brain around yet. I’m trying to avoid simply copying and pasting code snippets whose function I don’t really understand. So I went back to my CodePen and checked all the behind the scenes settings to make sure I hadn’t left something behind. I hadn’t, BUT – under HTML settings right underneath the “Stuff for head” window was a button that said “Insert the most common viewport meta tag.” So I pressed the button and got:

<meta name="viewport" content="width=device-width, initial-scale=1">

I copied and pasted that line into Google and got back the page below. I already knew that “viewport” was basically a device screen size. The “Responsive Meta tag” page explained that the other two values instructed the device to show all of the content within its screen at its default font size setting. These concepts I easily understood and dropped the tag into my standalone page. That took care of text sizes on different screens. I tested my pixel phone with chrome as well as desktop versions of Microsoft Edge, Firefox and Chrome.

The next step was to reconsider my color scheme. While my purplish background and link colors satisifed the WAVE Evaluation tool, it didn’t satisfy ME. So I said goodbye to the Jumbotron, reverted to the original link color and put a border with a 5% margin around my text by inline css in the container-fluid div. I liked the look and the WAVE Evaluator liked the colors.

Unless I get some major “please fix this” feedback on this page, I’m done for now. At some point, I should double check with a screenreader to back up WAVE’s claims and I need to learn more about keyboard navigation.

My next stop is posting my portfolio page as a standalone web page that looks good in mobile and passes the WAVE Evaluation tool. Then it will be a rebuild of the FCC Factorial exercise.

Links that helped me get stuff done

  1. Responsive meta tag – https://css-tricks.com/snippets/html/responsive-meta-tag/
  2. WAVE Evaluation tool – http://wave.webaim.org/extension/

Link(s) to work

  1. FCC Portfolio page – https://ddcornwall.github.io/portfolio (coming soon!)
  2. FCC Tribute page (completed standalone) – https://ddcornwall.github.io/fcc-tribute/

Advertisements
Posted in Technology | Tagged | Leave a comment

#100DaysOfCode Day 38: Details matter and color adventures

Day 38: November 19, 2017 – Time spent, 1 hour

Today’s Progress: Solved my link color problem. Manipulated link and background color on tribute page until I got a combination that passed the WebAim WAVE evaluation tool. Cloned my portfolio page Github repo in preparation for posting on Github pages.

Thoughts: The first breakthrough was once again paying attention to details. I somehow had missed that I did not put a “#” in front of my color changes. a {color:23297C;} is worthless but a {color:#23297C;} will actually work.

Next it took me some time to realize that the contrast tool that came with WAVE wasn’t making recommendations on the basis of what my colors actually were. It was just a pallet to play with. Not realizing this I had several go rounds of changing my code to what I thought what WAVE wanted but that didn’t affect my scoring.

I gave some thought to just tossing the issue aside, but I have a friend and coworker who is a strong advocate for accessibility and I could hear their voice in my ear, along with Laura Kalbag, author of Accessibility for Everyone telling me accessibility is not a nice to have, but something that should be built in from the beginning. So I soldiered on and found what was advertised as a WCAG contrast checker (see below) that had you enter values for your background and foreground colors. If you’re not comfortable with hex values, it has color pickers. As you vary the colors, buttons below offer pass/fails on several contrast scores, including color difference, used in determining suitability for color blindness.

I had to give up on my gray background, because I could not find anything with a gray background that could pass a color difference test. so I have the purplish background. I might fiddle a bit more later. Also while the link color looks good against the purplish background, I think it gets lost on the white background my contact links are on.

Just now I thought to look up the mobile view of the tribute page. And it looks completely unresponsive. CodePen must have been doing me some behind the scenes favors because I got the mobile view looking ok on that. So improving the mobile look now becomes job one. Sometimes coding feels lack whack-a-mole.

Links that helped me get stuff done

  1. Changing color of my links in Bootstrap Navbar – https://stackoverflow.com/questions/30633635/changing-the-color-of-the-links-in-my-bootstrap-navbar
  2. Contrast checker – https://contrastchecker.com/

Link(s) to work

  1. FCC Tribute page – https://ddcornwall.github.io/fcc-tribute/
Posted in Technology | Tagged | Leave a comment

#100DaysOfCode Day 37 – Tribute page on Github Pages

Day 37: November 18, 2017 – Time spent, 1 hour

Today’s Progress: Successfully migrated my Free Code Camp Tribute page to Github pages. Learned how to sync my local Github repositories to my online account. Tested tribute page with WAVE accessibility checker and began efforts to increase my link contrast.

Thoughts: It was great to have a productive day. I like having a stand alone tribute page. As I suspected, once my code was by itself instead of a CodePen wrapper, WAVE was able to actually analyze my page. I got passing marks for everything except the low contrast of my links. I tried fixing them in a <style> block that followed my loading of Bootstrap but that didn’t change my my link colors. Here’s my full “head” code:

<head>
  <meta charset="utf-8">

  <title>Mahatma Gandhi - FCC Tribute page</title>
  <meta name="description" content="Celebration of the life of Mahatma Gandhi, composed as a Free Code Camp (FCC) project. ">
  <meta name="author" content="Daniel Cornwall">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
<--!To increase link contrast to meet WCAG AA standards.-->
a {color: 1d1dff;}
</style>

</head>

I would have thought that the <style> for a would have overridden the previously loaded Bootstrap, but not so much. The next time I’m coding I’ll do more read/search and see what I can come up with. Perhaps for this page I’ll abandon Bootstrap since I only need it for the Jumbotron and I’ve learned some new ways to code background colors easily. But I do want to try first.

After I resolve the contrast issue, I think my next step is creating a portfolio page on Github pages. Then I’ll go back to Factorializing and see if I can get my working algorithm into something that FCC will accept.

Links that helped me get stuff done

  1. Github pages – http://pages.github.com
  2. WAVE Accessibility checker – http://wave.webaim.org/extension/

Link(s) to work FCC Tribute Page – https://ddcornwall.github.io/fcc-tribute/ (Working to increase link contrast)

Posted in Technology | Tagged | Leave a comment

#100DaysOfCode Day 36 – When doors are stuck, try a window

Day 36: November 17, 2017 – Time spent, 1 hour 20 min

Today’s Progress: Installed GitHub Desktop and ATOM editor. Synchronized two of my repos on my desktop. Put Free Code Camp (FCC) tribute page into an HTML wrapper.

Thoughts: I didn’t get any more responses to my FCC Forum ask on my factorial project and still hadn’t noodled out why, despite functional code, console.log doesn’t work in FCC and “return”, while apparently breaking correctly, won’t return ANYTHING, not even a string in node.js. Further mystery – why this version of factorial.js won’t at least return wrong values in FCC.

So I decided to let my unconscious work on that problem and set myself the task of setting up an environment where I can publish full web pages instead of codepens. I’ve done most of the spade work to get started on Github Pages and I’ve set up github desktop so I can just push changes to files instead of manually uploading files. It was a bit confusing to figure out how to start working with my pages until I saw a suggestion in Github Desktop to start using the ATOM editor. I did that and started off by putting my tribute page code into an HTML 5 wrapper. Tomorrow I will look up the link to add Bootstrap to it and then try my hand at publishing it as a project page. Then I can test it for accessibility using the WAVE evaluation tool.

Links that helped me get stuff done

  1. Github pages – https://pages.github.com/

Link(s) to work

  1. https://pages.github.com/ to set up pages.
Posted in Technology | Tagged | Leave a comment

#100DaysOfCode Day 35 – Working factorial code, yet stalemate

Day 35: November 16, 2017 – Time spent, 1 hour 30 minutes

Today’s Progress: Got a working Factorialize a Number program in node.js (even processes 0 correctly!), but cannot get Free Code Camp (FCC) to accept it. Did various troubleshooting and read documentation for Javascript return statement and node.js. Submitted a help question to the FCC forum.

Thoughts: So now I have working code in node.js, but not in FCC. I’ve added the working version to my Github repo for the algorithm projects. There was a lot of read/search this morning. Since I started my log entry, I got one response to my forum question. It is helpful in understanding part of why FCC isn’t accepting my code, but doesn’t get me further along. The respondent pointed out I had declared a global variable, therefore, FCC was storing the previous value of my function calls. This does make sense, but doesn’t explain why nothing at all is being returned to the console.

Speaking of “no returns”, I can’t get node.js to display ANYTHING in a return statement, not even return("Hello World"); I had to use console.log statements to verify my code is working. So far my node.js research has not turned up an answer to this problem.

Links that helped me get stuff done

  1. Installing Node.js Tutorial: Windows – http://nodesource.com/blog/installing-nodejs-tutorial-windows/
  2. Getting started in developing Node.js in Windows by AJ Bubb – http://www.altifysoftware.com/developing-node-js-in-windows/
  3. Recursion (Fun Fun Function) – https://youtu.be/k7-N8R0-KY4
  4. Return statement in javascript – https://docs.microsoft.com/en-us/scripting/javascript/reference/return-statement-javascript
  5. Markdown formatting cheatsheet (for displaying code in FCC and other forums) – https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

Link(s) to work

  1. https://www.freecodecamp.org/challenges/factorialize-a-number
Posted in Technology | Tagged | Leave a comment

#100DaysOfCode Day 34: Factorializing – All but zero

Day 34: November 15, 2017 – Time spent, 1 hour

Today’s Progress: Figured out all but one case of the Free Code Camp (FCC) Factorialize a Number challenge. Installed Node js on my laptop. Committed the “all but 0” version of my solution to my Github repository.

Thoughts: Recursion was definitely the ticket for this challenge. It’s so weird to have a function call itself, but it works. Unless you ask it to factorialize 0. Then it returns “undefined” even though I have a return statement that should take care of that.

I decided that the developer console was too clunky for me, so after a bit of research I settled on node js. I had to review the documentation a little before I got actual output from my code, but it is nice to be able to write in notepad and see the full execution of my scripts instead of just the last line. At some point, I will need to move from console.log in progress to actual return statements so that FCC will accept my work.

Links that helped me get stuff done

  1. Installing Node.js Tutorial: Windows – http://nodesource.com/blog/installing-nodejs-tutorial-windows/
  2. Getting started in developing Node.js in Windows by AJ Bubb – http://www.altifysoftware.com/developing-node-js-in-windows/
  3. Recursion (Fun Fun Function) – https://youtu.be/k7-N8R0-KY4

Link(s) to work

  1. https://www.freecodecamp.org/challenges/factorialize-a-number
Posted in Technology | Tagged | Leave a comment

#100DaysOfCode Day 33: Strings Reversed, Factorials pondered

Day 33: November 14, 2017 – Time spent, 1 hour 15 minutes

Today’s Progress: Completed Free Code Camp (FCC) the “Reverse a String” challenge. Started a Github repository for my code solutons at https://github.com/ddcornwall/fcc-algorithm-challenges/tree/master. Began Factoralize A Number challenge, much harder than it looks. Started looking at recursion.

Thoughts: Definitely feeling challenged and learning new things. I went through several iterations of loops that gave results either much below target or many orders of magnitude above target. Looked at hints and started wrapping my brain around recursion. I HIGHLY recommend the YouTube video listed below. The instructor is both clear and funny. I feel like I now understand the concept, but my implementation is going to take a lot more work.

The factorialization problem is a great example of something that can be explained to a human being quite quickly but difficult to get across to a computer.

Now, off to work for me.

Links that helped me get stuff done

  1. Array.prototype.join() – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join – Knowing about inserted separators was important.
  2. freeCodeCamp Algorithm Challenge Guide: Factorialize A Number – https://forum.freecodecamp.org/t/freecodecamp-algorithm-challenge-guide-factorialize-a-number/16013
  3. Recursion (Fun Fun Function) – https://youtu.be/k7-N8R0-KY4
Posted in Technology | Tagged | Leave a comment