Skip to content

Instantly share code, notes, and snippets.

Avatar
🌍
#NeverStopLearning

Christian Fleschhut cfleschhut

🌍
#NeverStopLearning
View GitHub Profile
View CommentBox.elm
module CommentBox exposing (main)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
main : Program () Model Msg
main =
@cfleschhut
cfleschhut / index.html
Last active June 2, 2017 08:55
Animated image fade-in
View index.html
<div class="content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
<p class="placeholder"></p>
<p>
<img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
</p>
View senior-frontend-developer-test-answers.md

Javascript / Senior Front-end Developer

Interview Test

Share your answers as Markdown through Gist and include code as Markdown code blocks. No worries, there is more than one way to answer the questions 👍

Q1

Write a function (without using external libraries) in ES6 that converts the user entered date formatted as M/D/YYYY to the format YYYYMMDD which is required by an API endpoint. It should convert ”12/31/2016” to ”20161231” for example. Furthermore, it should validate that the passed date is formatted correctly using a Regular Expression (let's assume all months have 31 days). Write unit tests for your convert function using the syntax of a BDD-style test framework of your choice.

mocha.setup('bdd');
@cfleschhut
cfleschhut / example.html
Created January 25, 2012 18:08
Examples for: querySelector, elem.matchesSelector, elem.classList, elem.nextElementSibling, DOMContentLoaded, document.readyState
View example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NetTuts: From jQuery to JavaScript</title>
<script type="text/javascript">
var addEvent = (function () {
var filter = function(el, type, fn) {
for ( var i = 0, len = el.length; i < len; i++ ) {
@cfleschhut
cfleschhut / railstutorial.rb
Created November 27, 2011 13:50
Ruby Snippets
View railstutorial.rb
# Ruby classes
# Class inheritance
class Word < String
def palindrome?
self == self.reverse
end
end
@cfleschhut
cfleschhut / index.html
Created September 11, 2011 15:40
jQuery Mobile Test [+ Geolocation, + Local Storage]
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t3n jQuery Mobile Geolocation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.css" />
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.js"></script>
<script type="text/javascript">
@cfleschhut
cfleschhut / fiddle.css
Created August 7, 2011 19:49
CSS3 Button
View fiddle.css
body { font: 250%/1.2 sans-serif; background: #eee; }
a { color: #fff; text-decoration: none; outline: none; }
.btn {
display: inline-block;
border-radius: 8px;
box-shadow: 0 8px 0 #1a74a1,
0 15px 20px rgba(0, 0, 0, 0.35);
-moz-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: box-shadow 0.2s ease-in-out;
}
@cfleschhut
cfleschhut / fiddle.css
Created July 27, 2011 22:05
CSS3 CardFlip
View fiddle.css
body {
margin: 0; padding: 0; background: #eee; color: #444;
}
#container {
width: 320px; height: 300px;
background: #fff; margin: 20px auto; padding: 30px 0;
-webkit-perspective: 600;
}
#card {
width: 200px; height: 300px;
@cfleschhut
cfleschhut / fiddle.css
Created July 15, 2011 14:05
Test: jsFiddle GitHub Integration
View fiddle.css
body { background: url(http://www.themaninblue.com/experiment/Cubescape/images/grid.gif); }
#box {
position: absolute;
}
.top {
width: 20px; height: 20px; background: hsl(40, 85%, 70%);
-moz-transform: rotate(45deg) skew(-15deg, -15deg);
-webkit-transform: rotate(45deg) skew(-15deg, -15deg);
}
.left {
View learnjs.org.js
// Getting an Object’s enumerable properties (ES5)
var obj = {};
Object.defineProperty(obj, "foo", { value: 2, enumerable: true });
Object.defineProperty(obj, "bar", { value: 3, enumerable: true });
Object.defineProperty(obj, "baz", { value: 4, enumerable: false });
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});