vocitates

[vocitates]

Collaborating on GitHub

This week I’ve had the opportunity to start working in a small group on an application. This was my first time ever actually taking on something like this and I specifically had never used GitHub to collaborate on a codebase before. Heres some of what I learned:

A typical Git workflow is fairly natural for most new developers. Its one of the first things you should earn about. However, since working on learning to code is often an isolated practice, it’s rare to need to learn to use the git commands that are useful for collaborating on a codebase. 

The first command I learned that was new to me this week was `git branch`. This is essential to working in a team with git because it is important not to write all of your code on the master or main branch. 

Another thing I was not familiar with was using pull requests to manage adding individuals code to the master branch in GitHub. This is a great process that allows for additional accountability making sure that whatever code makes it to the main production branch is the best possible code. Helps to endure a proper code review before anything gets pushed out out or committed. 

I still have plenty to learn about this particular work flow but I’m excited to get some practice with the process in a real team environment. 

[vocitates]

React/Redux Project

React is a lot of fun! 

Creating this application was a huge challenge but one I was excited to take on. 

All of my projects up to this point have been movie themed. I hoped to build up to fully cloning another app that is a social media/movies and reviews type site called letterboxd. While I ultimately was not able to create all the features that letterboxd has by myself in 2 weeks I feel confident that given the time I have the tools to do just that!

One of my favorite things to play with in my projects has been adding animations to elements. I discovered that with React component libraries, this process is super simple. I used the react-awesome-reveal library to animate some elements in this app and its implementation is so easy I may never want to go back to just using plain CSS animations (although this library is based on my favorite CSS animation library Animate.css) 

One of the biggest challenges was understanding and implementing Redux in this application. The more I felt like I grasped it, the more. I realized this layer of complexity was maybe not needed for a project this size, however, given the fact that I really want to expand this application, having already started with a Redux workflow will likely make things easier as it expands. 

The difference between how I felt about coding a month ago to now is awesome! I really struggled with our JS project and had serious doubts about my ability to complete this program. Now I’ve made something that I’m really proud of and feel super confident moving towards graduation and job hunting!

[vocitates]

Javascript/Rails Project

This one was a challenge for me.

I’ve had a hard time with Javascript for years. Even before Flatiron, when I was trying to just lear on my own, something about vanilla Javascript eluded me. That said, trying to really drill down and learn something that I already had something of a mental block around at the beginning of a pandemic was needless to say…not easy. After taking some time to regroup and recalibrate I was able to jump back in and I have to say I am really impressed with how far I came all things considered.

This project is nowhere near as advanced as my last one. My the time I was working on my rails project I felt like an old pro. The featured were just flowing and I was able to add so much more because my fluency was really high in that space. Coming into JS world…I felt like a child learning  everything from scratch. As a result, this application is not nearly as feature rich as my Rails project was, but in the process of wringing out these basic project requirements I feel so much more confident than I did going in. I’m super excited for this last project because I have so many ideas that I want to try. 

The main challenge that I was facing working on this application is that Javascript is really not bossy at all. To the point where I found myself having a hard time knowing where to even start. I knew I had some basic requirements to meet, but making something that even makes sense and would be even remotely useful… I spent a long time blanking completely. How would this code be organized? What kinds of classes would I make. What exactly should be in those classes. 

I spent the bulk of my planning time and the first half of my coding time I feel like contemplating that. I am by nature someone who like to have a clear roadmap. I enjoy surprises and detours as they come, but I like to know where I’m heading and to have a clear idea of how I’m getting there. Javascript gives you a lot of choices there and very few answers. 

Anyway, after searching around and a bunch of head scratching, I found a way of organizing my code that really made sense to me. Thinking of my Javascript classes as almost like models in Rails and then being super specific about breaking features down into separate .js files with very specific purposes. I’m fairly pleased with how things are organized as of writing this, however I can always refactor and make things cleaner and more specific. As with all my projects, if I had unlimited time to tinker I could use all the time in the world. 

As it stands, I’m proud to have something that works and meet all the requirements. It’s not gorgeous, its not feature rich, but I learned so much and overcame a major personal mental block that I’ve had so that’s great for me!

[vocitates]

Rails Portfolio Project

This was a tough one! I really enjoyed the Rails section of this curriculum. I found it exciting and things really clicked well. That said, when it came time for the project I really wanted to stretch and make some thing I thought was truly awesome.

I kept with the theme I’ve been on for the past two projects, movies and reviews, however I really wanted to extend this idea as far as I could take it. I use an app called Letterboxd on a regular basis to track movies I watch, and I wanted to work towards making something like that. It’s basically a social networking platform centered around movies. I knew that this was going to be a reach as Letterboxd is VERY feature rich with likes and lists and groups and all sorts of things that the two week time frame I had to work with was not going to allow me to implement. That said, I chose some of the core functions that I thought would be achievable and were most important to creating an interesting experience.

FILMr allows users to create accounts, search for movies, add them to their ‘watchlist’, review them, add tags to those reviews, follow other users, and see what they’ve been watching as well.

I found the careful application of gems I’ve found through research to be pivotal here. For example the following feature is handled mostly though the ‘acts_as_follower’ gem, and of course the favorite ‘devise’ was used to handle user sessions and account creation. Using those gems allowed me to get deeper into the custom parts of my app that make it special.

I found that the most rewarding part of this process was not getting the basic features up and running, but rather, once everything was mostly all set, and I found a bug. I never thought that I would find the process of fixing bugs so exciting. The build was great, but the details and little things were where I truly was feeling like a proper developer. I spent two days debugging my tagging system. I woke up one morning at 3 am to refactor some code for the creation of movie objects for the search feature.

I’ve always enjoyed writing CSS even long before enrolling with Flatiron, and I think that some of that attitude (fiddling with minutiae to get everything pixel perfect, and the colors just right, and that animation smooth as butter) is bleeding over into my attitude with everything. I don't just want the app to work, I want it to be a perfect as possible (a never-ending prospect I know)  

Anyway I learned so much during this process and had so much fun. It was hard! There’s still plenty that’s not quite right and I’m sure I could spend another month tweaking and debugging and adding features. As I write this I have about 6 ideas for things I could add or change. What’s exciting about that is while I may not actually make those changes or add those features, I know that with time, I could!

[vocitates]

Character page: Djakarta

This is a character bible kind of page. Displays page title and blurb and list of characters on initial load. Character details are visible on click. Features:

A post-it-style summary

Quote/catchphrase

Basic info

Modular/extended character info

Press ESC button to hide currently viewed character

Space for character tags or traits (or both)

Space for character biography or otherwise wall of text with formatted heading tags and blockquotes

Space for related characters (image + name + optional label)

Space for character moodboard and color scheme (5 colors)

Responsive! (for the most part)

Preview + Install: Preview 01 | Preview 02 (full screen) | Install

The preview images are kinda lazy, but I swear it looks a lot better live. I spent a lot of time on this and hopefully I didn’t miss anything, but if there are any problems let me know! Some notes:

Knowledge in HTML and CSS are necessary for easier editing

All sections are optional and you can switch the elements around as you please

All notes necessary for editing are included in the code, please read through them

[vocitates]

theme five: honeysuckle — a theme aimed at text-heavy and writing blogs, but works with any kind of posts. focuses on readable text and larger post sizes.

preview / code: pastebin, github

features:

optional 60px x 60px icon

post sizes: 450px, 500px, 540px, 600px, 650px

search bar

show/hide/hover tags, show/hide note count on index page

up to 5 custom links, all colours customizable

responsive

note: tumblr’s customize page is buggy as hell. if something doesn’t look right, try switching all the options on and off, and then save and exit. it should look fine on your actual blog.

credits:

modified pxu photoset script by bychloethemes

style my tooltips by malihu

remove redirects by magnusthemes

outicons by anton saputro

responsive videos by nouvae

gifv to gif by felicitysmoak

full list of credits here

[vocitates]

Sinatra Portfolio Project

So...this one was tough.

I really struggled with the labs leading up to this and as a result I was late getting started. I didn’t even want to jump into it until I felt I had a clue what I was doing which wasn’t until Wednesday of the first week we had allotted to work on this. 

That said, I really learned a lot about how to approach projects like this. By the time I got started, I realized I was really much more prepared than I thought I was. Nothing to it but to do it! By the end of the first week I already had the bulk of a working app down. I really just needed to trust myself and the process and really dig into the resources I already have available to me. 

In the end, I’m really very proud of what I created here. There were several really interesting challenges that I was able to overcome. What was interesting was that the things I really struggled with ultimately weren’t the basic requirements of the project, but rather, the extra stuff; the stuff I wanted to add because I wanted to really refine and enhance the final project. I was excited to flex my CSS muscles, and despite the fact that my stylesheet is a bit convoluted and definitely needs refactoring, what is displayed in the end looks, frankly, really freaking cool!

This is mmovies.

The concept here is pretty simple. A user creates and account, searches for movies, and adds their personal review. The inspiration was letterboxd which is an app that allows users to do just that, and..admittedly quite a lot else. In fact, towards the end I was playing with the idea of trying to do a feature by feature clone of that app, but ultimately time  and mental energy didn’t allow for that. It’s still something I may give a shot later on. Maybe even for a future project since it seems like the theme I’m going with is movie-related apps. 

I chose in this case to have 2 models: Users and Movies with Users having many Movies and Movies belonging to Users. Users just have username and password attributes which go through validation at creation. Movies have several attributes like a title and a director as well as a foreign key to associate them with a user. 

After setting up the database and corresponding models using ActiveRecord, the fun part started. To get going I just pretended I was a user and went through the steps creating what I’d expect to see as I went.  That meant beginning at the homepage, moving on to the signup, then login, homepage after that, and so on. 

The division of which controller specific routes needed to go into felt very natural following that process. I have 3 controllers in this app: an application controller that handles all the signup and login routes as well as some userful helper methods, a users controller which mainly functions to get the homepage to display correctly, and a movies controller which contains the bulk of the CRUD logic. 

The thing I think I’m most proud of related to this project is managing to use an API (OMDbAPI specifically) to get all the data related to my movies. This was something I’d never touched before and I’m really proud of how much I learned by...well..googling a bunch and thinking really hard. I was able to create a custom search form that returns results from this API and was able to make those results display into a beautifully formatted and functional grid of images.

Each movie poster is a modified radio button that the user can select and then submit a POST request. This creates a movie object that the user can then add their review to. Once the user has typed their review they then send another POST request which sets the review attribute of the movie and associates the movie with the user.

The review was another tricky spot. Persisting long multiparagraph textarea entries can be tricky. When it’s saved, the string will lose the newlines and just display one long block of text. I used .gsub in an admittedly hack-y way to make the formatting of the originally entered text stay. I realize that a textarea is absolutely not idea for capturing long form text in this way, but I made it work and I’m really proud of having figured it out. 

Beyond that, the user can access the RUD parts of CRUD from the display page. Just a couple simple buttons to allow users to edit or delete their review.

There is definitely a lot more I want to add here as I mentioned before. Users should have a favorite movies collection, a wishlist of movies they’d like to see (and the ability to add reviews of those movies once they’ve seen them), and movies should have a rating in addition to the review. I’d also like to associate users in a social networking type way where users can see what movies their friends have watched recently and view their reviews. I have a bunch of ideas of where this could go, but for now I’m really happy with where I’m leaving this for the moment. 

Considering I went into this thinking I wouldn’t even be able to finish at all, I’m stoked at the outcome and all I learned along the way!

[vocitates]

CLI Data Gem Portfolio Project

I went into this project with very little idea of how I would start. I really had to use the resources around me to even begin, but first I had to come up with an idea of what I even wanted to make. Almost on a whim, after a conversation about comic book movies with my nephew, I decided to make something related to returning results related to MCU movies.

After a bit more thought, it seemed like a simple enough task: display a list of all MCU films in order, and then allow the user to get more information about each one. I had a basic idea of what sort of data I wanted to return, title of course, release date, director, and maybe a brief summary. The next step was figuring out where I would scrape this data from.

Initially, I thought that the best source for this was either going to be wikipedia or the official Marvel website. Upon an initial look at the pages themselves and inspecting the code some, I decided to use the official Marvel website.

Here I saw the movie names, and the release date very clearly displayed. Somehow, I didn't think about the fact that any information beyond that lived on pages on click through links and that all of that information was displayed very differently depending on the current level of promotional attention each film was receiving, and whether or not the film had been released yet. This was getting tricky.

Initially I decided to step away for a day and really think about how to approach this. My first instinct was to just scrap it totally and come up with a new idea. At this point I’d written enough code to iterate over the “card” elements on the page, get the movie titles and display them back in a pretty ugly list. It worked but doing much more beyond that was starting to become really frightening task. I could potentially scrape data from each of the individual movie pages. How to do that programmatically? The sources were so inconsistent I didn't see a way to cleanly make that happen and keep the program itself from becoming unnecessarily unwieldily.  The number of conditional statements I’d need was making my head spin. Was this efficiently possible at all?

Ultimately the answer I came up with was no, nothing is impossible but I’d clearly chosen a pretty awful approach to scraping data to make a program from. If only there was some sort of database of movies on the internet, an Internet Movie Database…

That’s when it clicked. I found a very tidy list on IMDb that had everything I was looking for in an organized clear format. What was great was that I was able to use much of the code I’d previously written to grab movie titles and refactor using the new class names. Now all that was left was figuring out the rest of my data.

I remembered the student scraper lab we’d completed previously, and how the data was organized into an array of hashes and how we’d used that to create objects and assign their properties. This was perfect, I’d scrape all the data from the IMDb list, organize it into a bunch of hashes with descriptive keys and the values set to the information I’d scraped, and use that to create a bunch of movie objects with all the properties assigned. At that point all I had to do was display those properties back to my user in a CLI and voila!

The basic structure and flow is like this: I created a scraper class to handle getting data from the website. That class just has one class method in which I iterate over each item in the list (cards) and pull information from them. I kept them in order by using #each_with_index and assigning them to their respective indices in a newly created “movie_array”. Each index of this new array was to be a hash with descriptive symbols as keys (:title, :director, etc) and the respective values being string text data I pulled using Nokogiri methods.

After that created a movie class that would initialize using data from the array of hashes I’ve made to create several new movie objects with all their properties/methods assigned by iterating over the array created in the scraper class and using #send on each iteration. I assigned the job of actually creating the movie objects to a class method .movie_from_hash

Last was the fun part, making the CLI. I technically started here with hard coded data just to make sure I would have a working program at the end of everything. I have an instance method #make_movies that is really just calling the .movie_from_hash method from my movie class. At that point I have an array of movie objects with properties neatly assigned that I can display back to a user however I wanted to.

The greeting just asks the use to either choose to display a list of all the movie titles, or to exit (why would they?). From here the user may type in a number to have more information about the corresponding movie displayed to them. They may continue to do this for any movie they choose, ask to display the list again, or exit the program at any point as well.

There is some validation happening there as well. If the input is a number thats not on the list, or one of the strings the user is prompted with, the program asks the use to make a valid selection rather than just breaking.

If I had more time (and I may go ahead and do this anyway), I’d broaden my scope to not be so narrowly focused on MCU movies, also include X-Men and DCEU movies too. That would simply require searching out a similarly formatted list of movies on IMDb, adding another couple methods to my scraper class, a slight modification to my movie_from_hash class method, and the addition of a few more options of my first level prompt to the user. The bulk of the code is abstract enough that everything else would be pretty much the same as it currently is (well of course I’d have to change the name too.)

I decided to have some fun here and make the terminal output colorful. I’d seen this done in the student scraper lab as well and thought it was cool. I did a bit of googling to figure out how to use that gem here and I think it looks nice. There’s quite a bit of information being shown back to the user and formatting is important to legibility.

Overall I think this bit from the instruction page for this project was the most important reminder for me:

While this is clearly more specifically related to the review, I found it to be useful to reflect on when I was stuck on something during the project, particularly when I had to totally change gears after finding out my initial source for scraping was not feasible.

I learned a lot during this! I’m excited for the next one!

[vocitates]

i just found your blog and that preview for telegram looks amazing! any idea when we can expect for it to be released? xx

oh wow im glad you like!!! its actually the next one i planned on finishing up! I’ve been incredibly busy (actually doing a coding bootcamp to learn to be a proper developer) so I haven’t had very much free time to finish that one up. I hope maybe I’ll have some time around the holidays?  I know thats still a long way out but thats probably when I’ll be able to step back in.

[vocitates]

No. 289

A new geometric design every day

[vocitates]

Cafe

preview + code

This theme was made for the #nojschallenge, but with a twist. In addition to no scripts, this theme was also made using no style tags. This means that all the CSS in this theme was written using only inline styling.

Features:

Option for one or two columns

Background image

Day pages

4 custom links

11 custom colors

Optional full or repeating background

Sticky header

Slightly responsive (as close as I could get for this particular challenge)

I added some instructions in the code, but HTML and CSS knowledge is highly recommended if you want to add to the theme.

Please keep in mind that inline styling is very limited in comparison to style tags and style sheets, so certain features, like hover effects, won’t be available in this theme without some customization.

Icon in the preview was made by @acuite

Please like/reblog if you are interested in this theme!

[vocitates]

theme 02 // post

features

slide down header either full height or half

three custom links

pop up ask box with built in f.a.q. section

subtle scroll animations

permalink page features custom buttom to view post on dash(may not work on sideblogs)

resources/inspiration

jqueryModal

pxu photosets

unnest captions by @magnusthemes & @neothm

google fonts

fontawesome icons

feel free to customize to your hearts content, and please let me know if you come across any problems!

static preview | download

[vocitates]

theme 08 — waterfall a theme for the #nojschallenge

live preview, static preview, code (alt.)

features

header

nav bar + search bar

“pop up” post info

custom post width: 250px, 400px, 500px

credits

icon font: @themehive

photosets.css: @annasthms​, @espoirthemes​

lightbox: @magnusthemes​

more info

terms of use | likes + reblogs are appreciated! | let me know if there are any problems

[vocitates]

theme 01: andromeda | by @venusthms

features:

gradient or solid accents

350-540px posts

round or normal edges

title + subtitle

scroll effect

show/hide/hover tags

optional sidebar picture (40px)

optional updates & quick tags section 

optional dashboard style captions

optional scroll to top button

note: the quick tags are the only thing that need to be edited directly in the code note: on smaller screens the upates + quick tags section will only appear on click

credits: base code by @sorrism ; css photosets by @annasthms & @espoirthemes ; tumblr controls fix by @cyantists ; icon font by @themehive ; infinity scroll by paul irish

preview // download

[vocitates]

theme four: morning breeze by pirateskinned ↳ static preview — pastebin

contained theme with 400px posts

sidebar (200 x 270) image

four custom links

toggle option for background to be pattern or cover size

toggle option for image wrap within text posts

lots of colour options including a gradient

don’t use as base code, remove credit, take parts of the code or repost / claim as your own. do edit and make it your own. feel free to ask me if you need any help. please like / reblog if you plan on using.

[vocitates]

Theme - Egoist; [preview] [code] [magnusthemes]

A simple and minimal theme with a slide-out menu, partially inspired by the American TV series Suits. Made for the #NoJSChallenge!

Features:

Like/reblog buttons and optional hide captions/tags on index page

Custom post size from 400px to 540px

Custom photoset gutter, photo/photoset lightboxes, tooltips and the slide-out menu were made without Javascript!

The theme also comes with a search bar

Notes:

The screenshot looks pathetic, so please check out the preview!

This theme has no background image option. Do not ask me to add it.

To insert links in the menu, simply create a page and check “show a link to this page”.

While technically you can have unlimited number of custom links, please exercise discretion and keep your menu short

Credit for the photoset CSS goes to the amazing @annasthms and @espoirthemes

Please like and/or reblog this post if you use or plan or using this theme, or just if you like it (: Thank you for your support!

[vocitates]

No. 258

A new geometric design every day