Girl Writes Code { . }

Student at Fullstack Academy W14

[jytsui]

Who made flappy jaclyn this week? Mee #ios #fullstackacademy #makegameswithus #ycombinator thank you #ashudesai for coming to teach!

[jytsui]

My first hackathon experience: Hack upon a cause by XO Group

Our Wedding Dropbox project was for the non-profit, Wish Upon a Wedding, which has 11 chapters representing them all over the nation. Wish Upon a Wedding (http://wishuponawedding.org/) is a 501(c)(3) organization granting renewal of vows and weddings to terminally ill patients and/or those facing life altering circumstances.

Problem:

Media files from volunteer photographers and videographers capturing moments for these couples are passing their own links and file names to headquarters making their database of files extremely messy and hard to search for.

Outcome:

Our team's web app built an app using the dropbox API, Facebook authentication, and node.js to provide Wish Upon a Wedding a port of entry where all logged in media professionals can upload their files and rename them automatically by filling in entries regarding their state, name of couple and date of upload. The results were all presented in a gallery page in which we built to give the user a better idea of all the files he/she has uploaded.

Key takeaways:

1. If you already have a team going in to a hackathon, prepare a week in advance, start brainstorming ideas and framework of the web app.

2. Get as much out of the briefing as possible. Ask as many questions as you can to get clarification.

3. Practice your pitch. PRACTICE PRACTICE and PRACTICE. From the winning team, I learned that there are moments where you have to build a hype up to the functionality of your app regardless of how simple it is. This creates the wow factor that leaves judges in awe of your product.

4. Use API's and existing databases out on the web. A hackathon is not meant to be a place where you invent the next popular programming language.

[jytsui]

Clean and mean, HTML5 is here to stay.

HTML5 is merely the fifth version of a markup language used to structure content on the web. The new semantic tags gives the reader a cleaner page of code assigning specific roles to elements, smarter storage, cross browser support and the future for responsive design. 

*above image taken from smashingmagazine.com

1.Specific roles in tags

HTML5 has made tags more readable by sectioning of the page into attributes written in plain english. As we used to segregate div tags with classes, we can now minimize the usage of the common div tag and refer directly to the element.

2. Smarter storage

A new local storage feature comes with HTML5 which means that moving forward, your browser will be able to store user information, cache data, load application state even after the it closes.

3. Better cross-browser support

There has long been problems writing code acceptable for all popular browsers (Chrome, Safari, Firefox, Opera and IE). With HTML5, an addition of a simple javascript tag will allow the use of all the new elements in HTML5 for IE browsers.

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

4. Mobile and responsive design

The future of web development is going to lie in the layout of web applications on mobile and what better to view and experience this with responsive design able to adapt to different screen sizes. HTML5 allows meta tags like viewport settings (which tells the browser how content should fit on the device's screen), full screen browsing (iOS specific values to display Apple devices in full screen mode) and home screen icons (favicons on desktop) to bring the best viewing experience to your browser.

--

Don't know where to start when it comes to layout of your tags? Take a look at the flow chart below and hopefully you'll be able to replace your current div tags and section your content in a cleaner manner!

[jytsui]

Flow of version control - Git

For all those who are beginning to dive into the world of programming, welcome to the world of git. You'll be using these tools to share code, contribute code and take code to use as a starting point for your next project! Click on the flow chart below.

Often times it gets tricky understanding distribution in the world of version control. Take a look at the key I've prepared for you below: General flow: Create a new git repository: $ mkdir gitsamplefile $ cd gitsamplefile $ git init - this will initialize a new .git file in your folder  Copying an existing git repository, normally from a remote location to your environment. This usually happens when there's already an existing project you want to contribute to online:  $ git clone <HTTP address on github.com> Working directory: holds actual files you've created and are working from your computer. Working directory $ git add <filename> Index (Staging area) $ git commit -m "Commit Message" Local repository (Head node) Your file changes are now in the HEAD of your local repository, ready to be pushed to a remote server, public or private, where you can share with the world what you've been working on. $ git push origin master   - if you have not already cloned an existing repository $ git remote add origin <server>  - to connect local repository to remote server Fetch: calling on the fetch command is like an "update" or "get the latest version" from the remote repository that everyone's been contributing to and merging it with your local changes. ------ Just remember, Git creates a .git local repository within your folder and most often you would link it to your remote server which will have an up-to-date repository available to all your contributors. (one source of remote server: Github)