We're hiring: Rails Web Developer
Requirements:
- Full time, on-location only;
- At least two years Rails development experience;
- Javascript/CSS experience;
- TDD with cucumber/RSpec experience.
Great if you've got:
- Agile/SCRUM, but we'll train you if you haven't had the pleasure;
- CMS experience in MT, EE, WP, or similar;
- Working understanding of server environments;
- Unix chops: We're a Mac shop, Microsoft skills noted but not required.
Benefits:
- Humane working schedule with personal project time
- SIRA/401k matching retirement program
- Healthcare
- Competitive salary
- Holidays and paid vacation time
- Monthly Design Friday afternoons to learn something new or share your personal project
- Conference opportunities like WWDC, RailsConf, Event Apart, and more
- Training and development
- Contribute to meaningful open source projects
- Pre-tax public transportation cards
- Brick and timber loft open office space with bike-to-work amenities
APDA National Young Onset Center
The American Parkinson Disease Association National Young Onset Center offers educational resources and support programs to address needs and issues affecting young people with Parkinson's disease. The redesigned website offers comprehensive set of tools to assist and empower this community. Articles and references help answer questions about topics ranging from understanding symptoms and treatment to legal and insurance options. The site also includes a blog and resource guide - a directory of organizations dedicated to providing low or no-cost services. Users can also gain deeper insight by reading stories by those experiencing Parkinson's Disease, and can participate by submitting their own story. A custom content management system built with Refinery enables this grass roots organization fluidly manage their website.
Smart Museum of Art
The David and Alfred Smart Museum of Art is the art museum of the University of Chicago. With an academic and interdisciplinary pursuit of experiencing and interpreting art, the museum presents contemporary and ancient works of art and is home to a distinguished permanent collection. We refreshed the brand for the redesigned website and HTML email newsletters. Home page and internal sidebar promo areas are integrated throughout the site, along with the university events calendar and suite of social media tools: rss feeds, email, facebook and twitter sharing. Exhibitions and permanent collections are outfitted with larger real estate given to media including image galleries and video content, with links to a searchable publications section. We implemented Movable Type for their custom content management system so that museum staff can easily update the website and compose their newsletters.
City of Evanston
In collaboration with the City web team and an epic volunteer code-a-thon, we helped to refresh the City of Evanston website with an engaging and intuitive look and feel. The site serves as a one-stop shop of city related events and information for residents, businesses, and visitors. It offers an enhanced events calendar with maps and calendar event downloads, alert announcements, news, a blog, and lots of social media tools, making it easy to learn about the city and interact with the site. Behind it all, a custom content management system makes ongoing content management easier than ever.
Fresh and bold new look for Players Sports Group
Players Sports Group has organized sports leagues, tournaments, and social events for adults since 1993. Linked to the best athletic facilities and venues in the city, the organization continues to grow as one of the largest year-round sports and social clubs in Chicago. We redesigned the website to meet their growing needs. The new site has larger calls-to-action and more imagery, news alert sections, and social networking features. Users can access sports rules, message boards, review schedules and standings, view facility maps, and register for leagues under each sport while the staff can keep content fresh using a custom built content management system. Sign up for some action!
Announcing: SpoonFeed from RIA
We're proud to welcome SpoonFeed, Restaurant Intelligence Agency's one-stop digital dashboard that connects busy restauranteurs to their team, their peers, and the media with really easy-to-use features. We built this application from the ground up for RIA's clients to receive industry news and marketing tips, update press kits, guided social media coaching from RIA staff, join internal discussions, and manage their Twitter accounts through a streamlined, single interface. As SpoonFeed continues to grow, more valuable features will be added for users to stay one step ahead of the new PR world.
The Propeller Fund regrant program launches
It's often hard to quantify the ingenuity and productivity of Chicago's visual art community, let alone recognize the innovation, collectivity, and resourcefulness that characterize it. The Propeller Fund is a regranting program that aims to spark ambitions and promote the public's interaction with this type of work, building on the varied and informal models for creative activities often bypassed by traditional funding sources. We debuted the Propeller Fund's website to document and promote projects supported by the grant. Neoteric Design provided a new brand, social networking features to help foster the dialogue and get the word out, and a customized content management system to give the support staff control over site updates.
Redesigned website offers a library of sex and relationship advice from experts
The World Health Organization estimates that more than 100 million acts of sex occur every day. The team of experts at Good in Bed are here to help you learn about and live your sex life to the fullest. We redesigned their website with engaging features, blogs, and tools to highlight the library of the latest resources offered by sex and relationship specialists. A tailored content management system enables the team to easily maintain the site. At GoodInBed.com, users can preview and download eBooks and mini-guides that are private, printable, and portable. Users can also pose questions, participate in discussions with experts or reference the glossary of sexuality-related terms.
Build a slick portfolio w/ jQuery & the Cycle slider plugin
I'm going to demonstrate how Neoteric Design builds a sliding portfolio, a design element which can be used to show off your best project work, a series of promotions for various sections of your site, or anything else you can imagine that makes sense in rotation. Here it is:
Arts & Business Council of Chicago
Helping Arts & Businesses Connect
The Arts & Business Council of Chicago has been serving Chicago for 25 years to strengthen the arts community through its partnerships, programs, resources, and services. We're pleased to announce the launch of a bold, redesigned website that conveys the energy and spirit of the organization. A bright, new look with strong imagery and type styles helps extend the existing brand. Resources for business volunteers and non-profits are easy to find and registrations for workshops and events are simple to use and update. A news blog keeps visitors up-to-date about trends and issues affecting the community.
Lincoln Park Chamber of Commerce
The Cornerstone of Your Success
The LPCC serves as a catalyst for business success and economic development in Lincoln Park. The redesigned website features an easy-to-use content management system, extensive news, blogs, and media feeds, and integration with the Chamber's membership management system, ChamberMaster.
Appolicious
Find mobile apps you'll love
Appolicious now has curated apps! As the mobile app landscape shifts and evolves, Appolicious stays on top with more app discovery features. Users can now create their own collection of applications, souping up the browsing experience. Go on, wrangle up your own set!
You can skip straight to the source code if you'd like.
Several times, I’ve been asked how to use the Coda slider jQuery plugin to build a web portfolio and every time I strongly recommended the jQuery Cycle plugin instead.
Why Cycle and not Coda?
Coda’s markup requirements are too bulky and the pay-off is a single slide left/right transition. Cycle offers about 2 dozen transitions and a lite version that is comparable in size to Coda (though only with the ‘fade’ transition).
Both allow use of the jQuery Easing Plugin, which I recommend to fine-tune the sliding transition. When comparing the Coda settings options versus the Cycle settings options, we find a lot more options available from Cycle that are also a little easier to understand just from reading the name.
OK, these are just a couple of reasons for me, and I’d like to move on to demonstrating the portfolio.
Let’s Get Started
Ingredients:
Construct the HTML
Following the example in this gist, create the HTML for the portfolio content. Each top-level DIV inside “#cycle_area” is considered one portfolio piece. In fact, Cycle attempts to load any top-level element into rotation, so be sure this part is consistent. Cycle best handles a list of IMGs or DIVs. For this example, I’m choosing DIVs to demonstrate its ability to rotate full chunks of HTML.
Wire up the JavaScript
Now that your HTML is complete, it’s time to write the javascript! I’m just going to go over it line-by-line:
- $(‘#cycle_area’).cycle({
- Initialise the plugin on the desired DIV (#cycle_area in this case)
- fx: ‘scrollHorz’,
- We’re going to use the scroll-horizontal effect. (effects browser)
- speed: 500,
- The speed of the transition, half a second (500 miliseconds)
- timeout: 5500,
- The time between transitions (5.5 seconds)
- pager: ‘#pager’,
- The pager ID in the HTML — used to build a clickable, numbered list of the slides
- pagerAnchorBuilder: buildThumbnails,
- A custom function we’re going to write to use thumbnails instead of numbers in the pager
- easing: ‘easeInOutCubic’,
- The easing method I love most!
- pause: true
- The slides will pause automatic transitions while the mouse is over one of them.
- });
- Close the options hash and end the method call!
- The full list of Cycle options
A Custom Method to Build Thumbnails in the Pager
- function buildThumbnails(i, elem){
- Define the function, passing it the index and the DOM element
- The DOM element refers to each DIV being cycled. You can traverse this element using normal jquery
- Define the function, passing it the index and the DOM element
- src = $(elem).find(‘img’).attr(‘src’);
- For example, here we are finding the image tag’s source and setting it in a variable
- title = $(elem).find(‘h2’).text();
- Grab the text inside the H2 and set it to ‘title’
- html = ‘’ + title + ‘“><img src="’ + src + ‘" width=“50” height=“50” alt="’+ title +’" />’;
- Create a link with the image resized to thumbnail size
- return html
- This function will run every time a cycled element is found, and will return its results. Therefore, we end up with a thumbnail for each element that links to its slide.
- }
- End your function!
At this point, you should check your page. It should be rolling along smoothly!
See it in Action:
If all went well, you should expect a portfolio that works much like our demo. If you need help, just leave comments.
Code Examples:
Construct the HTML:
Include the JavaScript:
Write the JavaScript:
Full Tutorial & Demo:
Arts & Business Council of Chicago
The Arts & Business Council of Chicago has been serving Chicago for 25 years to strengthen the arts community through its partnerships, programs, resources, and services. We're pleased to announce the launch of a bold, redesigned website that conveys the energy and spirit of the organization. A bright, new look with strong imagery and type styles helps extend the existing brand. Resources for business volunteers and non-profits are easy to find and registrations for workshops and events are simple to use and update. A news blog keeps visitors up-to-date about trends and issues affecting the community.
Welcome aboard, Arts & Business Council Chicago!
