surgeboris

Implementing a Design System with Atomic CSS

Design Systems are nothing new — some authors trace their origin back to the pre-Internet era. But even in the context of the Internet: Design Systems were a thing 10 years ago when I started my career as a web developer. Fast-forward 10 years - and I finally have an opportunity to work on implementing a Design System at Thinkific. I went through a lot of different content (articles, books and workshops) on building Design Systems and tend to think that I have a pretty good overview of what's usually discussed in the Design System communities.

Atomic CSS is nothing new either. The first time I heard about it was about the same time that I heard of Design Systems (i.e. 10 years ago). Back then I was kind of puzzled: What benefits do single-property class names bring to the table? It felt "hacky" to have 5-10 different items in the class attribute o

surgeboris

Weather SPA

This is a simple test task that allows to demonstrate the knowledge of React/Redux.

Requirements

(!) Data may be accuried from openweathermap.org website
(!) Usage of react.js+redux is required

App should:

surgeboris

// Given a list of bombs on a 2D-plane, write a function (or functions) that determine the maximum number of bombs that can be detonated by
// triggering just one of the given bombs. Each bomb has an x-, and y-coordinate, as well as an explosion radius. When a bomb explodes, it - in
// turn - detonates all other bombs within its explosion radius.

function getDistance(source, target) {
  const xDiff = target.x - source.x;
  const yDiff = target.y - source.y;
  return Math.sqrt(xDiff**2 + yDiff**2);
}

surgeboris

const YOUR_LOGIN = '';
const YOUR_PASSWORD = '';
const YOUR_SPACE = '';

const fs = require('fs');
const webdriverio = require('webdriverio');

const options = {
  desiredCapabilities: {
    browserName: 'chrome'

surgeboris

@@ -1,13 +1,13 @@
 import Events from 'eventemitter3';
 
-const rawMixin = function () {
+const mixinModel = function (target) {
   const attrs = {};
 
-  return Object.assign(this, {
+  return Object.assign(target, {
     set (name, value) {