danilosetra

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

defenestrator

// This one is interesting because no previously checked condition is re-checked
// It is a self-executing function that contains a declarative function named fizzbuzz() and a for loop
// Too much fun
(function() {
  function fizzbuzz(i) {
    const test = (d, s, x) => i % d == 0 ? _ => s + x('') : x
    const fizz = x => test(3, 'Fizz', x)
    const buzz = x => test(5, 'Buzz', x)
    console.log(fizz(buzz(x=>x))(i.toString()))
  }

defenestrator

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

ctkjose

JSC

JSC is the JavaScript engine from Apple's JavaScriptCore (WebKit) as a console application that you can use to run script in the terminal.

For more info visit the JSC's webkit wiki page.

Adding a shortcut to JSC

Using jsc is simple, the one issue is that Apple keeps changing the location for jsc. To deal with this issue I just create a symbolic link to the binary:

JoeyBurzynski

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

lopspower

Hexadecimal color code for transparency

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

Download This sample on Google Play Store

d33pfri3d

<datalist id="statelist">
						<option value="Alabama"></option>
						<option value="Alaska"></option>
						<option value="Arizona"></option>
						<option value="Arkansas"></option>
						<option value="California"></option>
						<option value="Colorado"></option>
						<option value="Connecticut"></option>
						<option value="Delaware"></option>
						<option value="District of Columbia"></option>