Today’s progress: Today was hard! Since I successfully deployed a little Flask app to a live server yesterday, I thought I would do it again with a slightly more challenging Flask app I wrote a year ago. This app had more sophisticated routes, including a directory-like path, and that caused a big problem when it got to Apache. I wrote about it in the repo's README.
Thoughts: Making stuff live is always unpredictable.
Learned today: Jinja2 has a lot of filters, and that is good.
Links to work: Dynamic Flask app with a Python dataset
Today’s progress: Relearned Flask, which I have not used for a year.
Thoughts: Next, I need to review the dynamic stuff: databases, forms.
Links to work: Basic Flask App – GitHub repo
Today’s progress: Working on Flask because of a course I'm teaching. Reviewed a bunch of code from a year ago. Some of that was a web scraping repo — not Flask, but Python. Getting ready to lead students through a scraping project and then teach them Flask. Although this is not a “personal” project, I’m counting it anyway!
Thoughts: I really need to build some bigger things with Flask. It's so cool. Today I reviewed routes, decorators and templates.
Today’s progress: More Twitter scraping with Python. Write the following to a CSV file for all members of a given Twitter list: name, username, bio, followers, following, when joined, location.
Thoughts: Combining and reworking code from me (last year) and two other people, separate repos: Very satisfying!
Links to work: twitter_bio_compiler_for_list.py
Today’s progress: Used a Twitter scraper from the conference: link to code. Successfully scraped all of Congresssman Ted Yoho's tweets and explored them. Wrote a new Python script of my own to scrape the hashtags out of the Twitter data.
Thoughts: I'm getting better with Python dictionaries.
Links to work: Scraping Twitter: Rep. Ted Yoho: Google doc with my results. Code: get_hashtags.py
Lots of code! But I'm not counting those days for my 100 days.
My notes: NICAR 2017 – all notes, all days
Today’s progress: Spent an hour learning to use NumPy (Python package) in a DataCamp](https://www.datacamp.com/) course.
Learned today: Wow, NumPy lets you do math on Python lists in a ridiculously easy and compact way! You can do math across two arrays — for example, one array holds people's heights and another one holds people's weights, and this calculates BMI for all the people, creating a third NumPy array: bmi = np_weight_kg / (np_height_m**2)
Links to work: None
Today’s progress: Missed two days (work). It's the time of year when I have to focus on Python for a class I teach, so I did some exercises at DataCamp, which I just joined. Today I completed two chapters, “Python Lists” and “Functions and Packages.” These were mostly review.
Thoughts: DataCamp's interactive lessons are much nicer than Codecademy's!
Learned today: areas_copy = list(areas) creates an independent duplicate of the list areas instead of just a pointer to the same list in memory. List methods: Review index(), count(), append(), remove(), reverse().
Links to work: None
Today’s progress: Finished my personal project, and I'm pretty happy about it.
Thoughts: This was such a cool project because I learned how to do all kinds of things I had never needed to do before. I had to traverse the DOM a lot to perform tasks, and I also extracted data from three different arrays of objects in a JSON file.
Learned today: How to use .each() (jQuery) to loop over all instances of an HTML element. This made it easy to hide/show identical fieldsets when I needed a particular number of them to be visible.
Links to work: Dragonvale Habitat Planner GitHub repo and live page
Today’s progress: Just calling this one day because I don't know exactly when I did which things. Made lots of progress on my current project! It's almost done.
Thoughts: You never know how much new stuff you will have to learn when you start a new project from scratch.
Learned today: I already knew how to traverse the DOM with jQuery — in theory — but today I really had to do it, seriously. The reason is that I had to write functions that would run on any one of six select elements when you changed one of them, and then the corresponding select to the left must be read, and then the input element to the right must be filled in with the correct value. There was no way to do this by assigning IDs or classes; I really had to use the DOM, navigating up to a parent, over to a sibling, and down. I was very excited when I got this working.
Links to work: Dragonvale Habitat Planner GitHub repo and live page
Today’s progress: More work on personal project: Dragonvale Habitat Planner. UI to select one habitat and get its properties works. Separated habitat table and dragon entry area; added jQuery to handle those. Get selected habitat from table row click (jQuery). Write data about selected habitat into dragon entry area.
Thoughts: How does anyone work without jQuery? So much is so easy.
Learned today: Nothing much new, but getting more and more comfortable with JSON objects as a data store.
Links to work: Dragonvale Habitat Planner GitHub repo and live page
Today’s progress: Started a new personal project that will have me using JS objects, sorting, and using forms.
Learned today: Used DataTables for the first time! Sweet! This library integrates very nicely with Bootstrap.
Links to work: Dragonvale Habitat Planner GitHub repo and live page
Today’s progress: Completed three more problems in FCC's Intermediate Algorithm Scripting section.
Thoughts: “Wherefore art thou” was really hard for me. The next two seemed much simpler. I have to practice with .filter().
Learned today: Nothing new, really, but good review of .split(), .join(), .indexOf().
Links to work: Wherefore art thou, Search and Replace, Pig Latin
There was a lot of code in there, but none of it was personal projects or drills — all code for work. Also a lot of grading.
Today’s progress: Completed two more problems in FCC's Intermediate Algorithm Scripting section: Diff Two Arrays and Roman Numeral Converter.
Learned today: JavaScript myArray.includes(); for the Roman numerals I just built strings using if-statements.
Links to work: Diff Two Arrays and Roman Numeral Converter
Today’s progress: Looked at several project “challenges” I might want to do and decided I did not want to start any of them, so I went to FCC and started the Intermediate Algorithm Scripting section. I only completed one (Sum All Numbers in a Range), and I think my solution is probably inelegant, because I think there was probably a way to do it without the for-loop I resorted to. Then I worked for a while on the second problem there. Did not complete it. Time spent: 90 minutes.
Learned today: JavaScript Math.min(), Math.max(), myArray.reduce(), myArray.filter(), myArray.concat(), plus revisited myArray.splice() and myArray.indexOf().
Links to work: None.
Today’s progress: I finished my localStorage project!
Thoughts: I'm really pleased with this project, because there was no tutorial, video, how-to or “challenge” for it. I thought of it and pursued it by searching with Google, MDN and Stack Overflow. That said, a To Do list app is really not an app I ever wanted to build before (haha), but it seemed really well suited to learning about localStorage.
Learned today: Sorting an array of objects based on the values of a particular property is waaay easier than I ever thought it would be. That was a pleasant surprise!
Links to work: Live working app and GitHub repo
Today’s progress: Major victory! Each or any item on my To Do list can be checked and removed. I can check a bunch and then remove them all with one button click.
Learned today: The cache is very persistent at/from GitHub.io (???) — anyway it seemed that way. I had to open the .js and .css files in the browser and reload there to get them to work.
Links to work: Live working app with link to GitHub repo
Today’s progress: Added a checkbox to each To Do item with value of the index of the array. Added a "Remove Checked Items" button at top and bottom. Only had 90 minutes to work, so I haven’t coded them to work yet.
Learned today: Adding Bootstrap col classes when a thing (in this case, a button) is not in a row by itself just makes trouble.
Links to work: GitHub repo
Today’s progress: Fixed a really annoying bug that cropped up in my localStorage To Do list project. I think it had to do with how I was handling the object for each To Do item. It also seems to have appeared after I added code to check if you already have a localStorage key for this app, so I adjusted that code as well. All on GitHub.
Thoughts: I still need to add code to: (1) remove a To Do item; (2) change the order of items in the list — sort by priority, sort by due date.
Learned today: Sometimes where you declare a variable makes a huge difference. Well, I already knew that, but still I made a mistake with it.
Links to work: Try it here – and see GitHub repo here
Today’s progress: Awesome. I solved all the problems (I think) with reading/writing localStorage and now have a nicely functional app, with no tutorial and no instructions to follow — just a lot of Stack Overflow searching.
Learned today: When you load a localStorage app from another URL (e.g. github.io instead of my hard drive), it does not see the datastore created by the same app at the other location. This is probably a good security thing.
Links to work: Try it here – and see GitHub repo here
Today’s progress: I got so far on my little localStorage project! Very happy! I'm not writing the contents into the HTML yet, but I definitely can read a string out of localStorage, parse it as JSON objects, stick them into an array, and then push a new object into that array, stringify it, and write it back out to localStorage. This is awesome! (Thank goodness for Stack Overflow!) But I have a problem with how it's writing the array back out — will fix tomorrow. Something wrong in how I'm handling the array in JS.
Thoughts: The loop to write all the To Do items into the HTML will be annoying, because I'm using Bootstrap panels for each item.
Learned today: How to read/write localStorage! Hooray!
Links to work: To Do list with localStorage
Today’s progress: I struggled with how to get a short extract from the beginning of a Wikipedia page using the API. Finally I found this answer on Stack Overflow, and that was the ticket. My Wikipedia viewer project is now complete!
Also started a new project on my own: To Do list with localStorage
Thoughts: The Mediawiki API (which is Wikipedia's API) has really crappy documentation.
Links to work: Live Wikipedia Viewer
Today’s progress: Still working on the FCC Wikipedia viewer project. Used jQuery to write titles of found Wikipedia pages as H2’s to the HTML page, and the H2’s are links to the correct Wikipedia page, using ?curid= in the URL. All that’s left is to figure out how to modify the API query so I can get the summary from Wikipedia, then add it as a paragraph below each H2.
Thoughts: I’m so happy when I use jQuery and CSS.
Links to work: Working version at Codepen
Today’s progress: Got the Ajax code to work with action=opensearch for the Wikipedia API. However, the search results were poor. (Search for bowie did not return David Bowie.) So, back to the API documentation. Tried &action=query with &generator=search and got better results (David Bowie first in list when I typed just bowie.) Had to add format=json to the query URL to get rid of an error. Now I have an object with page IDs and titles, and I can log both of those to the console.
Thoughts: APIs still annoy me a lot. The documentation is completely obscure. I had to read this page for about an hour (including trying many different things that did not work). I had errors with MIME TYPE and User Agents and read a lot of Stack Overflow. I've got a page ID and a title. I can make a URL with the page ID. All I need now is the first paragraph or page summary.
Links to work: Working version so far at Codepen
Today’s progress: Spent time with this tutorial and this API page and figured out the search URL. Ajax not completed, but any search will work now. Need to test for punctuation marks and see if they mess it up.
Links to work: My JavaScript so far
Today’s progress: Did not have much time (slightly more than one hour), so I cleaned up the interface for the Wikipedia Viewer project, made the search form write an alert popup and clear itself, and read some more about the MediaWiki API.
Thoughts: The frustrating thing about APIs is the documentation, not necessarily the API itself.
Links to work: Wikipedia Viewer — view on Codepen
Today’s progress: I'm quitting the FCC local weather project, and here's why:
geolocation.getCurrentPositionrequireshttpsin Chrome and Safari.- The OpenWeatherMap API works with
httpand not withhttps. Because of cross-origin restrictions, I can't open the page withhttpsand then request an insecure (http) URL. - I examined three other weather data APIs. While some do allow free access to their data via an API, there are other restrictions. For example, Dark Sky uses
httpsbut won't allow the API key to work if it's exposed, thus requiring backend non-JavaScript handling of the access key.
Started the FCC Wikipedia Viewer project. Read about the API. Reviewed an old project of mine that used the YouTube API to search and show videos in a popup.
Thoughts: I'd like to adapt the code from my YouTube search project to this Wikipedia search project. It's probably not responsive, so I'll need to make adjustments. Plus, I'll get to compare the two APIs.
Links to work: View on Codepen
Today’s progress: FINALLY. I got a JavaScript promise to work, so that I got my location via the browser with geolocation.getCurrentPosition and then passed the latitude and longitude to google.maps.Geocoder to get a complete location name. This is the code that works for just that: weather_bak.js.
Thoughts: No documentation for promises makes sense to me. I just had to try a bunch of examples in jsFiddle and fuss with them until they worked for me. It took hours. And then ...
Learned today: It turns out this FCC project is just the WORST PROJECT EVER, because after all that misery, it turns out I can't use google.maps.Geocoder and OpenWeatherMap on the same page, because Google requires https and OWM will only work with http.
Links to work: weather_bak.js and this fiddle ... version with weather API (which will not work): weather.js
Today’s progress: More disappointment. More frustration with promises not working. I thought I finally had it, but I can't get it to run. I even got a fiddle working. Time spent: 1.5 hours.
Links to work: At Codepen
Today’s progress: Sucks. Still trying to figure out promises. Switched to callbacks for a while. In fact, I spent about an hour on callbacks. Now returning to promises. Total time wasted today: 1.5 hours.
Learned today: This seems like a good resource: JavaScript Promises: an Introduction.
“The above and JavaScript promises share a common, standardised behaviour called Promises/A+. If you're a jQuery user, they have something similar called Deferreds. However, Deferreds aren't Promise/A+ compliant, which makes them subtly different and less useful, so beware. jQuery also has a Promise type, but this is just a subset of Deferred and has the same issues.” (From the link above.)
Links to work: Same as yesterday. Weather Where You Are
Today’s progress: Read a lot about callbacks and promises. Still not really clear on how to use them correctly. Tested the OpenWeatherMap API for getting the current temperature with fixed latlong. That works. Found out that OpenWeatherMap delivers temperature in Kelvin by default. Looked up formulas to convert temps.
Thoughts: I understand how callbacks and promises work but not how to successfully use them. Promises are the new thing and people on Stack Overflow say use them instead of callbacks. Also, it seems SO people like pure JS and not jQuery for promises.
Links to work: Same as yesterday. Weather Where You Are
Today’s progress: Started the FCC Local Weather project. No problem with geolocation.getCurrentPosition(), but then I tried to use the Google Maps API to do a reverse lookup to get the place name from the latlong, and I can't get it to work. Very frustrating. I got API keys for both OpenWeatherMap and Google Maps.
Thoughts: Maybe I can't use the Google Maps API without a map?
Learned today: Are APIs always a pain in the neck? Also, the way my code is now, the latlong from geolocation.getCurrentPosition() loads after the attempt to get JSON from Google Maps, so I have to figure that out later.
Links to work: Weather Where You Are
Today’s progress: Finished the FCC “Random Quote Machine” project. I'm really glad to leave that one behind!
Thoughts: The JSON and the API were not much of a problem, but I spent way too much time trying to find a decent free quotation site with an open API. I did find one (maybe), but I'm still waiting for them to send me an authentication code. In the meantime, I fudged it using a site where I can get about six quotes out of their API without paying.
Learned today: jQuery: "The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)." source In other words, you can't rewrite the value of a data- attribute after the page has loaded — for example, after you have loaded a new quotation. This made it impossible to use the Twitter sharing button I already know about. Tons of time spent Googling, etc. Finally realized I had to use the Tweet Web Intent URL in my JavaScript and not use Twitter's own button. So I built my own button, which at least matches my New Quote button. Used a cool button-builder (see Resources). I did steal encodeURIComponent() from the FCC example for this project. Here's what it does.
Links to work: Random Quote Generator, a Free Code Camp project.
Today’s progress: I just about have the JSON working for the quotes API. I spent an hour and a half, and that's all I want to spend today, but I'm close!
Thoughts: The FCC lesson on “Convert JSON Data to HTML” did not solve for the JSON I'm getting from the quotes API I am using. I had to go back and look at some JSON-file-handling notes I made in the past, plus some Stack Overflow searching! I don't need a for-loop because I know the keys in the quotes object.
Learned today: You can use forEach only on arrays, not on objects.
Links to work: Random Quote Generator, a Free Code Camp project.
Today’s progress: Started the FCC “Random Quote Machine” project. It's been so long since I did the exercises in the “JSON APIs and Ajax” section of FCC, I had to go back and look at what I did. They show you just what you need for this project. Worked on this project for about an hour and a half.
Thoughts: I was feeling tired of Bootstrap, so for this project I went with vanilla HTML5 and CSS. I would like to create my own JSON file of selected quotes, but it seems like that might be a poor use of time, as it is not coding per se. Maybe later.
Learned today: Can use Twitter code for the tweet button. Found an API for an existing quotations site and will use that when I get to the Ajax part (tomorrow, I hope). How to use Google Fonts on Codepen.
Links to work: Random Quote Generator, a Free Code Camp project.
Today’s progress: Finished the FCC “Build a Personal Portfolio Webpage” project! I decided to use Bootstrap's column styles to create a flexible grid for thumbnails that link to my work. I used this file that I made last year when learning Bootstrap for the first time and modified the grid code to work with 400-pixel-wide site thumbnails with captions.
Thoughts: The trick to this grid is putting all the images in one row, even though they take up more than 12 columns, and using the weird Bootstrap style class="clearfix visible-xs-block" to make it fully responsive. (This is likely to be different in Bootstrap 4.)
Learned today: I can store images free at Postimage. Put my thumbnails there.
Links to work: “Build a Personal Portfolio Webpage” at Codepen.io: A Free Code Camp project with Bootstrap.
Today’s progress: Finished the responsive large image code (both CSS and JavaScript) for the top section of the portfolio. I might tweak the text behavior a bit more later on, but for now it's working well.
Thoughts: It's so time-consuming to adjust a big background image to be responsive. There's probably a library or plugin for this that I don't know about.
Learned today: How to combine background-size: cover; and background-position: center; and write JavaScript to change the way the background behaves on a phone screen. $(window).height() is handy.
Links to work: “Build a Personal Portfolio Webpage” at Codepen.io: A Free Code Camp project with Bootstrap.
Today’s progress: Built and implemented a working PHP sendmail page for the contact form in my “Build a Personal Portfolio Webpage” project (see Resources for link). Tested. Works. Note that my contact form is pretty much copied from here. Also added large responsive background image to About section. Added a panel to the footer.
Thoughts: Lots of time spent on getting that background image to behave nicely. Reworked some JavaScript I figured out previously for another project. Not done with the About section yet. Portfolio section still empty.
Learned today: background-size: contain; and background-size: cover; (CSS) for a responsive background image. I thought contain would work, but it turned out that cover was what I needed.
Links to work: “Build a Personal Portfolio Webpage” at Codepen.io: A Free Code Camp project with Bootstrap.
Today’s progress: Forked the 100 Days Of Code repo; updated Log and Rules. Also changed the README to link to the original repo. Started the “Build a Personal Portfolio Webpage” project. Made/edited the navbar and DIVs for each section. Coded social icons, using Font Awesome. Added contact form.
Thoughts: Beginning “100 Days Of Code” would be quite a challenge if you'd never used GitHub before. (Of course, it's a great chance to learn to use GitHub!) At Free Code Camp, I’ve completed the Front End Development Certification lessons through “JSON APIs and Ajax” with one exception: “Build a Personal Portfolio Webpage.” Next up: “Intermediate Front End Development Projects."
Learned today: How to add jQuery and other files to a Codepen.io project. How to use alert colors as background colors in Bootstrap. How to install Font Awesome via CDN (see how), and how to code the icons (yay!).
Links to work: “Build a Tribute Page”: Georgia O’Keeffe, Artist, in which I practiced using Bootstrap. This is a Free Code Camp project I finished earlier. Today I started “Build a Personal Portfolio Webpage”: Another Free Code Camp project with more Bootstrap. I exported today’s code as a gist.