Key Takeaways from Saint Petersburg’s Front-End Design Conference

A View from Dev: Below is a recap if the front-end web design conference held in St. Petersburg, FL on June 16-17. Our very own dev intern, Victor Cui recaps his experience.

On Friday, June 17th, I participated in a front-end web design conference in Saint Petersburg.  This three-day conference for web professionals who love their community, the web, and learning was held at the magnificent Palladium Theatre. It’s filled with tech talks by skilled developers and designers eager to share their experience, networking events where digital agency recruiters seek out ambitious, creative jobseekers, and of course, Kahwa coffee. After reflecting on all the amazing tech presentations, two stood out to me: Using React.js, and the increasing use of flexbox.


The Model-View-Controller (MVC) model is a paradigm in which many developers like to think of their web applications. Basically, the View is the “front-end”, what users see when they type in, the Model is the “back-end”, holding server-side application state and the database, and the Controller maps client requests to server responses and ensures the correct page is being rendered given some parameters and the current state of the application. React.js is an open-source (hallelujah!) javascript library used for providing efficient views for data rendered as HTML (the V in MVC). It was designed by a software engineer at Facebook in 2011, and is currently used on big-name sites like Instagram, Facebook, Netflix, and Airbnb.

Benefits of React.js

With large single-page applications containing data that changes over time, it’s tedious to track down the right changes you want in your HTML based on your data. After interning at Sparxoo for a month developing in PHP and WordPress, I understand how complicated a website can get, with tons of template files that display different HTML based on PHP variables. Using React, the only thing you need to develop are reusable React components, almost like classes in object-oriented programming. When the data inside these components change, React knows to only update the HTML affected by those changes and leave everything else alone. One of the best features of React is the “Virtual DOM”, which selectively renders HTML nodes based on state changes.

React.js in Action

React.js has an awesome fiddle on its documentation site.

React.JS Fiddle

To call React in your HTML, first you need to reference the React file within a <script> tag. This effectively loads React in your browser. Then in your javascript, you call the createClass method of the React class to create a variable (Hello). This variable is then going to react to data changes (Haha, get it?). The render method of the Hello React variable is crucial— it determines how it will be displayed in HTML. Later on, in the render method of ReactDOM, the name property belonging to the Hello variable is given an attribute of “World”, which acts on the element with an id of “container” in your HTML. If the attribute was instead something like “Joe”, the div would display “Hello Joe” in the HTML.

Things to Remember

Remember that React only handles the View layer (i.e. it can only render HTML, albeit using a template language). This distinguishes React from Angular.js or Ruby on Rails, for example, which are complete web frameworks (they handle the model, view, and controller). The javascript React fiddle above at first looks confusing—is it HTML or javascript? Turns out, it’s a mixture of both in what React developers call JSX syntax. The idea behind React is that since your giant javascript file is often used to manipulate HTML, we should just pair them together as they go hand-in-hand. Keep in mind that you can render React on both the server and the client, but React unfortunately does not support any browser below IE8.

The Birth of Flexbox

Throughout my internship at Sparxoo, the most time-consuming task for me has often been CSS. Making a website look exactly like a Photoshop document is much harder than I expected. Although I realized I needed to strengthen my CSS knowledge, could at least part of the blame fall on the language itself?  Centering things horizontally on an HTML element has traditionally been handled by setting margin-left: auto and margin-right: auto, thus forcing the browser to put equal margins on the right and left. However, if the element doesn’t have a specified width, it won’t center.  That means percentage widths like width: 80% won’t work either because it’s based on the width of its parent element.

Codepen Horizontal Center

And vertical centering? You can forget about it. Setting margin-top: auto and margin: bottom auto won’t work at all. For years, developers have achieved vertical centering through negative margins or display: table or hacks involving pseudo elements. Enter the golden age of Flexbox. To use Flexbox, all you have to do is set display: flex on an HTML element in your CSS. According to its specs, the Flexbox layout aims at “providing a more efficient way to align and distribute space among items in a container, even when their size is unknown.” A flex container expands its items to fill available free space, or shrinks them to prevent overflow. It’s sort of similar to CSS frameworks like Bootstrap or Foundation, except more customizable because you have more control over which items are Flexbox (for example, you can have a div with display: flex sitting next to a div with display: inline-block). With Flexbox, you have a major axis and a minor axis. If the flex-direction is set to row (the default), then setting align-items: center; on the HTML element container that’s display: flex will vertically center its children, and justify-content: center; will horizontally center its children. Setting both align-items: center; and justify-content: center; on a container will horizontally and vertically center its children! Note that if the container’s flex-direction is set to column, the align-items and justify-content properties work in reverse (align-items: center; will horizontally center its children, and justify-content: center; will vertically center its children). There are numerous other display properties you can control with Flexbox, including the order its children display on the web page. Although Flexbox is awesome, there are certain situations in which you want to avoid using it. Flexbox has no support in IE8 and many bugs in IE11.


Client Portfolio: Rebuilding Together Tampa Bay

Rebuilding Together Tampa Bay, Inc. (RTTB) is a non-profit organization that repairs homes of those in need. At the core of their mission, RTTB focuses on preserving and revitalizing houses and communities in Screen Shot 2016-06-15 at 5.13.12 PMthe Tampa Bay Area, ensuring that low-income homeowners live in warmth, safety and independence. From their Affordable Housing Program to  Building Healthier Neighborhoods Program, RTTB works with a team of volunteers, donors and sponsors to deliver their services throughout the Tampa Bay area. Earlier this year, RTTB sought Sparxoo’s services to complete the redesign and development of the organization’s website.

During the initial discovery phase of this project, RTTB expressed their goals to elevate the overall design of the site and improve the site’s experience from a user perspective.

Screen Shot 2016-06-15 at 5.13.18 PM

With these goals in mind, our team of digital specialists, designers and developers conducted a competitive market evaluation of best-in-class hero brands and completed three rounds of design. Following each round, we sought buy-in from RTTB’s leadership team and implemented feedback to the designs accordingly

As a result of our extensive design and content development process, we were proud to design a site that resonated with RTTB’s leadership team and connects with various target audiences, including: homeowners, volunteers, donors and community partners. From compelling calls to action (i.e. donate, volunteer and apply) to visually appealing infographics, the new RTTB site not only includes impressive design elements but is a site that prompts a user-friendly experience throughout the entire website.   

The new RTTB website will officially launch in July 2016.

A View from Dev: Front-End Design Conference

Below are a few key takeaways from St. Pete’s Front-End Design Conference, day 1 from the view point of our developer, Aaron Harvey.

Morning Session:

We began the conference by being greeted with a warm smile, a free conference t-shirt, coffee and donuts! After we had enough caffeine and sugar in us our first speaker took the stage. Matt Griffin founder of Bearded shared with us clips from his upcoming documentary film about what it means to be a web designer. In his film he interviewed many influential industry leaders to get their take. Matt took us back a few years to find out how designers dealt with going from designing for desktops, to all of the different screens that are now used to view the web. Many of the people interviewed talked on how they struggled with this new challenge of having to rethink how they work. Matt received many laughs throughout his speech at one point impersonating the Heat Miser from the 1974 children’s television special The Year Without a Santa Claus.

Samantha Warren was scheduled to take the stage next but we would have to wait a little bit longer for her as her flight was delayed and she would instead speak in the afternoon session. Smith Schwartz was kind enough to move up into this slot and talked to us about SASS for Engineers. Smith showed slides showing all of the places her work has allowed her to visit throughout this beautiful world. Smith went on to talk about SASS style guides including recommending Mina Markham’s SMACCS Your SASS Up.

Our last speaker of the morning was Sam Kapila. Sam talked about making sure to ask the clients questions and listen to them when they give you answers instead of just forcing your own ideas on to them. She emphasized taking research into consideration before going ahead with a project. It’s key to find out where the client has come from to determine where they are going.

Afternoon Session:
We returned to the conference after lunch to find our first speaker of the afternoon, Samantha Warren. Samantha talked to us about how she tried to learn ceramics one day. She showed us a slide of what her art was supposed to look like before revealing what it eventually did look like. The lesson was that we as designers had great ideas from the first day but our skills just take some time to catch up. Only after we stumble and fall do we pick ourselves up and continue to grow.

The second speaker of the afternoon was Rachel Smith. Rachel started off by asking us which one of two different depictions of websites our looked like. She explained that sometimes we get comfortable with writing clean code and that we stop taking chances with our work to the point where what we design gets boring. She offered up the idea of having us learn to take chances at places like Codepen where we can play with animation and get creative without feeling like you are being judged. This will translate over into our own professional work and only improve our creativity.

The last speaker was up for the task of keeping our attention after listening to other speeches all day. Aaron Draplin talked about how he began making logos many years ago and today he has his first ever book to share with us. He flipped through pages of his book to share sketches and logos with each of them having a colorful story to entertain us. He told us about the time he saw Gene Simmons from Kiss at the airport refusing to autograph a plane ticket for a fan (Aaron told us how he decided to walk up to Mr. Simmons and call him by the wrong name calling him Ted Nugent to cut him back down to size). He told us about the time Bernie Sanders asked him recently to design some work for his election and Aaron was excited at the event he never remembered to pose for a picture with Mr. Sanders until he zoomed in to a picture showing a tiny dot of a bearded man who appeared to be Aaron Draplin beneath Bernie’s outstretched arms. Aaron gave us the message that we can all change the industry by believing in ourselves and working hard to accomplish our dreams.

Oh yeah, they also had ice cream sandwiches and milk available in the afternoon. Can you believe that? Ice cream sandwiches!

The 3 Things an Agency Internship Offers that No Classroom Can

About a month ago, I joined Sparxoo’s team as the Digital Marketing and Graphic Design intern. Like most students, I knew I needed an internship, but I didn’t fully understand why, beyond the fact that it would look great on my resume. After my first few weeks as an intern, I’ve started to realize the true value of this experience. An agency internship is the best way to get real marketing experience and learn the workings of the industry. My position has already built on things I’ve learned in the classroom, and has allowed me to do three crucial things that will benefit me down the road.

Diving right in with hands-on experience

On my first day at Sparxoo, I was introduced to a project that involved planning a month of social media posts for a client, as well as designing materials for these posts. I was eased into the project at first, but was soon handed the reins. This project helped me transition into the responsibility of tackling larger projects on my own, and allowed me to start branching out into different types of tasks. It also gave me the opportunity to get to know a client’s voice and goals, which I learned to apply to everything I planned or created.

No matter how much you can learn in the classroom, nothing compares to this kind of actual hands-on experience. An internship at an agency gives you the opportunity to work on real projects for real clients, in a variety of different industries. Taking ownership of a task or project gives real-world context to the concepts you learn in the classroom. Working to complete these tasks is also a great way to become familiar with the tools and programs agencies use to plan and complete tasks.

Collaborating with different people & different perspectives

Client projects at Sparxoo are rarely a one-person job, and as an intern I’ve had the opportunity to work closely and collaborate with a wide variety of intelligent and talented people. This collaboration is invaluable, and it has shown me the perspectives of people with various areas of expertise.

At an agency with such a diverse toolbox of brainpower, I’ve been able to ask specific people for input on specific projects, and in doing so have found solutions or ideas that have enhanced my own. Likewise, I’ve been able to find opportunities to contribute my own unique perspective.

Learning from an office full of willing teachers

As an intern, I am working across teams, so I have the benefit of learning from everyone in the office. Members of the design team and the digital marketing team alike have more to teach me than I could ever imagine, and are eager to help me develop my skills. With every project, I learn new ways to design or important best practices in online marketing. While learning in the classroom is important, it can never prepare you to do real work like an internship can. At a marketing agency like Sparxoo, you have the opportunity to learn skills and processes that cut across industries and functions.

An internship at an agency can offer valuable experiences and learning opportunities that take the knowledge you’re learning in the classroom to new levels. It allows you to leave your mark on projects while also absorbing some of the expertise of everyone around you.  At Sparxoo, I’ve found that I have something I can offer to each project I work on, and the projects and people I work with all have something they can teach me in return.

Top 3 Things Advertising Agencies Look For in Team Members

Richard Florida was the first to label our kind. He nicknamed us the ‘Creative Class’ in his book, “The Rise of the Creative Class.” And he was right about this new class of professionals—those whose job it is to master their craft and become a creative guru to produce more meaningful products and services. This is the exact individual whom advertising agencies look for—the design, development, digital and creative expert who is always eager to improve, as well as improve those around them.

The advertising industry is a $600 billion industry growing at approximately 5 percent annually (, and as one of the fastest growing agencies in Florida, we’re proud to play a role in that growth. We’re always looking for members of the Creative Class to add to our agency roster, and we’ve got specific traits that we’re looking for in potential candidates. With that in mind, here are the top three things advertising agencies—including us—look for in team members.

Multi-Dimensional Skill Set

If we were having this conversation a decade ago, it would sound very different. My advice would be to bring a deep-rooted expert in one field to the table. Today, we live in a world that can turn on a dime. We can no longer act as cogs in a machine, doing one thing incredibly well, to keep the machine running; instead, we must wear several hats and become experts in many different topics.

For example, it’s not enough to be a skilled programmer. The truly ideal programmer needs to understand front-end user experience and be able to create a seamless admin interface on the backend. Additionally, the best account leads I’ve seen are not solely proficient at managing tasks in project management software. Rather, they drive strategy while leading a cross-functional team, and lend a strong hand in copywriting, design and creative direction.

Admittedly, the most difficult new employee transitions are those who bring only one deep-rooted expertise to the table. However, they can—and do—adapt if they have the aptitude to learn new skills while improving their current ones.

Mental Agility

Last year, U.S. agency revenue rose 5.4 percent (AdAge,com) so it’s the perfect time to join an agency—that is, if you have digital know-how. In today’s digital age, we’re all going mobile. This means consumers want concise, customized information delivered faster than ever before.

What does this mean? It means we require an unprecedented level of mental agility in advertising agencies today. Long gone are the days of putting a traditional marketing campaign into motion, and viewing results months later. Now we can launch a digital marketing campaign and see real-time results, which enables real-time optimization and faster campaign refinement.

The difference between working in-house in a marketing department and working for an agency is, in an advertising agency, you work on many projects, clients and priority deadlines at once. Since juggling several priorities at once is the norm in an agency, it’s crucial to find a team member who can fire up their neurons in order to think on their feet and draw conclusions quickly.

Communication Skills

Success in business comes down to this trait: communication (I would also argue that success in your personal life comes down to this trait, but I digress). Once considered a soft skill and a “nice quality” to have, effective communication is quickly becoming mandatory.

Communication isn’t just necessary to discuss results and resolve problems, it’s essential to avoid being misunderstood. A misunderstanding in an advertising agency equates to duplicative work efforts, wasting your team’s time, late deliverables, unhappy clients and a stressed-out internal team. Great communication enables productivity; it boosts employee morale, and facilitates on-time and on-budget project completion.

All of the best-in-class advertising agencies recognize that their greatest asset is their talent. At the end of the day, it’s an advertiser’s job to sell human capital. They sell brainpower. They sell ideas. This means it’s imperative to hire the best talent for the job. After all—if we wanted another cookie-cutter replica of a cubicle employee, we would have given into the Machine that is corporate America a long time ago.