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.
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.
Things to Remember
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.
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.