Hans Christian Reinl drublic

## dabblet.css
/**
 * Pseudo-elements for select
 */

select {
	-webkit-appearance: none;
}

select:after {
	content: 'abc';

## sublime-plugins.md

      
              1 file
            
          
              0 forks
            
          
              10 comments
            
          
              4 stars
            
          
                drublic
                / sublime-plugins.md
            
            
              Last active
              October 4, 2022 02:24
            
              
                My Sublime Plugins
              
          
    Sublime Text Plugins


All Autocomplete
Bower
Editor Config
Emmet
Grunt
Image2Base64
LESS


## rem-fallback.less
@main-font-size: 16px;

.x-rem (@property, @value) {

  // This is a workaround, inspired by https://github.com/borodean/less-properties
  @px-fallback: @value * @main-font-size;
  -: ~`(function () { return ';@{property}: @{px-fallback}'; }())`;
  -: ~`(function () { return ';@{property}: @{value}rem'; }())`;
}

## whitespacing.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Whitespace is important</title>
</head>
<body>

	<div class="wrapper">

## dabblet.css
/**
 * Testing @supports
 */

body {
	background: red;
}

@supports (box-shadow: 2px 2px 2px black)  {
	body {

## useHasLoader.ts
// Testable Custom Hooks
import { useEffect } from "react";

// Function that can be tested with clear API, easily unit-testable
const handleHasLoader = ({ isLoading, hasFocus, setHasLoader }) => {
  if (isLoading && !hasFocus) {
    return setHasLoader(true);
  }

  return setHasLoader(false);

## Button.tsx
// Presentational Component
// contains only the UI and has a clear UI (props) for testing

import React from "react";
import Loader from "../Loader";

const Button = ({ onFocus, onBlur, hasLoader, label }) => (
  <button type="button" onFocus={onFocus} onBlur={onBlur}>
    {hasLoader ? <Loader /> : label}
  </button>

## Button.tsx
import React, { useState, useEffect, useCallback } from 'react';
import Loader from '../Loader';

const Button = ({ label, isLoading }) => {
  const [hasFocus, setHasFocus] = useState<boolean>(false);
  const [hasLoader, setHasLoader] = useState<boolean>(false);
  const handleFocus = useCallback(() => {
    setHasFocus(true);
  }, []);
  const handleBlur = useCallback(() => {

## Card.jsx
// This is an exisiting React Component written as a Function Component using JavaScript.

import React from "react";
import { string, any } from "prop-types";

const Card = ({
  headline,
  createdAt,
  children,
}) => {

## tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "noImplicitAny": false,
	/**
	* Pseudo-elements for select
	*/

	select {
	-webkit-appearance: none;
	}

	select:after {
	content: 'abc';
	@main-font-size: 16px;

	.x-rem (@property, @value) {

	// This is a workaround, inspired by https://github.com/borodean/less-properties
	@px-fallback: @value * @main-font-size;
	-: ~`(function () { return ';@{property}: @{px-fallback}'; }())`;
	-: ~`(function () { return ';@{property}: @{value}rem'; }())`;
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Whitespace is important</title>
	</head>
	<body>

	<div class="wrapper">
	/**
	* Testing @supports
	*/

	body {
	background: red;
	}

	@supports (box-shadow: 2px 2px 2px black) {
	body {
	// Testable Custom Hooks
	import { useEffect } from "react";

	// Function that can be tested with clear API, easily unit-testable
	const handleHasLoader = ({ isLoading, hasFocus, setHasLoader }) => {
	if (isLoading && !hasFocus) {
	return setHasLoader(true);
	}

	return setHasLoader(false);
	// Presentational Component
	// contains only the UI and has a clear UI (props) for testing

	import React from "react";
	import Loader from "../Loader";

	const Button = ({ onFocus, onBlur, hasLoader, label }) => (
	<button type="button" onFocus={onFocus} onBlur={onBlur}>
	{hasLoader ? <Loader /> : label}
	</button>
	import React, { useState, useEffect, useCallback } from 'react';
	import Loader from '../Loader';

	const Button = ({ label, isLoading }) => {
	const [hasFocus, setHasFocus] = useState<boolean>(false);
	const [hasLoader, setHasLoader] = useState<boolean>(false);
	const handleFocus = useCallback(() => {
	setHasFocus(true);
	}, []);
	const handleBlur = useCallback(() => {
	// This is an exisiting React Component written as a Function Component using JavaScript.

	import React from "react";
	import { string, any } from "prop-types";

	const Card = ({
	headline,
	createdAt,
	children,
	}) => {
	{
	"compilerOptions": {
	"target": "es5",
	"lib": [
	"dom",
	"dom.iterable",
	"esnext"
	],
	"allowJs": true,
	"noImplicitAny": false,