Franz Liedke franzliedke

Avoid has_many/one + belongs_to circular dependency

This is based on the use of Shopify's packwerk.

Asuming we have a posting pack with a Post model and a commenting pack with a Comment model, and we want the commenting pack to have a declared dependency on the posting pack, then here's a pattern to avoid the has_many :comments usual declaration on the Post model while still being able to have very similar functionality to the dependent option to react/restrict when a post is destroyed.

If you need to fetch a post's comments, you can simply use Comments.where(post: @post) instead of the

Why I use web components

This is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.

Let's start by defining what we are talking about.

The Web Components Umbrella

As you can read in the dedicated GitHub page, Web Components is a group of features, where each feature works already by itself, and it doesn't need other features of the group to be already usable, or useful.

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

Notes

This is the latest version of an email which I send periodically, offering customers the opportunity to pre-pay for SaaS in return for a discount. The benefits to the SaaS company are better cash flow and reduced churn rate. The benefits to the customer are, well, in the email. This genre of email has produced hundreds of thousands of dollars in pre-pays for some companies I work with, and it rarely requires any more work than this example.

I've put $79 is as a placeholder for the cost of the user's plan. We calculate that for each account, naturally, along with the billing contact's name.

Subject: Save $79 on Appointment Reminder (and get a tax write-off) Formatting: 100% plain text. Gmail automatically links up the central link. From: Patrick McKenzie (Appointment Reminder) [email protected]

Timezone

Check your current timezone with date in the command line. You should get something like this. Fri Oct 3 10.32:13 UTC 2014 where UTC is your current timezone.
To change your timezone just run sudo dpkg-reconfigure tzdata and follow the instructions. Easy!
Check the timezone again with date. Now your timezone should be in this example CEST

Locale

Homestead provides an Ubuntu System and has by default only english locales installed. In PHP locales are important if you work for example with strftime. Check the currently installed locales with locale -a. To add a new locale, you have to generate it. For example for a german locale enter sudo locale-gen de_DE.UTF-8

	(function (context, trackingId, options) {
	const history = context.history;
	const doc = document;
	const nav = navigator \|\| {};
	const storage = localStorage;
	const encode = encodeURIComponent;
	const pushState = history.pushState;
	const typeException = 'exception';
	const generateId = () => Math.random().toString(36);
	const getId = () => {

	// Implementation in ES6
	function pagination(c, m) {
	var current = c,
	last = m,
	delta = 2,
	left = current - delta,
	right = current + delta + 1,
	range = [],
	rangeWithDots = [],
	l;

	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}