Day 1: This site is my first day of my 100 Days of Code. It's a rough sandpaper draft, my first iteration. My thought is that I need a place to stash all this code that I'll be building. My intention is to start out with some Javascript (including the #Javascript30 challenge). I want to take a small dive into node.js as well as Vue and React. I also intend to smooth the rough edges on some Java projects that I've started. Next is a toss-up between Python and Ruby. Let's see what I get done.
Today's task: flexbox and grid exploration. I had noticed a couple issues with the mobile device experience with this site, so I made some changes.
Today I updated added some content to my blog. Officially code? Meh. Did it need to get done? Yeh.
Back to School Countdown, 1 of 2. Idea to execution was a little more time-consuming than anticipated. I think that I'll go back later and smooth up the rough edges.
Let's mess with a few photographs. There is image randomization on refresh. There is a way to adjust CSS variables.
Some days an hour code code seems more like two or three. Check out thisdrawing boardthat uses Javascript on an HTML5 canvas (for desktop use only).
I learned some today about playing video with Javascript. Check out thiscustom video player.
I took a React class today. This is a really interesting framework. I can see a lot of similarities between the way this Java projects are set-up.
I continued a React class today. I like the idea of using components.
This sticky navit set-up in a very straightforward way. I can think of a site or two where I want to do something similar.
Check out this horizontal scrolling elementthat displays some of my favorite days yet in my #100DOC.
Countdown clock to the first day of school, 2 of 2Better late then never/on time for next year.
I have an idea for a whack-a-mole game customization. This may take a few days to complete.
Still customizing... I worked on randomizing position location on a game-board.
Still customizing... I learned about animation in vanilla Javascript.
Still customizing... I have multiple insects moving on the screen now. The movement is not as smooth as it was before with one roach on the screen, but it looks how I originally envisioned. Guess I don't have to add that feature!
Still customizing...The insects start moving when I tell them to.
Still customizing... The scorecard works on this rough sandpaper draft although it is wonky. I need to examine how the animation interacts with the event click.
Still customizing... Flashlight highlights on the cockroaches.
Still customizing... Countdown!
Still customizing... Made some style adjustments now that it is closer to being done.
Still customizing... There are two issues that really bother me, and I am going to see how I can work those out.
Still customizing... What I've learned over the past couple days is that there are much better ways to animate than I have in this game .
This buggy game is abandoned until I have a little more time to dive into animations. Here's an alternative .
I made a few changes to my personal site hmcka.com . Today I had time for low-hanging fruit.
I wanted to learn a little more about CSS animation before jumping into my next idea. Here, aflashlightshines down on a floor.
While I did continue working with animation, I also took my first stab at answering a question on Stack Overflow. Maybe someone had a better answer after me, but I like the idea of contributing to a community that I've reach out to on occasion.
Don't worry. The JS is now working on parts 1, 2, 3 and 4. Still not sure WHY it stopped working in Chrome only, but deleting and re-adding the files to Github seemed to do the trick.
I am back in the saddle and working on a little jQuery.
I changed the text of the to-do list to font awesome icons. I guess this is a picto-do list.
I used a tutorial to try paper.js and howler.js to add some animation and sound to the middle row of the keyboard.
Basic learning about Paper.JS... now I know a little more about setting up the files.
As I watched one web development video today, I decided that it was more than time to make the CSS in my own personal sitehmcka.comDRY-er.
I also listened to my site with the NVDA reader and decided to make some accessibility changes.
Since accessibility is based in good semantic HTML, I started there.
I made some adjustments to nesting within my hierarchy.
I combined my page with the header containing the new hamburger element.
I reviewed the CSS bit by bit to make it DRY-er.
I edited the CSS for the smallest devices that would visit my site.
Which included the main section CSS...
And moved onto the headers...
Added some responsive breakpoints...
And added a little CSS so that the style sheet worked on similar pages...
I finished this update by editing the JS pages to work as intended with the new header.
My next adventure of my 100 days of code is Node.js. I started learning exactly what that is, and settled on some tutorials to help me learn.
I started using Goorm IDE and Mongo DB so that I could do my learning in a virtual environment.
I learned about using frameworks such as Faker and Express in Node.js.