Today's Progress: Starting to learn React. Uploaded my first 100 Days of Code Challenge!
Thoughts: My goal is to learn React and learn how to build React Native mobile applications. So far I just started with very simple React Code. I'm still trying to get used to the syntax and using JSX. It's very interesting tho! More to come!
Link to work: 100 Days of Code: Day 0
Today's Progress: Downloaded and installed the React Native CLI. Created first React Native Project. Became more familiar with JSX. Learned how to import and export components.
Thoughts: Continuing with my goal to build a React Native project. Today was interesting because I strayed a little from the course but I feel like I learned a lot. In the course, they suggest we use a provided link to an API which has some data about albums by Taylor Swift. Not being a huge TS fan, I decided to create my own API service using a npm package called json-server. It allows me to create a db.json file with my own API data and loads it to localhost:3000 so I can make a GET request from my React Native App. Now I have that tool available in my back pocket! Pretty cool stuff!
Link to work: 100 Days of Code: Day 1
Today's Progress:
- Learned about the differences between Functional Components vs Class based components
- Learned about AJAX requests to my API
- Learned about promises in ES6
- Visualized the time line of booting up my app and in which order it fetches and renders data
- Downloaded Axios to help with GET request to my API
- Discovered more about state and updating the state in my class component
Thoughts: Today was huge! Made significant leaps with my react native project. I feel like this was the perfect project for me to work on for the 100 Days of Coding challenge. I am solidifying the concepts I learned while taking the MEAN stack at Coding Dojo while challenging myself with enough new material. Excited for tomorrow's challenge!
Link to work: 100 Days of Code: Day 2
Today's Progress:
-
- Only use state with class based components. Functional components do not have access to state.
- Using the map method to iterate through the array of album objects
- Learned when referencing javascript in JSX, use curly braces
- Learned how to utilize props to communicate from the parent component to the child component
- Passing components as props
- I learned A LOT about positioning of components and elements for mobile which include Flex-box.
- I learned about rendering images with React Native. (An image will not expand by default to fill the space around it
- I learned how to destructure information so that my code looks clean and easier to read.
Thoughts: Another big day! I feel like I'm learning so much so fast that I'm concerned if I'll be able to remember it all. I guess the best way to keep all of it fresh to keep building projects and using the tools I learn.
Link to work: 100 Days of Code: Day 3
Today's Progress:
- I learned how to make my application scroll by importing and using ScrollView
- How to create button component and style it
- Making the button component have a UX response when clicked by fading the opacity
- How to make the button component reusable by utilizing props
- Producing an action when a button is pressed by the user using the prop onPress
- In order to produce that action, I needed to import the Linking library and use the built in method openURL to open the url provided by my Beatles API
Thoughts: I feel really good about completing this simple React Native project. Looking forward to using my skills and building another application very soon!
Link to work: 100 Days of Code: Day 4
Today's Progress:
- Outlined the challenges for this app
- Will need an input component to take user text
- Created a new app
- Created a src folder that will hold all of the components for the main app
- Deleted the original App.js file
Thoughts: After completing my first react native app, I feel like this second app will be slightly easier to create. There will be a few new challenges, however, such as using Firecode for the server/database and having that connect with the app. Also, I will need to figure out how to do validations in react native.
Link to work: 100 Days of Code: Day 5
Today's Progress:
- Made use of components from past projects
- Copied and pasted them into our current project
- Instead of having multiple import statements at the the top of the page, I used a trick to import and export multiple components in one line of code “export * from …”
- The only catch is you can’t export default at the bottom of a component, you have to export an object with a key and value
- Created a Firebase account
- Within Firebase, created a sign in method for my application
Thoughts: Learning how to reuse components is going to be VERY valuable in the future when creating more apps. It's a very efficient way to stay DRY. Getting to work with Firebase is also very interesting. I've worked with SQL and NoSQL databases before but I've never had a chance to work with a database that is completely online. Looking forward to completing more tomorrow!
Link to work: 100 Days of Code: Day 6
Today's Progress:
- Worked through the algorithms and data structures in a freeCodeCamp online lesson
Thoughts: Decided to change it up a little today. Worked on a few easy algorithms and data structures in a freeCodeCamp lesson.
Link to work: 100 Days of Code: Day 7
Today's Progress:
- Worked through the algorithms and data structures in a freeCodeCamp online lesson
Thoughts: Did some more algorithms before leaving for a ReactJS meetup today.
Link to work: 100 Days of Code: Day 8
Today's Progress:
- Attended the Thinkful meetup at Treehouse in Addison today.
- We built a Twitter Bot that tracks certain words from a user's tweets and will reply with a custom message reply to that user.
Thoughts: It seems like there might be a lot of uses for the Twitter API. I could it seem it being used to gather for information or maybe for mass replies.
Link to work: 100 Days of Code: Day 9
Today's Progress:
- Attended a Virtual/Augmented Reality meet up in Oaklawn.
- Worked through more algorithms and javascript lessons on freeCodeCamp
Thoughts: It seems like there is a huge demand for AR in the commerical market and VR more in the enterprise field. I discovered today that AR/VR can be used for training and is already being implimented by Walmart and KFC for training it's employees. There is also demand for AR/VR in the military and also in the field of education.
Link to work: 100 Days of Code: Day 10
Today's Progress:
- Incorporated a component called text input today. It allows a user to input text in a form like field.
- There are some difficulties with the text input component such as style issues and default width and height settings.
- Set the state with the text input to update on text change
- The reason for this is because React Native doesn’t allow for information from an input field like we would in a web application. We have to use a sort of roundabout way to get to the text through explicitly setting the state
- Added Styles to the text input
Thoughts: Decide to resume work on my second React Native project. Excited about the new components involved in this project. I'm ready to start using Firebase and connect it with my app. I'll also need to make my way to the Apple store sometime this week and purchase a USB-C to Lighting connector so I can start testing these apps on my phone instead of just exclusively on the simulator.
Link to work: 100 Days of Code: Day 11
Today's Progress:
- Began working on my portfolio
- Using just HTML5, CSS3, and Bootstrap right now
- Planning on redoing it in React later
Thoughts: This is an exciting project for me! I feel that my skills are pretty good with HTML and CSS so I feel like I know what I'm doing for once! This is just the first part of my portfolio. I am referencing code from all over and writing my own as well. Hoping to make this website responsive and interactive.
Link to work: 100 Days of Code: Day 12
Today's Progress:
- Continued working on my portfolio
- Becoming more familiar with Bootstrap 4
- Used class "container-fluid"
- Figured out how
data-toggle="collapsed"anddata-target="#navbarResponsive"work in Bootstrap - Add a carousel component to my portfolio
- Also used a jumbotron
- Became really familiar with the grid system in Bootstrap. It helps to divide the page and make different components responsive
- Added gifs for my projects section. I was originally just going to use pictures but I felt that gifs provided a better idea of how each of my projects work
- Also added empty links to each project on GitHub for right now
Thoughts: Well, the portfolio page is coming along slowly but surely. I am learning a lot about HTML/CSS/and Bootstrap that I didn't quite master before. Just little tips and tricks. I think this is my favorite part of programming because it really allows me to exercise my creative half. I spent most of the day tweaking and making tiny adjustments to my website trying to get it just right. Looking forward to making another site using primarily React but in the meantime, I need to complete this one.
Link to work: 100 Days of Code: Day 13
Today's Progress:
- Work continues on the portfolio
- Today was a lot of responsive design
- Instead of using px for some of the CSS, I used em and rem and %
- I also made use of media queries which are really cool for controlling your components size up to a given window size
- Added more icons near the bottom of the screen in the Connect section
Thoughts: Building this portfolio was fun but tedius. It's A LOT of code for just HTML, CSS, and Bootstrap. I can see why there are frameworks for just the front end to help reduce clutter and produce results quicker. Next step will be to add the links and deploy the website to a domain! Exciting!
Link to work: 100 Days of Code: Day 14
Today's Progress:
- Added some JS to my portfolio
- Made it able to scroll to certain parts of the page when the link in the nav bar is clicked
- Also added a few links like resume and GitHub
Thoughts: Already thinking about how to approach this with React!
Link to work: 100 Days of Code: Day 15
Today's Progress:
- Finalized my portfolio
- Deployed it using DreamHost service
- Secured data and information by signing up for an SSL
- Added a parallax scrolling effect to an image
- Added the ability to scroll to certain sections
- Added the ability to scroll back to the top of the page
Thoughts: I'm pretty stoked to have something that I created from scratch up and running on the internet for anyone to see!
Link to work: 100 Days of Code: Day 16 (https://steventorrence.com)
Today's Progress:
- Taking it back to the MEAN stack
- Used Node.js to create a basic server
- Wrote it using ES6
Thoughts: Going back and rediscovering a stack is something everyone should do at least once! It's amazing the amount of gaps there were in my knowledge the first time around. The second time around I feel like there are lightbulbs going off everwhere. It's exciting to think about where I'll be at the end of the year.
Link to work: 100 Days of Code: Day 17
Today's Progress:
- Created a MEAN stack repo in my GitHub
- Finishing assignments from the Coding Dojo Platform
- Completed "Landing Page Assignment" in Node.js
Thoughts: Going back and rediscovering a stack is something everyone should do at least once! It's amazing the amount of gaps there were in my knowledge the first time around. The second time around I feel like there are lightbulbs going off everwhere. It's exciting to think about where I'll be at the end of the year.
Link to work: 100 Days of Code: Day 18
Today's Progress:
- Created a basic server using Node.js
- Had it respond with views
- Had it respond with stylesheets
- Had it respond with images
Thoughts: Going back and rediscovering a stack is something everyone should do at least once! It's amazing the amount of gaps there were in my knowledge the first time around. The second time around I feel like there are lightbulbs going off everwhere. It's exciting to think about where I'll be at the end of the year.
Link to work: 100 Days of Code: Day 19
Today's Progress:
- Completed the Node.js section in the Coding Dojo platform
- Started the Express.js section in the Coding Dojo platform
- Using Express to make Node server more efficient and use less code
- Static views vs. Embedded JavaScript
Thoughts: Going back and rediscovering a stack is something everyone should do at least once! It's amazing the amount of gaps there were in my knowledge the first time around. The second time around I feel like there are lightbulbs going off everwhere. It's exciting to think about where I'll be at the end of the year.
Link to work: 100 Days of Code: Day 20
Today's Progress:
- Began review of Angular
- Created Angular app "Hello-World"
- Created components manually and also using the CLI
- Created Services manually and also using the CLI
- Property Binding
- Style Binding
- Two Way Binding
Thoughts: Going back and rediscovering a stack is something everyone should do at least once! It's amazing the amount of gaps there were in my knowledge the first time around. The second time around I feel like there are lightbulbs going off everwhere. It's exciting to think about where I'll be at the end of the year.
Link to work: 100 Days of Code: Day 21
Today's Progress:
- Worked with forms today
- Used "Zen Coding" to quickly write markup with classes and attributes
- Learned how to impliment frontend validation
- Front on Validation on text input, checkboxes, and radio buttons
- Consuming HTTP Services
Thoughts: Going back and rediscovering a stack is something everyone should do at least once! It's amazing the amount of gaps there were in my knowledge the first time around. The second time around I feel like there are lightbulbs going off everwhere. It's exciting to think about where I'll be at the end of the year.
Link to work: 100 Days of Code: Day 22