Note: I’m working with Rails 3.2.14. It should work pretty much the same way for Rails 4+ applications.
My talented sister has just launched Pink Jellyfish Designs; a showcase of her cute and beautiful artwork and cute crafts.
Please note that she (Grace Nonemaker) retains copyright of this image and all other images/designs on her site.
copyright Grace Nonemaker
I especially love the cupcake themed painting and plushie.
She pretty much does the same non-digital artwork stuff that I’ve done, but better. Worth checking out!
Just finished the first draft of my very own little front-end framework, which I am calling Happy Cupcake.
It was inspired by the latest version of Twitter Bootstrap, which is a great framework but very over-used these days. I’m planning on expanding my framework to include features for easily setting up image galleries, and taking some ideas from other front end frameworks (such as Foundation and Gumby).
- CSS Reset
- Form Styles
- Responsive Grid
- Responsive Navbar
- Modal Widget
Making a grid with pure CSS positioning is just too easy – nobody should ever have to resort to using a table to create a basic grid layout.
I just finished a demo with two approaches, which were painted using some #BADA55 CSS colors:
In the jsfiddle version I had to add
font-size: 0px; to the parent div to completely fix the spacing issues caused by
inline-block. Oddly enough, in my initial version (an html page that can be opened locally in the browser), this wasn’t necessary. The full version with separate files for html and css is posted on github, along with some of my other css and html demos.
Layout Without Hacks?
While both of the approaches shown above avoid using tables for layout, both also involve using a hack. With
inline-block, you have to eliminate whitespace from the HTML and use
font-size: 0px; on the parent element. With
float, the clear-fix hack is required to keep the parent element from collapsing.
Once browsers start supporting the flexbox model, it will be GREAT to finally have layout without hacks.
I’m pleased to have finished App Academy, and honored to be staying on as a Teaching Assistant for the next cohort of Student Software Engineers. The transition from student to teacher happened suddenly, so I have been quite busy even though my cohort “graduated” a week or so ago. While things have been quiet on this blog, I posted a storm of entries during App Academy that can be read on “App Academy Hacker”.
While I don’t see myself teaching in the long-term, it is a fantastic opportunity to continue learning and work with intelligent, highly skilled people. My first priority is to be around people who hold themselves to the highest standards, and that is essential for anyone attempting or teaching at App Academy.
I hope to start blogging here again. My first tidbit to share after so long;
I just wrote up a template for generating a Rails App with RSpec and FactoryGirl set up. I may tweak this to get the last piece to happen automatically, instead of outputting a reminder to the user, but aside from that it works like magic!
The template section of the Generators Rails Guide made setting this up as easy as pie. Glad a student pointed this feature out to me!
I can hardly contain my excitement about attending App Academy.
Ok- I guess I can’t contain it:
In preparation I have started a Tumblr Blog titled “Hacking at App Academy”, which I will use for all App Academy related posts, including my continued preparation and studying.
I have about 7 solid days left to hack, and then I’ll be either packing boxes, saying ‘Goodbyes’, or on the road. I will make the most of the time that is left.
Consider the blog at Flarnie.com on hold for the moment: I’m going on an adventure!
I recently updated this blog/portfolio with a new WordPress theme that is responsive and mobile-friendly. Hooray!
Details below the cut~
Hitting ‘submit’ triggers the deferred operation, which changes the cupcake color and adds sprinkles based on the form input. Notice that you can only perform the operation once.
You can find more examples of jQuery Deferred in the jQuery documentation.
A quick demo of how easy it is to create a “fluid layout” with responsive image gallery, inspired by Ethan Marcotte’s article “Responsive Design” in A List Apart. Resize the window! The little aliens will rearrange themselves to fit any size space.
How To Make a Responsive Image Gallery
- Images should either be the same size, or be contained in divs of the same size, to naturally form a grid.
- Wrap gallery in a div and float all inner images/elements to the left.
- Clear the gallery with a clearfix or other method.
Large scale example beneath the cut. (The images, though small, will need to load!)