sktwentysix

/* == FAVICON GUIDE == */
As of 2016, favicon development has become a somewhat more complicated process. The standard Favicon used to be a 16x16 pixel ICO file. 
While this format is still used widly today, it doesn't play well with responsive design.

This guide aims to list all of the different favicon formats and sizes for each major device for you to copy and paste into your 
website's header. Depending on what your web app will be used for, you likely won't need everything here.


/* == iOS Devices == */
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">

sktwentysix

# This is a template .gitignore file for git-managed WordPress projects.
#
# Fact: you don't want WordPress core files, or your server-specific
# configuration files etc., in your project's repository. You just don't.
#
# Solution: stick this file up your repository root (which it assumes is
# also the WordPress root directory) and add exceptions for any plugins,
# themes, and other directories that should be under version control.
#
# See the comments below for more info on how to add exceptions for your

sktwentysix

/* A basic example of how to center an element both verticallty and horizontally on a page or within a container */

div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

sktwentysix

/*

Sketchapp fro MacOS is a fantastic tool for prototyping, but has some drawbacks that make converting designs to fully functional websites a pain.
One of these is sketchapp's line-height, which doesn't seem to have any relation to CSS line-height values.
This is a simple example of how we can take a line height value from sketch and apply it to a CSS class for styling text:

Lets assume the text in our Sketchapp prototype has a font size of "18px", and line height of "33"...

Our CSS class would look like this:

sktwentysix

{
  "name": "my-angular-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",

sktwentysix

.app {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: space-between;	
  justify-items: center;
}

.header {
  grid-column-start: 1;
  grid-column-end: 5;

sktwentysix

constructor(props) {
  super(props)
  this.state = {
    uploads: [],
    patterns: [],
    documents: []
  };
}

sktwentysix

handleChange = (event) => {
  if (event.target.files[0]) {
    var uploads = []
    for (var key in event.target.files) {
      if (!event.target.files.hasOwnProperty(key)) continue;
      let upload = event.target.files[key]
      uploads.push(URL.createObjectURL(upload))
    }
    this.setState({
      uploads: uploads

sktwentysix

{ /* File uploader */ }
<section className="hero">
  <label className="fileUploaderContainer">
    Click here to upload documents
    <input type="file" id="fileUploader" onChange={this.handleChange} multiple />
  </label>

  <div>
    { this.state.uploads.map((value, index) => {
      return <img key={index} src={value} width="100px" />

sktwentysix

generateText = () => {
  let uploads = this.state.uploads

  for(var i = 0; i < uploads.length; i++) {
    Tesseract.recognize(uploads[i], {
      lang: 'eng'
    })
    .catch(err => {
      console.error(err)
    })