jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

tmcw

The difference between XYZ and TMS tiles and how to convert between them

Lots of tile-based maps use either the XYZ or TMS scheme. These are the maps that have tiles ending in /0/0/0.png or something. Sometimes if it's a script, it'll look like &z=0&y=0&x=0 instead. Anyway, these are usually maps in Spherical Mercator.

Good examples are OpenStreetMap, Google Maps, MapBox, MapQuest, etc. Lots of maps.

Most of those are in XYZ. The best documentation for that is slippy map tilenames on the OSM Wiki, and Klokan's Tiles a la Google.

adrianbk

apply plugin: 'java'
apply plugin: 'maven-publish'

repositories { jcenter() }
dependencies { compile 'org.slf4j:slf4j-api:1.7.12' }

publishing {
  repositories {
    maven {
      url "http://127.0.0.1:8081/artifactory/libs-release-local/"

jiaaro

Using Swift libraries in Python

So... this is obviously totally, 100%, like for. real. not. supported. by. Apple. …yet?

But still... I thought it was pretty badass. And, seeing how there's already a Swift buildpack for Heroku you could move some slow code into Swift can call it as a library function. But, you know, not in production or anything. That would be silly, right?

Now, having said that, the actual Python/Swift interop may have bugs. I'll leave that as an exercise to the reader.

How to get Python code calling Swift functions:

olih

Processing JSON using jq

jq is useful to slice, filter, map and transform structured json data.

Installing jq

On Mac OS

brew install jq

thegitfather

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

reggi

How to setup AWS lambda function to talk to the internet and VPC

I'm going to walk you through the steps for setting up a AWS Lambda to talk to the internet and a VPC. Let's dive in.

So it might be really unintuitive at first but lambda functions have three states.

1. No VPC, where it can talk openly to the web, but can't talk to any of your AWS services.
2. VPC, the default setting where the lambda function can talk to your AWS services but can't talk to the web.
3. VPC with NAT, The best of both worlds, AWS services and web.

bvolpato

#!/bin/bash

# Chrome Repo
sudo apt-get install fonts-liberation xdg-utils libxss1 libappindicator1 libindicator7
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome*.deb

sudo apt-get update

# Download

ugiacoman

Whether your component relies on client-side features or you are using 3rd party components that are not designed for server-side rendering, sometimes you'll want to defer rendering until on the client. For our example, we'll be using react-chart-2 to load a Doughnut chart.

You'll need a next project and to install chart.js + react-chartjs-2.

$ npm install --save chart.js react-chartjs-2  

outofcoffee

/*
 * Publish a Kotlin module to an S3 Maven repository, using Gradle.
 * This assumes that the AWS/IAM credentials have 'bucket list' as well as 'object put' and 'object get' permissions.
 */

ext.version_kotlin = '1.0.5-2'

buildscript {
    repositories {
        mavenCentral()