Today's Progress: I finished my degree at PSU, so now I have more time for tutorials and documenting work. I'll either document work here, or start 100 days of code again. Yesterday I watched a couple of tutorials on Node, and started to make an app that uses OpenWeatherMap API to display the sunrise/sunset times in Portland. I haven't figured out how to mask the API yet, so I haven't commited to Git. I'm hoping to figure that part out today.
Tutorials:
Today's Progress: Finished the design draft for my personal portfolio website. Installed Homebrew, updated Ruby, and installed Sass. Set up initial starter template for portfolio website, including Sass file. Tested to ensure it was working. This is what I need to use in terminal: $sass --watch --style expanded scss/styles.scss:styles/main.css
Link to work: Portfolio Website
Today's Progress: Started coding the Friends of Graphic Design website again. The last version (started/stopped a year ago) utilized floats for layout, and wasn't fully completed. I stripped out the floats and converted to using Bootstrap for layout. After getting into the more creative aspects of the layout (photos that go off the side of page, backgrounds that are diagonal), I realized the way I'm using Bootstrap might not be the best setup for this layout. Additionally, it complicates the HTML with a lot of divs. And, it's unlikely that most students who will be updating the website will know Bootstrap. I'm trying to strike a compromise between creating this website quickly, and using technology that students with more limited knowledge will be able to update. Flexbox with great comments may be the way to go.
Link to work: FoGD Website
Today's Progress: I've been working on my last project for my Creative Coding class at PCC. We did presentations on Sept 7. I used the Leap Motion for Processing library to make the graphics responsive to hand motion and gestures. I also made each of the interactions available by using the keyboard.
Link to work: Creative Coding Project #4
Today's Progress: Working through the problems in Codecademy's updated Introduction to JavaScript course. Some of the ES6 features are covered in this course, so some of this is new knowledge. Notably: let, const, arrow syntax.
Link to work: N/A
Refer to later: ES6 Learning Resources
Today's Progress: More work on the todo list exercise from the Practical JavaScript course. Worked in Chrome console practicing some different concepts to solidify new knowledge.
Link to work: Todo List from Practical JavaScript
Today's Progress: Restarting the challenge again. I've been steadily working on both JavaScript and Processing, but I haven't been consistently pushing work to Github. I haven't found a good way to post my Processing sketches online without resorting to using gifs. I may switch to using p5.js so that I can publish the sketches on my website. Today I worked on HackerRank 30 Days of Code challenges, and the todo list exercise from the Practical JavaScript course. I'm happy to report that I'm able to work ahead somewhat within each section. After I finish working through the tutorial, I'm planning on trying to duplicate the project independently.
Link to work: Todo List from Practical JavaScript
Today's Progress: Finished Processing sketch for project 2 for my creative coding class.
Link to work: Project 2
Today's Progress: Working on a Processing sketch for project 2 for my creative coding class.
Link to work: Project 2
Today's Progress: Working on a Processing sketch for project 2 for my creative coding class.
Link to work: Project 2
Today's Progress: Working on quick Processing sketch to learn 3D and recursion.
Link to work: 3D box spiral
Today's Progress: Finished the Blogz assignment for LaunchCode 101 (woo!).
Link to work: Blogz
Today's Progress: Worked on the Blogz assignment for LaunchCode 101.
Link to work: Blogz
Today's Progress: Worked on the Build a Blog assignment for LaunchCode 101.
Link to work: Build a Blog
Today's Progress: Worked on the Build a Blog assignment for LaunchCode 101.
Link to work: Build a Blog
Today's Progress: I was learning how to create 3D shapes with Processing, and I came up with this shimmery sort of gradient box, halfway through intention, and halfway through happy accident.
Link to work: Processing sketch 7/20/2017
Resources:
- Processing.org: 3D documentation
Today's Progress: Finished another CodePen, trying out clipping in CSS. Sort of a minimal petri dish with CSS animation. I also made good progress on a project for LaunchCode.
Thoughts: No deep thoughts tonight. Just happy to add another css trick to my bag.
Link to work: CodePen #008
Resources:
- CSS Clip Path Maker: This is an amazing tool, particularly the custom polygon path maker
- Clipping in CSS and SVG: Reading about clipping
- Clipping and Masking in CSS: Reading about clipping and masking
Today's Progress: I didn't make progress on personal projects, but I worked for around 4–5 hours on a LaunchCode project. I was on a roll, and wanted to keep on going instead of breaking to work on a CodePen. I'm working on a user sign-up form with Python and Flask, that needs to have multiple validation points. I've decided I don't want to count days like these to my 100 Days of Code challenge, but I do want to give myself a break if I've worked at least a couple of hours on projects for school and want to keep going (actual projects, not learning).
Thoughts: Met up with Hailey and Ruby from LaunchCode and had a successful work session at Grand Central Bakery on Fremont. It's a pretty good place to work in the afternoon. Very quiet, and a nice big table. I worked for a couple of hours at home by myself later in the evening.
It can be very overwhelming to try to work on a big project without breaking it down into tiny steps, so I've been careful to implement one tiny part at a time, and test to see if it works. If I get an error, I remove what I just added, and break that down into smaller bits to see what is breaking it. This ends up giving me lots of little successes and motivates me to keep going, instead of coding for hours to find there are multiple errors that I can't untangle.
Link to work: lc101-user-signup
Today's Progress: Finished another CodePen, and messed around with my Kirby installation.
Thoughts: Getting a bit quicker making these. In addition to the CodePen, I spent around an hour today reading and watching videos on CSS units. There is a lot I didn't properly understand, so I'm glad I took the time to do that.
Link to work: CodePen #007
Resources:
- CSS Units (video): I've been working my way through some of the videos in the DevTips archive
Today's Progress: Finished another CodePen. This was an experiment in getting Flexbox to work properly, and trying to flip something back to front.
Thoughts: I cheated a bit and used opacity to hide the front/back of the circles as they turned. I'm hoping to be able to figure out how to do this with backface-visibility instead.
Link to work: CodePen #006
Resources:
- Create a CSS Flipping Animation: I used some parts of this for the flipping
- Using backface-visibility and CSS Animations: I'm going to check this one out tomorrow
Today's Progress: Finished another CodePen. I was attempting to use Flexbox, but that didn't turn out so well.
Thoughts: I'm not super thrilled with what I can up with today. I need to do some concentrated reading on Flexbox tomorrow (before I start coding), and give that another try. I have no idea what I was doing wrong, but I'm determined to work on something every day and post progress, even when I don't like it. I also want to look into how to apply multiple CSS animations (or transitions?) to one element.
Link to work: CodePen #005
Resources:
- Animation Shorthand Cheat Sheet: I didn't end up using the shorthand in the final version (it was causing a probem with my delay), but this helped me understand it
- A Complete Guide to Flexbox: I'm going to start again with this tutorial tomorrow
Today's Progress: Finished another CodePen. Practicing again with :nth-child, and also delayed animation.
Thoughts: I had a lot of fun putting this one together. It's also great to see my animations start stacking up after working on it consistently every day. I can't wait to see 100 animations in my CodePen. Definitely a treat to be doing this after a day of working on MySQL for my LaunchCode class.
Link to work: CodePen #004
Resources:
- Moving an element along a circle by Lea Verou: My animation started from this tutorial
- Quiver: I've been using this app for notetaking <3
- Mastering the :nth-child: Needed a MAJOR refresher on this
Today's Progress: Finished a new CodePen, heavily inspired by the header of the Creative Mornings weekly newsletter.
Thoughts: I'm sure what I did still isn't even close to the most efficient way of doing this, but using :nth-child is a new approach for me. When I started, I thought I'd give each of the divs an individual class, but with using :nth-child I could save that time and create generic divs for each of the circles. I'm excited about some of the new gradient techniques I learned today. I might go back to the MDN documentation tomorrow to try something new.
Link to work: CodePen #003
Resources:
- Creative Mornings Weekly Highlight: This was the inspiration for today's practice
- CSS Gradients at CSS-Tricks: To figure out the hard stop gradients
- Mastering the :nth-child: Needed a MAJOR refresher on this
- GetImageColors: Color picking
- KanbanFlow: For pomodoro timer and task tracking
Today's Progress: Finished a new CodePen. It's blazing hot this weekend, so I made a radiating sun animation. I skimmed the rest of the Pocket Guide to CSS Animations, and read some articles. I also researched CMS's for a new domain, and installed Kirby to try it out.
Thoughts: Another semi-frustrating day with CSS Animations. I tried to do a sun to moon sunset type of thing that didn't work out (design-wise). I'm happy with what I made though, because I've seen that radiating kind of thing before, and I was able to duplicate it without looking at source code. I guess I'm just looking forward to the day I can work on more complicated animations. :)
Link to work: CodePen #002
Resources:
- A Pocket Guide to CSS Animations by Val Head: CSS animation refresher
- Article: CSS Animation Tricks by Zach Saucier: Definitely need to come back to this one to try out some of these
- KanbanFlow: For pomodoro timer and task tracking
- Color Picker: Google has a super simple one!
- Neighbors Podcast: Not directly related, but a good listen while I was coding.
Today's Progress: I reacquainted myself with CSS animation and started some work on CodePen. I made a little circle animation with some text underneath.
Thoughts: I tried for a long time to make the text under the circle flip to say hi/bye, but was unsuccessful. I will try this again another time. I am happy with the color blending however.
Link to work: CodePen #001
Resources:
- A Pocket Guide to CSS Animations by Val Head: CSS animation refresher
- KanbanFlow: For pomodoro timer and task tracking
- GetImageColors: Color picking