git clone git@github.com:YOUR-USERNAME/YOUR-FORKED-REPO.git
cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream
//required node modules | |
//untested | |
var request = require('request'); | |
var cheerio = require('cheerio'); | |
var fs = require('fs'); | |
var s3 = require('s3'); | |
var AWS = require('aws-sdk'); | |
var url = 'https://medium.com/@benjaminhardy/8-things-every-person-should-do-before-8-a-m-cc0233e15c8d'; //url of site |
// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides | |
// My basic render function structure: | |
function RenderLogicExample({ | |
someBoolean, // 1) Destructure values from `props` object | |
someList, | |
}) { | |
// 2) Declare state values | |
const [a, setA] = useState(0); | |
const [b, setB] = useState(0); |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Drag Drop Demo</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script> | |
<style> | |
#drag-1, #drag-2 { | |
width: 25%; |
// | |
// inspired by https://stackoverflow.com/a/838755/521197 | |
// | |
function getDPI() { | |
var div = document.createElement( "div"); | |
div.style.height = "1in"; | |
div.style.width = "1in"; | |
div.style.top = "-100%"; | |
div.style.left = "-100%"; | |
div.style.position = "absolute"; |
beforeCreate()
: This method is called synchronously after the Vue instance has just been initialized, before data observation and event/watcher setup.
created()
: This method is called synchronously after the Vue instance is created. Data observation, computed properties, methods and event callbacks have already been set up at this stage but the mounting phase has not started yet.
beforeMount()
: This method is called right before the component is mounted. So it is called before the render method is executed.
mounted()
: This method is called after the component has just been mounted.
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class FileInput extends React.Component {
constructor(props) {
super(props);
this.state = {
https://twitter.com/snookca/status/1073299331262889984?s=21
Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows.
(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)
So the big deal about css-in-js (cij) is selectors.
You first need to undestand the concept of frontend tests.
You should not test the implementation but the behavior
You test like the end user
For instance, imagine a login screen with email and password inputs and a submit button
The test should input the email and the password, then click in the submit button.