Mastering Bootstrap Grid Systems for Faster Web Development

1. Chapter 3.2 – RoR: easier, faster, better RoR: easier, faster, better Presented by: Maciej Mensfeld senior ruby developer@wordwatch.com senior ruby developer@furioustribe.com maciej@mensfeld.pl mensfeld.pl github.com/mensfeld Maciej Mensfeld

2. Chapter 3.2 – RoR: easier, faster, better RoR: easier, faster, better Please… • …ask me to slow down, if I speak to quickly; • …ask me again, if I forget; • …ask questions, if anything i say is not clear; • …feel free to share your own observations Maciej Mensfeld

3. Chapter 3.2 – RoR: easier, faster, better RoR: Bootstrap Make it good looking and make it fast! Maciej Mensfeld

4. Chapter 3.2 – RoR: easier, faster, better RoR: Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. github.com/twitter/bootstrap twitter.github.io/bootstrap builtwithbootstrap.com wrapbootstrap.com GRID:FLUIDGRID:FIXEDLAYOUT/FLUIDLAYOUTRESPONSIVEDESIGN:TYPOGRAPHY:CODEVIEWTABLES:FORMS:BUTTONS:ICONS:BUTTONGROUPS:TABS:PILLS:NAVLISTS:NAVBARBREADCRUMBS:PAGINATION:PAGER:INLINELABELSBADGES:PAGEHEADERUNIT:HEROUNITTHUMBNAILS:ALERTS:PROGRESSBARS:WELLSCLOSEICON:MODALS:DROPDOWNS:SCROLLSPYTOGGLABLETABS:TOOLTIPS:POPOVERS:COLLAPSECAROUSEL:TYPEAHEAD Maciej Mensfeld

5. Chapter 3.2 – RoR: easier, faster, better Bootstrap installation Gemfile: gem "less-rails" gem "twitter-bootstrap-rails" bundleinstall railsgeneratebootstrap:install less rails g bootstrap:layout application fluid Maciej Mensfeld

6. Chapter 3.2 – RoR: easier, faster, better Bootstrap basics: grids The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. Maciej Mensfeld

7. Chapter 3.2 – RoR: easier, faster, better Bootstrap basics: grids For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices. Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids. Maciej Mensfeld

8. Chapter 3.2 – RoR: easier, faster, better Bootstrap basics: grids Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns. Maciej Mensfeld

9. Chapter 3.2 – RoR: easier, faster, better Responsive bootstrap For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). Maciej Mensfeld

10. Chapter 3.2 – RoR: easier, faster, better Responsive bootstrap http://twitter.github.io/bootstrap/base-css.html Maciej Mensfeld

11. Chapter 3.2 – RoR: easier, faster, better Controllers Maciej Mensfeld

12. Chapter 3.2 – RoR: easier, faster, better Controllers Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used. The opposite of lazy loading is eager loading. Maciej Mensfeld

13. Chapter 3.2 – RoR: easier, faster, better Controllers Maciej Mensfeld

14. Chapter 3.2 – RoR: easier, faster, better Views & forms Maciej Mensfeld

15. Chapter 3.2 – RoR: easier, faster, better Views & forms Basic HTML & CSS knowledgerequired Maciej Mensfeld

16. Chapter 3.2 – RoR: easier, faster, better Views & forms http://guides.rubyonrails.org/form_helpers.html Forms in web applications are an essential interface for user input. However, form markup can quickly become tedious to write and maintain because of form control naming and their numerous attributes. Rails deals away with these complexities by providing view helpers for generating form markup. However, since they have different use-cases, developers are required to know all the differences between similar helper methods before putting them to use. Maciej Mensfeld

17. Chapter 3.2 – RoR: easier, faster, better Generators Maciej Mensfeld

18. Chapter 3.2 – RoR: easier, faster, better Generators Rails generators are an essential tool if you plan to improve your workflow. http://guides.rubyonrails.org/generators.html rails g Maciej Mensfeld

19. Chapter 3.2 – RoR: easier, faster, better Generators Maciej Mensfeld

20. Chapter 3.2 – RoR: easier, faster, better Sessions http://guides.rubyonrails.org/security.html HTTP is a stateless protocol. Sessions make it stateful. Most applications need to keep track of certain state of a particular user. This could be the contents of a shopping basket or the user id of the currently logged in user. Without the idea of sessions, the user would have to identify, and probably authenticate, on every request. Rails will create a new session automatically if a new user accesses the application. It will load an existing session if the user has already used the application. Maciej Mensfeld

21. Chapter 3.2 – RoR: easier, faster, better Sessions Do not store large objects in a session. Instead you should store them in the database and save their id in the session. This will eliminate synchronization headaches and it won’t fill up your session storage space (depending on what session storage you chose, see below). This will also be a good idea, if you modify the structure of an object and old versions of it are still in some user’s cookies. With server-side session storages you can clear out the sessions, but with client-side storages, this is hard to mitigate. Critical data should not be stored in session. If the user clears his cookies or closes the browser, they will be lost. And with a client-side session storage, the user can read the data. Rails provides several storage mechanisms for the session hashes. The most important are ActiveRecord::SessionStore and ActionDispatch::Session::CookieStore. Maciej Mensfeld

22. Chapter 3.2 – RoR: easier, faster, better Sessions rake db:sessions:create rake db:migrate vimconfig/initializers/session_store.rb: Rails.application.config.session_store :active_record_store Maciej Mensfeld

23. Chapter 3.2 – RoR: easier, faster, better Testing, testing, testing http://guides.rubyonrails.org/testing.html Testing support was woven into the Rails fabric from the beginning. It wasn’t an “oh! let’s bolt on support for running tests because they’re new and cool” epiphany. Just about every Rails application interacts heavily with a database – and, as a result, your tests will need a database to interact with as well. To write efficient tests, you’ll need to understand how to set up this database and populate it with sample data. Every Rails application you build has 3 sides: a side for production, a side for development, and a side for testing. Maciej Mensfeld

24. Chapter 3.2 – RoR: easier, faster, better Testing - Fixtures For good tests, you’ll need to give some thought to setting up test data. In Rails, you can handle this by defining and customizing fixtures. Every Rails application you build has 3 sides: a side for production, a side for development, and a side for testing. Maciej Mensfeld

25. Chapter 3.2 – RoR: easier, faster, better Testing - Fixtures Fixtures is a fancy word for sample data. Fixtures allow you to populate your testing database with predefined data before your tests run. Fixtures are database independent and assume a single format: YAML. You’ll find fixtures under your test/fixtures directory. When you run rails generate model to create a new model, fixture stubs will be automatically created and placed in this directory. YAML-formatted fixtures are a very human-friendly way to describe your sample data. These types of fixtures have the .yml file extension (as in users.yml). Maciej Mensfeld

26. Chapter 3.2 – RoR: easier, faster, better Testing - Fixtures • Rails by default automatically loads all fixtures from the test/fixtures folder for your unit and functional test. Loading involves three steps: • Remove any existing data from the table corresponding to the fixture • Load the fixture data into the table • Dump the fixture data into a variable in case you want to access it directly Maciej Mensfeld

27. Chapter 3.2 – RoR: easier, faster, better Testing - Units In Rails, unit tests are what you write to test your models and libs. Many Rails developers practice Test-Driven Development (TDD). This is an excellent way to build up a test suite that exercises every part of your application. Maciej Mensfeld

28. Chapter 3.2 – RoR: easier, faster, better Testing - Units Maciej Mensfeld

29. Chapter 3.2 – RoR: easier, faster, better Live long and prosper! Presented by: Maciej Mensfeld maciej@mensfeld.pl dev.mensfeld.pl github.com/mensfeld Maciej Mensfeld