This is practice for a component I'm thinking about integrating into a blog on my personal site. I'm looking for ways to improve my art and design skills, and maybe get better at React while I'm at it. I read an article on smashing magazine that recommended trying to create a color scheme every day, so I decided to try it out for a bit!
Here's a link to the article if you're interested: Color Theory for Designers: How To Create Your Own Color Schemes
| let component = ReasonReact.statelessComponent("MyComponent"); | |
| /** | |
| * This will be used to hold a ref to our input element | |
| */ | |
| let inputRef: ref(option('a)) = ref(None); | |
| /** | |
| * sets the ref to the input element | |
| */ |
| import React from "react"; | |
| import { createStore } from "redux"; | |
| // ACTIONS | |
| const createIncrement = amount => ({ | |
| type: "INCREMENT", | |
| amount | |
| }); | |
| const createDecrement = amount => ({ |
| import System.Random | |
| main = do | |
| x <- randomRIO (1,100) :: IO Int | |
| putStrLn $ show x |
| -- A game where the user tries to guess a random number | |
| -- It initializes the game with a random number and an | |
| -- empty array of guesses, and prompts the user to guess | |
| -- numbers until they arrive at the correct one. | |
| -- | |
| -- The state consists of a GameState and a Bool. The | |
| -- GameState stores the random correct number and the | |
| -- numbers the user has guessed. The Bool is used to | |
| -- represent whether or not the user has guessed the | |
| -- correct number |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>WebGL Source</title> | |
| <style> | |
| html { | |
| height: 100%; |
| import SpriteKit | |
| import PlaygroundSupport | |
| let view = SKView() | |
| let scene = SKScene(size: CGSize(width: 100, height: 100)) | |
| scene.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) | |
| scene.scaleMode = .aspectFit | |
| for i in 1 ... 7 { | |
| let rect = SKShapeNode(rect: CGRect(x: -25, y: -25, width: 50, height: 50)) |
| import SpriteKit | |
| import PlaygroundSupport | |
| // Variables to manipulate the demo | |
| let NUM_SHAPES = 8 // The number of shapes that will appear onscreen | |
| let SPEED = 1 // the speed at whic the demo will move | |
| func getScaleFactor(numShapes: Int, index: Int) -> Double { | |
| return 100.0 / Double(numShapes) * Double(index) |
| import SpriteKit | |
| import PlaygroundSupport | |
| // Variables to manipulate the demo | |
| let COLORS: [UIColor] = [.white, .cyan, .white, .magenta] | |
| let NUM_SHAPES = 6 // The number of shapes that will appear onscreen | |
| let SPEED = 0.5 // the speed at whic the demo will move | |
| /* |
| // Lightweight testing framework | |
| // Runs through a nested JS Object until it | |
| // finds an entry with a function value. | |
| // Otherwise, recursively cycle through the list, adding | |
| // descriptive tags along the way | |
| function run(tests) { | |
| const greenText = text => `\x1b[32m${text}`; | |
| const redText = text => `\x1b[31m${text}`; | |
| const resetText = text => `\x1b[0m${text}`; |
