ludder

Testcase Shop

We want you to create a very basic ecommerce project in React by creating the homepage of a web shop.

We are interested in the way you:

• setup database
• connect to this external resource from Next.js
• manage state
• work with asynchronous data

ludder

/**
 * Get parent node for given tagname
 * @param  {Object} node    DOM node
 * @param  {String} tagname HTML tagName
 * @return {Object}         Parent node
 */
function getParentByTagName(node, tagname) {
	var parent;
	if (node === null || tagname === '') return;
	parent  = node.parentNode;

ludder

/*
Element to slide gets the following CSS:
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease 0s;
*/

/**
 * Like jQuery's slideDown function - uses CSS3 transitions

ludder

import Document, { DocumentContext, DocumentInitialProps } from "next/document";
import { ReactElement } from "react";
import { ServerStyleSheet } from "styled-components";

interface InitialProps extends DocumentInitialProps {
  styles: ReactElement;
}

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext): Promise<InitialProps> {

ludder

// https://dev.to/selbekk/how-to-fade-in-content-as-it-scrolls-into-view-10j4
import React from "react";
import styled from "styled-components";

const Section = styled.div`
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 1200ms ease-out, transform 600ms ease-out,
    visibility 1200ms ease-out;

ludder

/*! A fix for the iOS orientationchange zoom bug.
 Script by @scottjehl, rebound by @wilto.
 MIT / GPLv2 License.
 Source: https://github.com/scottjehl/iOS-Orientationchange-Fix
 Explanation: http://adactio.com/journal/4470/
*/

// No code, check source above

ludder

# Add to .bashrc
alias ios='open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app'

ludder

# -r -> Include subdirectories
# -n -> Print line number
# -i -> Ignore case
# . -> From current directory
grep -rn "searchString" .

ludder

echo "Start Git pre commit hook"

#!/bin/sh
# stash unstaged changes, run release task, stage release updates and restore stashed files

NAME=$(git branch | grep '*' | sed 's/* //')

# don't run on rebase
if [ $NAME != '(no branch)' ]
then

ludder

/*
Returns true if element has next sibling (of type element)
*/
function hasNextSibling(node) {
  var bln = false;
	while( (node = node.nextSibling) !== null ) {
		if (node.nodeType !== 1) {
			continue;
		}
		bln = true;