| Lesson 1 - Iterations | |
| - BinaryGap - https://codility.com/demo/results/trainingU2FQPQ-7Y4/ | |
| Lesson 2 - Arrays | |
| - OddOccurrencesInArray - https://codility.com/demo/results/trainingFN5RVT-XQ4/ | |
| - CyclicRotation - https://codility.com/demo/results/trainingSH2W5R-RP5/ | |
| Lesson 3 - Time Complexity | |
| - FrogJmp - https://codility.com/demo/results/training6KKWUD-BXJ/ | |
| - PermMissingElem - https://codility.com/demo/results/training58W4YJ-VHA/ |
| import React, { | |
| useContext, | |
| createContext, | |
| createElement, | |
| useEffect, | |
| useRef, | |
| useCallback, | |
| useState, | |
| } from 'react'; | |
| import isEqual from 'react-fast-compare'; |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()
| import styled from 'styled-components' | |
| import { theme } from 'rebass' | |
| const { breakpoints } = theme | |
| const lastIndex = breakpoints.length - 1 | |
| const getMediaBreakpoint = (breakpoints, breakpoint, index) => { | |
| if (index === 0) return `@media screen and (max-width: ${breakpoint})` | |
| const prevBreakpoint = breakpoints[index - 1] | |
| if (index === lastIndex) { |
@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).
Here we go with the explanations:
(function(x, f = () => x) {
| function *fibonacci(n) { | |
| const infinite = !n && n !== 0; | |
| let current = 0; | |
| let next = 1; | |
| while (infinite || n--) { | |
| yield current; | |
| [current, next] = [next, current + next]; | |
| } | |
| } |
| import { compose, withState, lifecycle } from 'recompose'; | |
| let AsyncComponent = null; | |
| export default (loader, loadingComponent) => compose( | |
| withState('isDynamicallyLoaded', 'updatedIsDynamicallyLoaded', false), | |
| lifecycle({ | |
| componentDidMount() { | |
| const { updatedIsDynamicallyLoaded } = this.props; | |
| loader.then((LoadedModule) => { |
| import React from 'react'; | |
| const toPromise = (load) => (new Promise((resolve) => ( | |
| load(resolve) | |
| ))); | |
| class LazilyLoad extends React.Component { | |
| constructor() { | |
| super(...arguments); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Auto complete RxJS</title> | |
| </head> | |
| <body> | |
| <form action="" class="form"> | |
| <input type="text" id="title"> |
