A sweet image lightbox gallery created with just vanilla 🍦 JS.
View this project at
fvcproductions.github.io/vanilla-box
Taken from the email I received.
This exercise is meant to demonstrate your ability to:
- Access a public API and successfully retrieve data from it;
- Display that data on a page;
- Update the UI of a page without refreshing;
- Build a polished user experience you'd be proud to ship; and
- Do all of the above using only native JavaScript (no libraries such as jQuery or React, although CSS and JavaScript preprocessors and polyfills are fine).
- Please stick to JavaScript (e.g. not TypeScript or similar languages) for this exercise, and please ensure that all application code is your own.
- We'd like you to create a web page that shows a grid of photo thumbnails;
- when a thumbnail is clicked, the photo should be displayed in a lightbox view, with the ability to move to the next / previous photos and display the photo title.
- You can use any public API that returns photos; here are some ideas:
Your changes will be graded based on adherence to
- product and design requirements,
- performance,
- browser support,
- code readability and organization,
- error handling,
- lack of defects,
- and documentation.
We’ll get back to you within a week of your submission with the outcome. Please note that we will not provide you with detailed feedback on the exercise.
You have one week to complete your exercise, but please keep us posted if you end up needing more time.
Your submission must run without errors in the latest versions of Chrome, Safari, Firefox, and Edge.
When you’re finished, please send us:
- A URL where the working lightbox can be seen
- Your source code as a zipped Git repository
- Create a local repo for your code and commit your files as you normally would; when the exercise is complete, zip your main directory, including the .git directory, and send it to us
- Note If you use GitHub, please make your repo private or remove it after you submit your work. We wouldn't want someone to submit your work as their own later!
- Please provide all source code via a Git repository – create a local repo for your code, and when the exercise is complete, please tar or zip your main directory and send it along to us (and please remember to include your .git directory/files).
- Please be sure to submit using the (GreenHouse) link provided in this email.
- If you have any notes or instructions about the exercise, please include them in a README.md file in your repo.
- We have implemented discretionary measures to ensure personal information is not associated with coding exercises. This enables the grader to make unbiased decisions, so we ask that you do not include your name anywhere in the code or documentation.
I created the logo for "Vanilla Box" using Sketch.
The Sketch file used can be found here.
I used IconFinder to start off.
The colors used to create the vanilla ice cream logo are the same as Slack's brand colors.
The Custom Search Engine (CSE) public URL for this project can be found here.
The Custom Search Engine (CSE) was configured using the following settings:
I am fetching the images from the Google Custom Search API.
I limited the API to fetching 9 images since the max is 10 at one time and the layout has 3 columns.
I created an API key and Custom Search Engine (CSE) id in order for the API to work.
Please note that the API limits calls to 100 per day on the free plan even with billing enabled.
- BrandColors
- Browserling
- BrowserStack
- CodeKit
- Favicon Generator
- GitHub Pages
- GitHub
- Google Analytics
- Google Cloud Platform
- Google Custom Search
- IconFinder
- Lighthouse
- Shields.io
- Sketch
I tested the website on all major browsers.
Version 65.0.3325.181 (Official Build) (64-bit)
BrowserStack was used for this.
Windows 10 - Edge 16.0
Browserling was used for this.
Windows Vista - Internet Explorer 9
Windows 7 - Internet Explorer 11
Version 52.0.2871.30
Version 11.0.3 (13604.5.6)
Lighthouse is an open-source, automated tool created by Google for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
When I ran Lighthouse on Vanilla Box, the following results were positive for performance, SEO and accessibility.
The PWA (Progressive Web App) score was low since that wasn't a metric for the project and would have required more configuration (adding a manifest and service worker).
The key issue was "Mixed Content" since the page is served over HTTPS but requests an insecure image from the Google API.
Google has a test where to check if a webpage is mobile-friendly.
You can view the results online here.
The source code is on GitHub in a private repo.
I used CodeKit to compile the SASS files to CSS with minification and to check the JS syntax with ESLint and transpile the JS with Babel. I also set it up so all files were minified and all images were optimized.
The website is deployed using GitHub Pages.
Heads up, I think it's important to have a "Contributing" section for any project but this is a private repo.
To get started...
- 🍴 Fork this repo
- 🔨 View the contributing guidelines at CONTRIBUTING.md
- 👥 Add yourself as a contributor under the credits section
- 🔧 Open a new pull request
- 🎉 Get your pull request approved - success!
Or just create an issue - any little bit of help counts! 😊
Heads up, similar to the "Contributing" section of this README, I think it's important to have a "Code of Conduct" for any project but this is a private repo.
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
More details can be found at this project's code of conduct.