Gravitate Development Test
1
Info
2
Skills Rating
3
Questions
4
CSS / SCSS
5
SCSS/SASS/LESS
6
JS / jQuery
7
PHP
8
API
General Info
Name
*
First
Last
Email
*
Bio Links
Portfolio Site, Github, LinkedIn, Etc
Portfolio Links
Websites that you created or worked on.
URL
What was your role?
Position Requirements
*
This role is a full-time (on-location) position that is based in Vancouver WA.
I am available Full-Time and On-Location or able to Re-Locate
Rate your Skills on the following from 0 - 10
HTML
*
0
1
2
3
4
5
6
7
8
9
10
CSS
*
0
1
2
3
4
5
6
7
8
9
10
SCSS
*
0
1
2
3
4
5
6
7
8
9
10
JS
*
0
1
2
3
4
5
6
7
8
9
10
jQuery
*
0
1
2
3
4
5
6
7
8
9
10
PHP
*
0
1
2
3
4
5
6
7
8
9
10
MySQL
*
0
1
2
3
4
5
6
7
8
9
10
General Questions
What's your preferred method for clearing floats and why?
*
What's your preferred method for handling animations and why?
*
CSS / SCSS
Please specify the problem with the current CSS and rewrite the CSS to be more concise and current web standards friendly. You may use CSS or SCSS to rewrite it.
Example:
.html { font-size: 100%; } .banner { font-family: helvetica; background: url('../images/landscape.jpg') cover top center no-repeat; width: 100%; height: 50vh; font-size: 32px; line-height: 48px; } .banner.portrait { font-family: times new roman; background: url('../images/portrait.jpg'); font-size: 24px; line-height: 32px; }
CSS / SCSS Answer
*
Convert to SCSS/SASS/LESS
Convert and Optimize the CSS below to SCSS/SASS/LESS
CSS to be converted:
h1 { font-size: 40rem; color: #333; font-family: 'Arial'; font-weight: 500; letter-spacing: .01rem; line-height: 1.5; } h1 a { color: inherit; text-decoration: none; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } h2 { font-size: 30rem; color: #333; font-family: 'Arial'; font-weight: 400; letter-spacing: .01rem; line-height: 1.5; } h2 a { color: inherit; text-decoration: none; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } h3 { font-size: 24rem; color: #333; font-family: 'Arial'; font-weight: 300; letter-spacing: .01rem; line-height: 1.5; } h3 a { color: inherit; text-decoration: none; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
CSS Conversion Answer
*
JS / jQuery
We are only looking for the JS to be re-written to be as clean and minimized as possible. You can keep it as jQuery or use regular Js. Whatever you prefer.
HTML
<ul class="subnav"> <li class="parent">Social</li> <ul> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.facebook.com">Facebook</a></li> </ul> </ul> <ul class="subnav"> <li class="parent">Social</li> <ul> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.facebook.com">Facebook</a></li> </ul> </ul>
CSS
.subnav > ul { display: none; } .parent { cursor: pointer; &.active { font-weight: bold; } }
JS / jQuery
$(document).ready(function(){ $('.parent').click(function(){ if($(this).hasClass('active')){ var target = $(this).next(); target.slideUp(300); $(this).removeClass('active'); } else { var target = $(this).next(); $(this).addClass('active'); target.slideDown(300); } }); });
Working Example ( Click the Item )
Social
Google
Facebook
Social
Google
Facebook
Your Solution
JS / jQuery Answer
*
PHP
This is a simple PHP function that we want you to rewrite to be as optimized as possible as well as fault tolerant. The function takes an array and checks for any entries that equal to "green" and replaces it with "not green" then returns the new array.
Problem
function filter_green($old_array) { $new_array = array(); for ($i=0; $i < count($old_array); $i++) { $array_num = (is_string($i) ? $i : 0); if($old_array[$array_num] == 'green') { $new_array[$array_num] = 'not_green'; } else { $new_array[$array_num] = $old_array[$array_num]; } unset($array_num); } return $new_array; }
PHP Answer
*
Put N/A if you don't have enough PHP experience. DO NOT PUT IN <?php tags. Otherwise your submission will not be submitted properly
API
Create functions to call Google's Page Speed Insights API and return the Score. The Function should include one argument for the url so it can be passed through the function.
You will need to do your own research to find the API information. Bonus points if your function is fault tolerant for miss-formed urls.
Show answers for both PHP and JS / jQuery
PHP API Answer
*
Put N/A if you don't have enough PHP or API experience.
JS / jQuery API Answer
*
Put N/A if you don't have enough API experience.
Name
This field is for validation purposes and should be left unchanged.
This iframe contains the logic required to handle Ajax powered Gravity Forms.