Patrick's App Academy @patricksandquist-blog - Tumblr Blog

W9D5

Final day working on the capstone project has come and gone and I am getting to the point where I am satisfied with my project overall. I had lots of ideas about features to implement but thought that getting a tagging and sorting system for the coding questions involved would be important. This was straightforward work but it took me most of the day to make look good on the site. I would have loved to also include difficulties with the questions, but this will have to be a feature for another day as we are now moving into the job seeking portion of the course. From now on, I will be spending all of my working time applying to development jobs around the Bay area and maybe some other locations on the West coast. It’s been a wild and exhilarating ride, and I can’t wait to see where it takes me next!

#app academy

W9D4

Started out today fixing a lot of the bugs that popped up in the demo day yesterday. I also addressed an issue that I did not know existed: the fact that my site rendered different in different browsers! I opened up my page in Firefox, Chrome, Safari, and Internet Explorer and found that they all looked different, so I went one by one ensuring that they were the same. Ah, the fun of web development!

I then dedicated my afternoon to adding a voting system to my solutions and views so that users can vote on solutions for being either clever or done with best practices. I made sure to limit users’ votes to one per solution to ensure fairness. After adding some bad ass buttons and icons to the solution index view, I almost completed a sorting feature that will organize solutions by these votes as well, but didn’t quite have time to finish it! Will get to this and much more tomorrow before our big graduation party!

#app academy

W9D3

Though we’ve been working next to people all throughout the capstone project period, today was the first time that we publicly exposed them to our peers. As a warmup for the upcoming demo day next week, we had a dry run with two partners who used our site for a long enough time to try every single button and functionality it offers. This was a great experience for a couple of reasons. Firstly, watching other people use my site exposed some confusions that people could have when using it. My log in and sign up pages were so similar in look that people had a tough time realizing that the page reloaded, for example. It also exposed some errors that I did not even know existed (like infinite recursion errors and early returns). I certainly learned a lot about how my application could be more user friendly and error free. The other great part about today’s demo was that I saw two other really great projects! I’ve been casually peeking at how others have been doing, but to fully explore what people have been working on so hard for the past week or so was a whole other experience. I am so impressed by what everyone has imagined and achieved in such a short amount of time. I can’t wait to see the final results!

#app academy

W9D2

My minimum viable project is officially complete! Sure, my web application is basically a Q&A forum for coders, but it’s so much more now that I have worked through each little challenge on my own. Now that the entire log-in, index, code testing, solution posting and browsing functionality is working and looking great, I can focus on adding lots of smaller features to the site. I have so many ideas, but I need to keep in consideration what I’ll be able to implement quickly and what it will add to the site overall. The first thing that I can think of is adding a voting system to the solutions index page so that users can interact with other users’ content in a meaningful way. This would lead into sorting solutions by votes. After that, I want to add tags to questions which then will lead into searching by question title, content, and tags. That seems like enough to focus on for now!

One thing that I was really pleased with today was the fact that I was able to auto import Ruby’s Math module into any code that is run in the sandbox. This was done by allowing the sandbox to use all of the Math module methods and then allowing it to access the global Math variable that I define. This adds a ton of flexibility to possible solutions that will surely come in handy in some of the harder questions!

#ruby #sandbox

W9D1

Today was another day filled with CSS and improving how each page of my application looks. One of the most important components of my project (in my opinion what will set it apart and add tons of functionality) is getting the excellent Codemirror library incorporated. Codemirror is a Javascript library that lets code in the browser look like code in Atom or similar text editor. Adding Codemirror would mean adding syntax highlighting, autocompletion, bracket matching, linting, and so much more. So I tried for a long time today trying to get it to work! One of the issues is that Rails includes libraries in the Gemfile and application.js. The rest of the front-end world seems to use the package manager npm which comes bundled with Node. Changing all of my library dependencies though from application.js to npm is a bit of a daunting task but it might be necessary if I can’t figure out how to fully incorporate Codemirror by tomorrow. Time is running out!

#codemirror #react #css

W8D5

After getting the basic functionality of my site down, I decided to spend the day making it look good. Huge amounts of CSS were applied to the sign up, sign in, index and editor pages which is a step in the right direction. Hit a bit of a brick wall though when I tried incorporating Codemirror’s textarea feature to my editor. Something that I don’t have a lot of experience with at the moment is learning how to use and include 3rd party Javascript packages through npm. A lot of what I could find on the web didn’t deal with doing so with Rails,especially once I limited myself to using one of two Codemirror-React components I could find. Oddly, both of their examples simply produced fatal errors in my code that prevented me from debugging effectively. I’m going to try to ask for some help getting them to work on Monday but if it’s not so straightforward, I might have to pivot and make my own!

More to come on RubyOff.

#react #codemirror #CSS

W8D4

Today was a good day for my capstone project! I added a lot of the core functionality of the site including finally being able to see the output from the sandbox. If all of the tests pass, then users can post their solutions to the database and browse what other users have answered. There’s still so much to implement, but it’s a large step in the right direction. One of the largest challenges was getting all of the React components working together with the Router. This project is a lot more complicated than our one day projects of yesteryear (of course), so I’m really starting to appreciate the Flux structure of everything as it organizes everything well. There’s little question as to how to implement a new feature which is always a welcomed push in the right direction.

Tomorrow I’m going to finalize the handling of bad code and then dedicate myself to making the website look more like Codewars and a bit less like straight up text in HTML elements. Upwards and onwards!

#app academy #html5 #react #router

W8D3

Second day of RubyOff! and a lot of progress was made. Charles gave me some good pointers right when I was about to give up on my idea. I’m still worried that I won’t get time to include all of the features that it should have by next week but hopefully it will be a functioning site. Why did I pick such a hard project?

I managed to get some of my components complete today and I can now browse various coding questions and select one to enter the editor view where solutions can be written by users. I’m also able to run users’ code and tests on the server! This is all done in a secure sandbox environment so users will not have access to any variables outside of their ‘shell’ in the browser. I’m still working on how to display the output, but it seems like I’m on track. After the full circle of user interaction is done on the site, I’ll add lots of CSS to make it look like the modern, dynamic beauty it is. Then I’ll hopefully add the features that will make it stand out.

#app academy #react #css

W8D2

Our first capstone day! It was....slow. My idea for a capstone project was to make a site in the fashion of codewars.com, a terrific resource for practicing coding problems. I used it a ton to get into App Academy because one of the great features of the site is that you can easily see how other people solve problems. It perfect for quickly learning the best of what a language has to offer. From my weekend proposal, it was clear that the biggest obstacle (and unknown at the start) was creating an environment on the site for users to run Ruby code in. This has to be done in a self-contained environment called a sandbox. We wouldn’t want any untrusted code to be run on the server in anyway that could affect the database and/or other users. Because developing such an environment is way beyond the scope of this course, I spent much of my day trying to find a package that provided this for me. My starting place was Repl.it, but unfortunately their packages are now out of date and broken as they have moved to an online API ($150 per month, no thank you). I found a managed to get working a Ruby gem called Shikashi but running bad code in my Rails application with it crashed the page. I found a similar package made for Javascript code, but it did not seem secure on the surface. Unless I find a better way of dealing with errors in Shikashi or a more secure alternative, I might have to pivot in vision...

More to come on this topic.

#app academy #ruby #sandbox #javascript

W8D1

And that’s it! Today was the last day of the normal curriculum here at App Academy. It’s hard to believe how fast it has gone, but now we are ready to lead our own way through our final projects before we start seeking employment. Our last day was spent improving our AirBnb clone from Friday by adding some filtering features to the flux loop. It was a hard but fun day in which I learned lots about the process of longer term development. More than anything I’m surprised how long it takes to include one simple vision, from the database to the front end. I imagine this is something that will come quicker to me over the coming weeks though!

Now, on to RubyOff!

#app academy #react

W7D5

Today after a quick lecture summing up the React and Flux curriculum, we began cloning the AirBnB site. There’s lots of features to approach so we started just by including a list of properties and a map with their locations. Including the Google Maps API proved to be a straightforward and fun in Javascript. The interface is easy to understand and include, and customizing features like the icon images was an easy and added a personal touch. Solving some issues like only loading the pins within the map boundaries proved to be more difficult than expected but I’m excited to continue improving the site and adding features on Monday.

#react #flux

W7D4

Today was a good day, for a number of reasons!

First of all, we started our day off with a long Q&A and lecture by our most recent TA, Max, and it cleared up a lot of questions that I had going into class. Though our applications have been small in scope and quick in build, I can can already see how Flux can help organize the data flow and structure of the framework. For larger projects and collaborations between teams, the use of a Flux-style architecture seems essential. An exciting component we learned about today was the React Router. Something I had been curious about for a while now was how some sites redirect users and display different content without reloading the page. React’s Router component allows us to do just that. Which brings me the second reason why today was a good day, we used the React Router to make a Pokédex.

For those of you not familiar with the GameBoy classic that claimed 1000′s of adolescent years, a Pokédex is a device used for storing information about Pokémon. The Pokédex that my partner Minh and I created stored the names and type of all the Pokémon which when clicked would reveal stats about their fighting and defense powers. This was wrapped in a dynamic and colorful interface that could easily be added to to account for healing rocks and precious stones as well as Poké toys if one desired. A really enjoyable project, overall.

The final (and potentially best) part about today was the fact that everyone found out that we had passed the final assessment, 4 days ahead of it’s schedule! Since the TA’s have been working so hard on the new React curriculum for our cohort, there wasn’t enough time for them to get together an assessment and practice for us in time. I don’t think any of the students were complaining :)

#app academy #react #flux

W7D3

We found out earlier this week that working with React often goes hand in hand with working with the enhanced JavaScript derivative, JSX. Yesterday, we found out that React is also often paired with another engineering component developed by Facebook, Flux. Flux is not a language or a framework, though, it is merely a suggestion for how to organize each component of an application. This is our first real exposure to information architecture and was quite interesting to learn about. The plan is laid out so that information only flows in one direction behind the scene and sets up an application for easy scalability down the line. Once the initial framework is in place, it is easy to see where new components will fit and since everything is separated, components are easy to modify.

My partner Victor and I struggled through getting the initial framework in place for our online organ app, but once it was running we quickly moved into altering the pitches, waveforms, and volume of the output, as well as creating a visual interface that could be interacted with down the line. I enjoyed the work and look forward to using the Flux structure in my quickly approaching capstone project!

#app academy #flux #react

W7D2

More React today! This time, way more in depth than yesterday. After our morning lecture that cleared up some of the more confusing points from yesterday, we broke into pairs and started working with something we haven’t touched in 2 weeks, Ruby! We began by creating a new Rails project and building up the database and controllers for a basic todo list. We then switched into React and JSX mode and started building up how each component should be rendered and change as the user interacts with the interface. Something that really helped me today was to break down the whole application into small components (applied named by React) that each did just one job. This bigger picture of the state of our entire web app was good to keep in mind as we worked through the details in the view. I look forward to learning tomorrow how we can possibly keep track of all of the different components and processes in larger Rails projects using the Flux workflow.

#react #ruby on rails #app academy

W7D1

Today we started working on something that no previous cohort has approached before, React. As is exciting as this was, I wanted to know why we were acting as the guinea pigs for this particular Javascript library. React is not an MVC like Ruby or so many other full frameworks, it more commonly acts as just the V (view) in web applications, though Native React does exist for more console-based applications. In fact, Github’s excellent text editor, Atom, was originally written in React due to one thing that sets React apart from many other Javascript frameworks: it’s extremely fast. This attribute can mainly be accredited to React’s intelligent virtual DOM that only re-renders what it needs to on the actual DOM. This process of reconciliation vastly improves render times and makes dynamic and responsive sites (wait for it...) react instantaneously to changes in state.

In our first exposure to the framework today, my partner Arthur and I built some simple widgets that showed time, weather, and some dynamic tabs. We then moved into the much larger project of creating a React-based minesweeper on a basic Python server. I really enjoyed seeing how the flexibility of React allowed us to quickly create a dynamic and interactive game. I’m looking forward to the rest of the React projects this week and in my future since it’s a really enjoyable library to work with in conjunction with JSX.

#jsx #javascript #react #app-academy

W6D5

After putting away yet another assessment (only one left, finally), we continued with another lecture, this time on AJAX. AJAX allows websites to make Http requests and responses behind the scenes without re-rendering the page. So much of the web is built off of this type of experience but I did not realize how much work went into making a instant search or simple counter button.

After the break (Friday lunch beer? Yes, please), my partner Evan and I dove into AJAX full on by trying to make a basic Twitter clone with instant search functionality and the ability to follow and unfollow users on the fly. It was a difficult day but our work paid off in the end and we celebrated the beginning of a great weekend!

#ajax

W6D4

Today was all about using jQuery, a Javascript library, to make new plugins and enhance some HTML pages. This was mostly done using another new concept to us: CSS transitions. I did not realize until now how much work went into moving objects around sites! Even making a basic image carousel took my partner Sven and I a few hours. The end result, though is a beautiful and robust tool that we can easily append onto any of our websites because we took the time to wrap it in a jQuery plugin. I can see the appeal of using libraries like jQuery (as well as others’ plugins) to enhance web content alongside HTML and CSS. After tomorrow’s assessment, we will continue our work and begin to introduce AJAX to our sites.

#jquery #javascript #html5 #css

Trending Blogs

Recently Viewed Blogs

Patrick's App Academy