Rajesh Pillai rajeshpillai

Selenium tests on Ruby

Install

gems:

gem 'capybara', '2.10.1'
gem 'selenium-webdriver', '3.0.3'

Selenium

State Management Patterns

Repositories

Download the following repositories and run yarn install in each:

Virtual DOM and diffing algorithm

There was a [great article][1] about how react implements it's virtual DOM. There are some really interesting ideas in there but they are deeply buried in the implementation of the React framework.

However, it's possible to implement just the virtual DOM and diff algorithm on it's own as a set of independent modules.

	// cache/baseCache.js
	// This is our abstract base class defining the contract for our cache implementations.
	class BaseCache {
	async get(key) {
	throw new Error('Method "get" must be implemented');
	}

	async set(key, value, ttl) {
	throw new Error('Method "set" must be implemented');
	}

	console.clear();


	function html(strings, ...values) {
	// Combine the strings and values into a single string
	const combined = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? `§${i}§` : ''), '');

	console.log({combined});
	// Create a temporary container to hold the HTML string
	const container = document.createElement('div');

	import { render } from "preact";
	import { signal, computed } from "@preact/signals";
	import { useSignal, useComputed } from "@preact/signals";

	const todos = signal([
	{ text: "Write my first post", completed: true },
	{ text: "Buy new groceries", completed: false },
	{ text: "Walk the dog", completed: false },
	]);

	const {useState, useEffect} = React;

	function Counter() {
	const [counter, setCounter] = useState(0);
	return (
	<div className="content">
	<h1 className="count">{counter}</h1>
	</div>
	);
	}

	CanvasJS-themes
	===============

	Adds the ability to use customized themes with CanvasJS. For documentation, refer to http://canvasjs.com



	Adding your own theme
	=====================

	let html = `
	<div id="content" class="row">
	<nav class="col-md-2 d-none d-md-block bg-light sidebar">
	<div class="sidebar-sticky">
	<ul class="nav flex-column">
	<li class="nav-item">
	<a data-filter="dashboard" class="nav-link active" href="#">
	<span data-feather="home"></span>
	Dashboard <span class="sr-only">(current)</span>
	</a>

	const TinyReact = (function () {
	function createElement(type, attributes = {}, ...children) {
	const childElements = [].concat(...children).map(
	child =>
	child instanceof Object
	? child
	: createElement("text", {
	textContent: child
	})
	);