Orange Juice ❤'s Front End

To minimize the time we spend setting up a new project from scratch we collaborated on a template which has all the basics we use in every project.

This template includes stuff like a Gulp file with basic SASS and JavaScript minification, linting, compiling and watch tasks, bootstraps robust grid system, a detailed folder structure, a basic REM setup, and some useful SASS mixins.

Every new project we start uses SASS, we've found it's features to save a bunch of time as projects get larger and more complicated. SASS is great for when multiple teams are working on a project at once, with amazing features like variables, mixins, auto prefixing, extending etc. It's relatively easy to get started with SASS, you can use as much of it as you want which is also nice for front end developers that are used to plain old CSS.

We've recently transitioned to using GIT as our primary version control system after realizing the benefits it brings to working on projects as a team. It enables us to quickly see the state of a project and remain agile in our development.

Consistent code is really important at Orange Juice, we want another developer to be able to join a team or project and be immediately familiar with how everything works.

We have an internal website dedicated to the code structure of our CSS and JavaScript. It outlines how we should indent our code, style comments and arrange files.

We follow the BEM naming convention for all of our classes. It enables someone who's never seen a page to quickly understand the structure and hierarchy of it's elements. We've experimented with a few other naming conventions but found this way to be the best (so far).

For our JavaScript code we're currently experimenting with libraries such as Babel and TypeScript to organize our code. We're still trying to find the perfect tool (if it even exists).

For teams who want to enable better collaboration we'd highly suggest creating an internal site, it's proven to work well with our team and minimize confusion when working with others code. Most questions we have are answered in the documentation. The only downside being that it takes time and effort to maintain such a website, but it's worth the investment.

We've created a team internally to work on fun projects purely for the purpose of learning new things from each other. The team consists of front enders and designers. Sometimes we create stuff for our CodePen page. Other times we're working on improving something in our workflow or creating POC's for features we might want to add to websites in the future.

Orange Juice Labs has also improved the teams relationships with each other, it allows us to get together away from the hustle and bustle of client projects and learn about others thought processes, what we want to learn and how we want to grow as developers.

Over the past couple of weeks we've been working on a CAPTCHA concept where you have to complete a few 3-4 second mini games to pass or fail. This was a fun experiment for us because it caused us to think about a lot of different aspects of what makes a CAPTCHA secure, while still only using JavaScript. These mini games will be on our CodePen page soon.

We plan to share more of our concepts & experiments on CodePen in the near future as we get them ready for prime time.
The future
The future of front end development at Orange Juice is a bright one, we're constantly pushing ourselves to try out new stuff and learn from each other. We also stay open minded and maintain good relationships within the team. We work closely with other teams to create even better sites and always try to make the next site better than the previous one.

Keep an eye out for more experiments on our CodePen page; we've only just started, but there's lots of great stuff in the pipeline!

Have any questions about something we mentioned in this article?
Leave a comment below and we can explain more.