This document provides an agenda for an immersive workshop on styling and catching up. The agenda includes introductions, lectures on styling and image uploading, and hands-on labs for styling and image uploading. Frameworks discussed include Bootstrap, Foundation, and Semantic UI. Image uploading gems like Paperclip, Carrierwave, and Refile are also covered. The document concludes with references for further reading.
4. Matthew Gerrior
Devpost, Senior Software Engineer
ABOUT ME
● Grew up outside Boston
● Went to school upstate
● Worked in consulting for ~ 3.5 years
● Got tired of building other people’s products
● Moved to NYC to join Devpost (known as
ChallengePost a the time)
devpost.com/MGerrior
5. Devpost
Leading platform for running Hackathons
ABOUT US
● Formerly known as ChallengePost
● Online Hackathons (Uber, Oculus, AT&T)
● In-Person Hackathons (PennApps, HackNY)
● Developer Portfolios to showcase skills,
technologies, projects
● Moving into recruiting space:
devpost.com/teams/devpost
devpost.com
6. ScriptEd
Coding Skills for under-resourced schools
ScriptEd equips students in under-resourced schools with the fundamental
coding skills and professional experiences that together create access to
careers in technology.
● GitHub accounts from Day 1
● Two hackathons every year
● Field trips to Tech Companies
● Summer internship opportunities
9. Designing for a large screen first and then adding
additional code for smaller screens:
● Slows performance on mobile devices
● Doesn’t take advantage of mobile functionality
Top-Down Approach
12. We simply start with the most minimal amount of
mobile-tech development and build progressively
upward until we have nurtured the simple mobile
seed to the highest-possible tech display.
Mobile First
Luke Wroblewski
13. Bottom-Up Approach
Develop for the lowest common denominator,
progressively add features for each higher level of
tech:
● Emphasize core values and behaviors
● Optimize for ease of use
19. Optimizing a page to be utilized on the web by
multiple devices with different screen sizes, all in one
design.
It’s all about percentages and ratios!
Responsive Design
Ethan Marcotte
20. You want to build a page once and have it appear
correctly, that is with minimal amounts of scrolling,
minimizing, maximizing, enhancing, de-hancing.
Responsive Design
53. “Starting April 21 [2015], we will be expanding our
use of mobile-friendliness as a ranking signal …
Consequently, users will find it easier to get relevant,
high quality search results that are optimized for
their devices.”
SEO
55. ● Uses text that is readable without zooming
● Sizes content to the screen so users don't have
to scroll horizontally or zoom
● Places links far enough apart so that the correct
one can be easily tapped
SEO
Making a Mobile Friendly Site
59. Twitter Bootstrap
Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive, mobile first
projects on the web.
60. <!-- Stack the columns on mobile by making one full-width and the
other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>
Twitter Bootstrap
61. The most advanced responsive front-end framework
in the world.
Foundation
62. <!-- Stack the columns on mobile by making one full-width and the
other half-width -->
<div class="row">
<div class="small-12 medium-8 columns"></div>
<div class="small-6 medium-4 columns"></div>
</div>
Foundation
63. Semantic is a development framework that helps
create beautiful, responsive layouts using human-
friendly HTML.
Semantic UI
64. <!-- Stack the columns on mobile by making one full-width and the
other half-width -->
<div class="row">
<div class="sixteen wide mobile twelve wide tablet column"></div>
<div class="eight wide mobile four wide tablet column"></div>
</div>
Semantic UI
73. Cheat Sheet:
● Easy to set up, well documented
● Everything configured in the model class
● Been around forever and well maintained by
Thoughtbot
Paperclip
74. Classier solution for file uploads for Rails, Sinatra
and other Ruby web frameworks
Carrierwave
75. Cheat Sheet:
● More Object-Oriented/Modular approach to
image uploading
● Supports multiple file uploads (useful for image
galleries)
● Designed to solve the “file disappearing when
form is invalid” problem
● Creator eventually decided to build another file
uploader gem
Carrierwave
76. Both take the tried and true approach of processing
images into different sizes on upload and storing
them.
Paperclip & Carrierwave
79. Cheat Sheet:
● Developed by creator of CarrierWave
● Direct to S3 image uploading
● Don’t have to think about how/where files are
being stored
● Strongly opinionated
Refile
80. Changes up image uploading with direct to S3
capability as well as storing a single image and
processing it on the fly when requested.
Refile
