Finished Udacityâs Accessibility course.
Logging Graphic Design on Google Keep
Worked on Project Briefs in Lyndaâs Planning your Project
Started working on the Lynda - Graphic Designer path
Finished:
Working through Intro to Graphic Design
I learned about #Design on Lynda.com. I completed Graphic Design Careers: First Steps by @kristinellison https://www.lynda.com/Design-tutorials/Graphic-Design-Careers-First-Steps/497761-2.html?certificate=85B2DBD03120450E8AF21F20AB82FDD6&utm_medium=certificateshare&utm_source=twitter
Choosing not to continue with Round 2, but I wrote up a blog of some of my favorite apps from last few years
Working through some React challenges on freeCodeCamp beta! https://beta.freecodecamp.org/en/challenges/react/create-a-simple-jsx-element
Watched more of Tyler McGinnisâs react bootcamp. A good reminder to use the callback function style for this.setState()
Got workâs server on CloudFlare! Itâs amazing <3
Too slow to win :P but we had a great night with @tylermcginnis and @freeCodeCamp Bozeman walking through the challenges! R2D55/#100DaysOfCode
Remember: Babel = makes JSX code run in the browser without having to write React.createElement everywhere!
Updated my server to PHP 7.2 and got my first laravel project running
Realizing Iâm a little inexperienced with left navigation sweeping in from the side, I spent the morning playing with it on CodePen. There are some nice examples on https://www.w3schools.com/howto/howto_js_sidenav.asp but need a little TLC. https://codepen.io/virtual/full/JLwjKz/
Read more of chapter 3 of Code Complete about architecture requirements
Read more of chapter 3 of Code Complete about project requirements; started architecture requirements
âRequirements are like water. Theyâre easier to build on when theyâre frozen.â Read more on defining program requirements and their importance from #codecomplete. Also added HP bar and death/restart to my game.
Day 50! #freecodecamp Dungeon Crawler continues⌠Added HP potions and a weapon. So close yet still so far; still need to add a boss, more weapons, levels, and that whole dying bit. R2 #100DaysOfCode https://virtual.github.io/toy-factory/
Added darkness toggle, experience points and the ability to kill off cute little pandas #freecodecamp Dungeon Crawler. R2D48/#100DaysOfCode https://virtual.github.io/toy-factory/
Continuing on my #freecodecamp Dungeon Crawler, thereâs now walls and my player can bump into them! (Hooray for little victories.) R2D48/#100DaysOfCode https://virtual.github.io/toy-factory/
My player can now move around the board for my Toy Factory #freecodecamp Dungeon Crawler! https://virtual.github.io/toy-factory/ R2D47/#100DaysOfCode
Updated BS4 sliders to use Slick Slider and implemented a fancy Skip to Main (focus) content region for my faux Knight University. Celebrating Easter with the folks! đ R2D46/#100DaysOfCode
Spent 3 hours fighting with Vagrant on my PC. Think Iâve got it worked out using the exact same process as my Mac now. R2D45/#100DaysofCode
OUTC18 Hackathonâteamed up with Adam S.! Created a Gadget using the @omniupdate API that sends messages to users. #MyFirstGadget R2D44/#100DaysOfCode
Worked on implementing a Google App Script to pull data from a Google Sheet
Changed setup for toy factory and worked on C# for Sololearn. Big day of traveling with OmniUpdate for the OUTC18! Hung out with Jim Heiney and went to House of Blues Anaheim and some shops in the Garden Walk. :)
đ Read chapter 3.1-3.3 of Code Complete on defining program prerequisites.
Determine whether prerequisites need to be defined using a sequential or iterative approach.
âĄď¸ Sequential:
đ Iterative:
â Determine problem definition: ask what the problem is using clear language. The âproblem definitionâ should not include a solution or technical jargon.
Added in a responsive mega menu using Bootstrap 4 to my Knight Univesity page. http://virtual-laravel-twbs4.herokuapp.com/ R2D39/#100DaysOfCode
Practicing some Flexbox Zombies tonight because my brain isnât functioning enough to think about my current projects. đš ââŚNever pays to be shady!â R2D38/#100DaysOfCode
Just a little practice of Flexbox zombies.
Did some cleanup and maintenance on my GitHub repos/pages. Read Ch1 of #CodeComplete on what âconstructionâ entails. đŽÂ âŚAnd made tacos! R2D37/#100DaysOfCode
Moved my Game of Life app off of Heroku (previously fcc-game-of-life.herokuapp.com) to Github
Made a PR for Habit100 to add in some mobile styling
Code Complete: Read Ch. 1 about constructionâwhat it encompasses, why âcodingâ is not quite an accurate word (it simply means translating into computer language).
Reviewing a skills checklist for full-stack developers and noting which areas I still need to focus on. Also, invested in this 900-page book on best practices. Wish me luck! Moved my panda sprite into a responsive grid and started creating a game board for the #freecodecamp Dungeon Crawler challenge. https://virtual.github.io/toy-factory/
Reviewing which parts I need to work more on.
Almost every single program, whether online or in-person, that is teaching you how to be a web developer will start with HTML and CSS because they are the building blocks of the web. Simply put, HTML allows you to add content to a website and CSS is what allows you to style your content. The following topics related to HTML/CSS come up often in interviews and on the actual job when youâre working:
The JavaScript language is growing more popular every year and new libraries, frameworks, and tools are constantly being released. Based on the Stack Overflow 2016 Developer Survey, JavaScript is the most popular language in both Full-Stack, Front-end, and Back-end Development. Itâs the only language that runs natively in the browser, and can double up as a server-side language as well (as youâll see below with Node.js). Below are some topics you need to understand as a Full-Stack Developer:
Once you feel youâve gotten a good grasp on HTML/CSS and JavaScript, youâll want to move on to a back-end language that will handle things like database operations, user authentication, and application logic. All online programs and bootcamps usually focus on a specific back-end language, and in reality in doesnât matter which one you learn so much as long as you understand what is going on and you learn the nuances of your chosen language. Youâll get a ton of different responses if you ask someone which back-end language is the best to learn, so below Iâve listed a few popular combinations. An important note: whichever you decide to learn, just stick with it and learn as much as you can about itâââthere are jobs out there for all the languages listed below.
When learning to build web applications, at some point youâll probably want to store data somewhere and then access it later. You should have a good grasp on the following topics related to databases and storage.
HTTP is a stateless application protocol on the Internetâââitâs what allows clients to communicate with servers (e.g. your JavaScript code can make an AJAX request to some back-end code you have running on a server which will happen via HTTP).
Once you think you have a grasp on HTML/CSS, JavaScript, back-end programming, databases, and HTTP/REST, then comes the tricky part. At this point if you want to create a somewhat complex web application, youâll need to know how to structure your code, how to separate your files, where to host your large media files, how to structure the data in your database, where to perform certain computational tasks (client-side vs server-side), and much more.
There are best practices that you can read about online on, but the best way to actually learn about application architecture is by working on a large application yourself that contains several moving partsâââor even better, working on a team and together developing a somewhat large/complex application.
This is why, for example, someone with 7+ years of experience may not necessarily know CSS or JavaScript better than someone with 2 years of experience, but over all of those years theyâve presumably worked with all sorts of different applications and websites and have learned how to architect and design applications (among learning other important things) to be most efficient and can see the âbig pictureâ when it comes to development. Below are some things you can read that will help you learn how to architect your web applications efficiently:
Git is a version control system that allows developers working on a team to keep track of all the changes being made to a codebase. Itâs important to know a few important things related to Git so that you understand how to properly get the latest code that youâve missed, update parts of the code, make fixes, and change other peopleâs code without breaking things. You should definitely learn the concept behind Git and play around with it yourself.
This topic is somewhat polarizing in the development world because there are developers who donât think there should be such a heavy focus on computer science topics like tree traversal, sorting, algorithm analysis, matrix manipulation, etc. in web development. However, there are companies like Google that are notorious for asking these types of questions in their interviews. As someone said about the Front-End engineering interview at Google:
That said, as Ryan McGrath mentions, our front-end (FE) engineers are expected to have a solid CS background, like all our engineers. While there are companies that practically require applicants to have a computer science degree or equivalent, there are plenty of companies that will hire people without this technical qualification if they can prove that they know how to develop applications and show an understanding of the whole domain. But part of being a competent developer and not writing inefficient code or using the wrong tools is an understanding of some basic algorithms and data structures and being able to analyze trade-offs. So here are some things you should definitely learn:
Played with creating a sprite in my Toy Factory, eventually a part of the Dungeon Crawler app for freeCodeCamp R2D35/#100DaysofCode
Created demo with board. Ran out of space on Heroku, so checking out Github pages more!
"homepage": "https://virtual.github.io/toy-factory/" to the package.json"build": "rm -rf docs && react-scripts build && mv build docs", in package.jsonWorked a little on javascript 30 Challenge 5 flexbox image gallery
Added fancybox video player (and some sweet Manchester Orchestra videos) to my Laravel demo
Finished ch3 of Flexbox zombies
Finished the first #D3 challenge in @freeCodeCamp! đ Iâm pretty proud to have worked out the logic for the scales and method chaining, as well as the styles for a responsive vertical bar chart! R2D32/#100DaysOfCode https://codepen.io/virtual/full/XEXVpp/
Laravel Homestead for twbs4:
cd ~/Homestead
vagrant up
Working more on the D3 challenge for @Freecodecamp. It helped to think about how I would do it in HTML/CSS first and then translate that back into D3 functions/JS. R2D31/#100DaysOfCode https://codepen.io/virtual/full/XEXVpp/
Finished reviewing setup for Debian servers; learned you can use zcat/zless to read files that are gzipped. Also did some Haml, flexbox and D3 for a small mock resume on codepen. R2D30/#100DaysOfCode
Finished reviewing chapter 3 on setting up Apache/Debian on a web server.
Practed Haml markup, a little D3 and flexbox in the start of a simple Web resume
Watching some videos from Lyndaâs Linux Foundation Cert Prep series & happened upon managing SSH keys⌠so I organized my SSH keys using an SSH config file! So tidy! ⨠R2D29/#100DaysOfCode
Watching some videos from Lyndaâs Linux Foundation Cert Prep: Service Configuration (Ubuntu) series and learned about managing SSH keys⌠so I organized my SSH keys using an SSH config file! Related walkthrough: Simplify Your Life With an SSH Config File
âWorked outâ some challenges doing Array Cardio! #javascript30 R2D28/#100DaysOfCode https://virtual-javascript30.herokuapp.com/04-arrays/index.html
Added a polyfill to one of my #javascript30 programs so it would run in older browsers; checked out a D3/React ex in Github (w/ PR: https://github.com/virtual/d3-explorer) and started challenge 4 data setup. R2D27/#100DaysOfCode
Added padStart polyfill to JavaScript30 challenge 2 (clock) so it works for older browsers.
Played with this D3 library example and updated the .eslintrc file so the program would run for me. Made a PR in case this is helpfulâaccepted!
Began working on challenge 4 data
RS26: Added a procfile to my heroku install so now my #javascript30 application is working! Completed challenge #3 â CSS variables. https://virtual-javascript30.herokuapp.com/index.html #100DaysOfCode
web: vendor/bin/heroku-php-apache2 /
R2D25 - PR accepted for updates to these âSpark Notesâ for the Pragmatic Programmer. đŞ Lots of great informationâcheck it out! #100DaysOfCode https://github.com/HugoMatilla/The-Pragmatic-Programmer
Refined the styles for my video grid section inspired by the amazing UX designer Krista Lacida. (Video functionality to come later.)
I first coded the play area without flexboxâit was much more classy using flexbox! Also I learned about using the box-shadow for overriding initial text-decorations (including line size and color.)
When implementing the JS, Iâll want to find a way to tag the current playing one with an active status and maybe lighten the box⌠(Or maybe that is pointless, since the video player will be overlaid over the page?)
Anyhow, enjoying how itâs coming together ;)
Learning about adding models (data) to views (page layouts) in Laravel. https://www.lynda.com/Laravel-tutorials/Create-forms/604257/648654-4.html?autoplay=true R2D23/#100DaysOfCode
Continuing to play with Bootstrap 4 and Laravel for my fictitious Knight University! http://virtual-laravel-twbs4.herokuapp.com/ R2D22/#100DaysOfCode
Got a simple Laravel app running on Heroku. Learning about pulling views into layouts, added in FontAwesome and some Bootstrap overrides. R2D21/#100DaysOfCode http://virtual-laravel-twbs4.herokuapp.com/
TGIF! Today learning about Laravel controllers from Lyndaâs Laravel 5 Essential Training. Looking forward to some Halo 4 đŽ LAN partying tonight! R2D20/#100DaysOfCode
Learning some of the Laravel file structure and got Bootstrap 4 working on my welcome blade! (I need to get used to running my commands from my Vagrant terminal.) R2D19/#100DaysOfCode
Playing with getting Bootstrap 4 up and running within Laravel 5.6. Shoved some BS4 HTML within the welcome âblade.â Some useful code bits to get it working:
CSRF Token seems to help calm a console error.
<meta name="csrf-token" content="" />
<link href="" rel="stylesheet" />
JS after footer:
<script src=""></script>
Iâve added some more scss changes to the resources/assets/sass folder.
From the ssh on Vagrant, run npm install and then compile using npm run dev or npm run watch-poll (since it doesnât work with just npm run watch on my VM). More on these commands from the Laravel 5.6 docs
Woohoo! I finally have Laravel running on a local Vagrant instance. @jcs224 I hope you are proud! đ It only took me since October. R2D18/#100DaysOfCode
I am probably flip-flopping around too much, but I really want to start building a Bootstrap 4 template of an existing design. Iâm hoping to do it using some smart setup, and now Iâm researching Laravel again. With Vagrant. With VirtualBox, and Composer.
I got stuck on the install instructions, thinking that cloning the Homestead repo was if the vagrant homestead library didnât work correctly, but now I understand. ScotchIOâs Getting started with Laravel Homestead also helped me over some setup hurdles.
Currently, Iâm to the point where I have set up some overrides for my Homestead yaml:
# ~/Homestead/Homestead.yaml
---
ip: '192.168.10.10'
memory: 2048
cpus: 1
provider: virtualbox
mariadb: true
authorize: ~/.ssh/id_rsa.pub
keys:
- ~/.ssh/id_rsa
folders:
- map: ~/code
to: /home/vagrant/code
sites:
- map: homestead.test
to: /home/vagrant/code/test/public
- map: laravel1.test
to: /home/vagrant/code/laravel1/public
databases:
- homestead
And as luck would have itânow Iâm learning how to write better code blocks in Markdown! :)
Now I can vagrant ssh and run composer global require "laravel/installer"
In my folder /home/vagrant/code/test Iâm running laravel new publicâŚ
That wasnât exacty rightâŚ. Laravel creates it own public folder, so I should run laravel new test instead from /home/vagrant/code
But⌠There is a Laravel homepage showing! This is the furthest Laravel progress Iâve made.
Learning about Unity and the object controls. R2D17/#100DaysOfCode
Finished âLearnâ tutorials from Unityâs homescreen 3/4
Finished the third part of SoloLearnâs C# tutorials. Might start playing with Unity this week thanks to suggestions from @idwardis R2D16/#100daysofcode
Continuing to learn C# on SoloLearn. Getting more practice at the pre-increment and post-increment functionsâa little tricky! R2D15/#100daysofcode
Learning C# this weekend on @SoloLearn thanks to their fantastic mobile app. R2D14/#100DaysOfCode
Started learning D3 for charts. Loved the Scrimba video but canât quite understand the API docs. Going to need more tutorials to figure this out! #freecodecamp R2D13/#100DaysOfCode
https://codepen.io/virtual/pen/MQqwby
Kept thinking about this Game of Life setup between dreaming, haha. đž Feels awesome to complete a #freecodecamp React game challenge in three days! (Now to catch up on that sleep!) R2D12/#100DaysOfCode https://fcc-game-of-life.herokuapp.com/
Also enjoyed implementing a range sliderâIâve never done that before (maybe a little overdue)!
Continuing to work through the Game of Life #freecodecamp. The logic isnât quite right yet, but it does transform enough to make me feel semi-productive! R2D11/#100daysofcode https://fcc-game-of-life.herokuapp.com/
đ˛ Set up the game board for the #freecodecamp Game of Life challenge
âď¸ Lifted the state & refactored data using a multidim array with on/off passed down as a prop to each square
R2D10/#100daysofcode
Began a Software Dev course on EdX and took a peek at the requirements for the next #freecodecamp challengeâGame of Life. (Fascinating stuff!) R2D9/#100DaysOfCode https://www.edx.org/micromasters/software-development
Started looking at EdX - Software Development for understanding good software design as recommended by Smai.
Course > 1a: Beginning Student Language > Expressions > Expressions, pt 1
Dr Racket is taking a bit too long to download so Iâll have to continue that another time.
Began looking at FreeCodeCampâs Game of Life challenge.
Created a #javascript30 Clock (02) using CSS transforms and JS. đ A good review of the date functions too! R2D8/#100DaysOfCode
Edit on update and save completed for my #freecodecamp Recipe App and submitted!âall before breakfast! (Since I want some of my data pretty, it only works on new additions.) https://fcc-recipe.herokuapp.com/ R2D7/#100DaysOfCode
Some issues, but Iâm so done with this for now:
Working on edit functionality for #freecodecamp Recipe box; maybe Iâll get the save/update to work tomorrow⌠No wonder this thing hasnât been finished yet. đŞ R2D6/#100DaysOfCode
â
Transform text to inputs on form
â
Implemented logic for client to pass updated data
â Input boxes need states so they can change
â Server route/Mongo query needed for update
đ Another round of working on my media catalog app
đ°ď¸ Added in more session checking
đď¸ Rewrote dashboard so users can view their own collection of movies
R2D5/#100DaysOfCode
Finished rewriting Cat Clicker Premium using MVC structure. Itâs such a foreign structure to me⌠Itâs so tidy. Seriously digging this @Udacity course from @benjaffe! R2D4/#100DaysOfCode https://classroom.udacity.com/courses/ud989
(Sick today đ¤ but made it through work and finished a giant spreadsheet.) Also registered with Shoreline to go to OmniUpdate conference this March, so that is super exciting!
The data. Make a nice object literal and stick the information in it. The view should never modify the model directly, and vice versa.
The objects users see on the screen and interact with. If there is a common structure, put it into the HTML. The view functions can then populate those DOM elements.
The link between the View and the Model. If someone clicks on an item in the view that changes the data, the controller must be the one to update the model. Controller functions might cause re-renders of views after the data has been changed.
đą Working through MVC reorganizing challenges from Udacity Design Patterns with Lesson 2 - Cat Clicker Premium! https://classroom.udacity.com/courses/ud989 R2D3/#100DaysOfCode
đĽ Reorganized my code so my collections can reference IMDb IDs more easily
đ˛ Logged in users can click a button-wow!
đ¨ Did a little art with a poster placeholder graphic
R2D2(đ¤ hehe)/#100daysofcode
Learned about 5-4-3-2-1 from @smaifullerton-wk: â5,4,3,2,1 is to motivate yourself to do something when you donât have motivation - all it means is you say in your head 5, 4, 3, 2, 1 and then without further thought you get up and start working on the thing. it sounds kinda nutty and obvious but it really works, because it doesnât give your brain an opportunity to argue against doing whatever it is you donât feel motivated to do but know you should. It doesnât really create motivation, it builds discipline to push past resistance to doing good things.â
Starting Round 2 of #100DaysOfCode with my React/MySQL project! Join me đ
â No progress on listing a userâs movie collection
âď¸ Moved some functions into a React store for better data accessibility
đ¤ Planning to do mostly app dev & Javascript30