Medium is a wonderful network and editorial platform that allows anyone to share their stories and their ideas. It allows those who donÃÂâÃÂÃÂÃÂÃÂt want to run a full blog to publish their content easily. If you do want to start a full blog without the overhead of buying hosting or running a WordPress site, it is super easy to power your blog with a custom domainArchived Link through Medium. This means you can buy your own site name (i.e. http://amandagrimmett.com) and the Medium publication will show up there. Here is what you need to do:
Fill out this form with your publicationÃÂâÃÂÃÂÃÂÃÂs URL and what custom domain you want to point to it.
Medium will respond within 12 hours with a list of A records and a CNAME record that youÃÂâÃÂÃÂÃÂÃÂll need to add to your registrar. Here is a cheatsheet for you and MediumÃÂâÃÂÃÂÃÂÃÂs support pageArchived Link. This is a bit of a pain, but thankfully a good registrar like Hover can do this for you. HoverÃÂâÃÂÃÂÃÂÃÂs new Connect service presets the 12 A records for you and steps you through setting a CNAME record.
Within a few hours your domain will point to your Medium publication and your blog will be live!
I just set one up this weekend for my wifeÃÂâÃÂÃÂÃÂÃÂs awesome new blog. I couldnÃÂâÃÂÃÂÃÂÃÂt believe how simple it was. My only frustration was the wait time between submitting the request and getting a response from Medium. It was a weekend though, so I canÃÂâÃÂÃÂÃÂÃÂt complain.
Once it is set up, you log in through Medium and publish to it through the Medium platform. It has the benefit of being tied in to the entire Medium ecosystem, so sharing, commenting, and gaining followers is easy. You are constrained to the limits of their platform, but it does have some customization optionsArchived Link. This is perfect for those of you focusing on your writing.
Did you know that you can pre-fill Google Forms based on a URL? Did you also know that if you have a basic example you can automate it with a database and send personalized forms?
General Instructions
On your form, click the vertical ellipses in the upper right corner to reveal the menu.
Click âGet pre-filled linkâ
This shoots you over to a page where you can fill in the fields you want pre-filled and it will generate a URL for you. Copy this. If you want the link you send out to everyone to have the same pre-filled info, your work is done. Send the link out!
How you might automate it
Here is my example form.Once I went through the above steps to get a pre-filled link, here is what I got:
As you can see, those are the items I filled in on my own. How might one automate this, then? Here are a few suggestions:
Using handlebars or Liquid, fill them in with the appropriate expressions and use the appropriate objects to fill them in: https://docs.google.com/forms/d/1nuxTbnUGkTaZw1uGIXXgqfx3hYRi3ZaPahdwDNEgy3Q/viewform?entry.2005620554={{name}}&entry.1045781291={{email}}&entry.1065046570={{address}}&entry.1166974658={{phone}}&entry.839337160={{comments}}
Using PHP, you might assign variables for these items and fill them in from your database with a select statement: https://docs.google.com/forms/d/1nuxTbnUGkTaZw1uGIXXgqfx3hYRi3ZaPahdwDNEgy3Q/viewform?entry.2005620554=$name&entry.1045781291=$email&entry.1065046570=$address&entry.1166974658=$phone&entry.839337160=$comments
On Mailchimp, youâd have to use Merge Tags: https://docs.google.com/forms/d/1nuxTbnUGkTaZw1uGIXXgqfx3hYRi3ZaPahdwDNEgy3Q/viewform?entry.2005620554=*|name|*&entry.1045781291=*|email|*&entry.1065046570=*|address|*&entry.1166974658=*|phone|*&entry.839337160=*|comments|*
Note: Make sure you are URL encoding things with weird characters and spaces like an address. Example: 308+Negra+Arroyo+Lane,+Albuquerque,+NM+87114 vs 308 Negra Arroyo Lane, Albuquerque, NM 87114
Completion of the code in 1, 2, and 3 is an instruction left to the reader. Iâm assuming that if you want to do something like generate thousands of personalized URLs to a form, you probably already have a database and know how to use it. I hope this guides you in the right direction! Email meArchived Link if you want some help.
The best time to learn how to handle crises is right after you just had one. Analyze what happened, what you did to solve it, and then make a checklist for when it happens next time.
Then, during your next crisis, take a deep breath and start jotting down notes of what is happening and what you are doing. This makes your post-game analysis easier to complete.
We had a mini crisis at work today: Some of our sites weren’t connecting to our MySQL servers and we couldn’t figure out why. The problem was intermittent. Our sysadmin is on vacation, so a few of us had to jump in and try to figure it out. When we were in a holding pattern while waiting for our hosting provider to call us back, I made a checklist of what we need to do the next time this happens. This took into account what we had to figure out on the spot, look up, diagnose, and what we learned. Now we have it for the future.
H/T to Episode 279 of Back to Work with Merlin Mann and Dan Benjamin. I listened to it this morning and their discussion of making checklists while traveling for travel made me think of doing this during the MySQL issues.
Today I learned about jQuery’s greater than selector, :gt().
The :gt() selector selects elements with an index number higher than a specified number. The index numbers start at 0.
I’m using this selector to hide more than 10 recent posts on my TIL page. Each of these posts is inside a list item (li) and a child of the unordered list (ul) with a class called “recent”. I then added a toggle function on a button to show them again by using the same selector.
Example:
$(document).ready(function(){$("ul.recent").find("li:gt(9)").hide();$("ul.recent").has("li:nth-child(10)").after(""showhide button" >Show/Hide all TIL posts");$("a.showhide").click(function(){$("ul.recent").find("li:gt(9)").toggle("slow");$});});
There is also a less than selector in jQuery. It works similarly, except that it selects elements with an index number lower than the specified number. Syntax: :lt()
Note: Since I’m using a Jekyll site and generating that TIL list via Liquid, another solution is to set a counter after which it automatically adds a class directly to the HTML to hide those items that we can then toggle later. I think the jQuery solution is cleaner, though.
There are a lot more domain record terms than this, but these are the ones I most frequently encounter. I’ll add more as I run into them.
Records
Record
Description
Use
A
Address Record
Point a domain to a specific IP address
CNAME
Canonical Name Record
This is an alias of one name to another. Example: A CNAME of www.cagrimmett.com to cagrimmett.com tells the server to look for the WWW version wherever the non-WWW version’s A record resides. CNAME records must always point to another domain name, never directly to an IP address.
MX
Mail Exchange Record
Direct’s a domain’s email to the server hosting the accounts. I most frequently use this for setting up Google Apps.
NS
Name Server Record
Determines which servers will communicate DNS info for a domain. You usually have a primary and secondary. This site uses Cloudflare’s name servers.
Basically a phone book for the web. When you try to go to a domain (e.g. google.com) in your browser, the domain name system tells your browser where to find that domain, usually an IP address.
TTL
Time To Live
How long it will take any change you make now to go into effect
@
Self-referential character
You don’t use the actual domain name in your DNS settings. Instead, you use the @ symbol to indicate the domain name.
fname– I had to make this a snippet instead of putting it in directly because in the filename creation string TextExpander didn’t recognize the date string. If you nest it inside another snippet, it works just fine.
%Y-%m-%d-%filltext:name=title%.md
;tem
--- layout: post title: author: Chuck Grimmett date: %Y-%m-%d category: TIL feature-img: "/img/defaults/%snippet:;random-img%" tags: - excerpt: --- ### Today I learned:
Today I learned about Many-to-Many relationships in relational data models
A many-to-many relationship is a type of cardinality that refers to the relationship between two entities A and B in which A may contain a parent instance for which there are many children in B and vice versa.
For example, a recipe may have many ingredients and a specific ingredient may be used in many recipes.
In SQL, this relationship is handled by an associative table. The primary key for this type of table is composed of two different columns, both of which reference columns in other tables that you are associating together.
It is a good convention to name these associative tables by how they reference each other: Table1_Table2
A SELECT statement on an associative table usually involves JOINing the main table with the associative table.
If you don’t want to run these JOINs every time, create a view first. A view is a virtual table based on the result-set of an SQL statement. You can add SQL functions, WHERE, and JOIN statements to a view and present the data as if the data were coming from one single table.
Trifacta Wrangler is a free program (currently in beta) that helps you clean up data sets and gives you a first cut at basic analysis. It is great for quickly turning messy data into structured, manageable formats.
In the past few days I’ve used it to analyze huge log files and turn messy JSON in structured CSVs that I could import into SQL.
Quick tips:
splitrows always has to come first. The program usually tries to split by \n (new line) first, but that doesn’t always work for JSON. Try splitting by something like },{, or do a quick find and replace ( },{ for }|||{ ) and do the split by ||| if you want to keep the curly brackets for an unnest.
unnest is very powerful for splitting out JSON values out into separate columns titled by their keys.
flatten works better than unnest in cases where the JSON does not have keys. It creates new rows and repeats other values in adjacent columns to keep the relation. This works well if you have an ID column and are going to eventually stuff things into a relational database.
Hazel is a preference pane-based application that helps you automate organization on your Mac.
Within a few hours of using Hazel, I was able to clean out my 1000+ file Downloads folder, tame my unruly Desktop, get rid of all the trash that accumulated in my home folder, and organize my stashes of client files. I also set up rules for the future that will keep these places neat and orderly.
The next step is to turn my gaze on my photo library to create one master repository.
Data scientists notoriously hate word clouds. Besides for figuring out what the top 2-3 words are (because they are the biggest), it is difficult to see how much one word is used relative to another. Unfortunately, clients and non-data people love word clouds and sometimes insist on them. What is a self-respecting data nerd to do?
Pair it a word frequency chart!
The easiest way to do this is by using Python’s counter:
Counter(words).most_common()
Then you can use your favorite charting tool to make a bar chart of the results. I prefer D3.js.
Results
If you see both together, you get a better understanding of the words being used. Of course, a single word doesn’t always capture sentiment. They can be helpful in smaller data sets, but sometimes common phrases are more helpful in larger data sets. For common phrases, use n-gram analysis.
Ember.js is an open-source Javascript framework with the Model–view–viewmodel pattern.
Ember is an opinionated framework. This means that most architectural design decisions have been made for you by the developers of the framework. The advantage of this is that anyone who knows Ember can load your code and understand within a few minutes what is going on.
Core Concepts
Ember router maps a URL to a route handler
Route handler renders a template, then a model that is available to the template. Templates use Handlebars syntax.
Models save data in a “persistent state”, which is fancy language for putting it in a database or data store of some kind.
Components control how the UI behaves. They have two parts: A handlebars template and a javascript source file that defines the behavior.
Installing and running a project
Install:
$ npm install-g ember-cli@2.6
Creating a new app:
$ ember new
Starting the development server. You must be in the project folder (cd to it). It will serve on http://localhost:4200/
How to make link posts (or external post links) with Jekyll
I’m an avid reader of Marco.org and Daring Fireball. They both have these nifty posts that link directly to external pages. Now that I have two blogs, a podcast, and occasionally have work published elsewhere, I want to keep a record of these things on my cagrimmett.com blog. Link posts are an excellent way to do that.
Jekyll doesn’t have this capability out of the box, but with a little Liquid magic you can make it happen. I followed Christian-Frederik Voigt’s method. This takes advantage of the ability to create items in each post’s YAML front-matter and use them in template files:
First, create a variable called link: in your YAML front-matter for the post you want to link elsewhere. Fill it in with the link you want to post to link to:
Then anywhere in the template files that generates post headlines, you’ll need to write a conditional to check if the new link: variable is present. If it is, you’ll want to write the headline’s link there (post.link) instead of the post.url. I also added an arrow inside another conditional to specify that this is an outgoing link:
This method works great if you want to have direct links to other places and don’t want a permalink page on your own site that you can reference. I don’t care about that, so I didn’t make this for my site. If you want that, you’ll need to refer to Christian-Frederik Voigt’s method. The short story is that you’ll also need to modify the post and page templates.
Jekyll has a built-in filter called jsonify to turn data into JSON and Liquid has a filter called json. These is pretty useful for turning standard Jekyll output arrays into JSON, but if you need something more customized, you’ll need to build it yourself because Liquid’s ability to create arrays is limited. (Not a criticism, just an observation. It is primarily a templating language.)
For example, I wanted to store the dates I have blog posts for and the number of posts on each of those dates in order to pass it to a heatmap calendar. I couldn’t figure out a way to build that into a single array with Liquid (and I didn’t want to drop down into Ruby), so I figured out a way build JSON manually.
This outputs my blog’s post dates in the Unix timestamp format and displays the number of posts on a given day and leaves the trailing comma off to comply with the JSON standard:
The key to getting the counts right was advancing the counter by 1, comparing the date of the current post to the previous post, outputting the date and the count if they did not match, and if they did match advancing the counter by 1 and comparing again. After the date and count are output, the counter is reset to 0.
Thanks to Eric Davis for advice on using less code and pointing out how I can make the trailing comma if statement more efficient: %if forloop.last == false% , %endif%
He said:
If there’s one bit of “programming advice” I would give to anybody mucking around with this stuff, it’s this: Write as little code as humanly possible. The most bug-free line of code is the line not written.
What I need to ask myself: If something is being repeated, why?
I started a simple Python http server as a background process at the end of a Python script. That was a mistake. Since it isn’t running in an open Terminal window, it is easy to forget about and it will run until you kill the process or reboot your machine. I don’t like that.
Here is how to identify and kill background Python processes in Terminal.app:
Here is a minimalist responsive bar chart with quantity labels at the top of each bar and text wrapping of the food labels. It is actually responsive, it doesn’t merely scale the SVG proportionally, it keeps a fixed height and dynamically changes the width.
For simplicity I took the left scale off. All bars are proportional and are labeled anyway.
Go ahead and resize your window! This has a minimum width of about 530px because of the text labels. Any smaller than that and they are very difficult to read.
The basic HTML
id ="chartID">
The Styles
You’ll see that the axis is actually there but it is white. I found it useful to learn to draw it, but I didn’t want it so I am keeping it hidden.
vardata=[{"food":"Hotdogs","quantity":24},{"food":"Tacos","quantity":15},{"food":"Pizza","quantity":3},{"food":"Double Quarter Pounders with Cheese","quantity":2},{"food":"Omelets","quantity":30},{"food":"Falafel and Hummus","quantity":21},{"food":"Soylent","quantity":13}]
The Javascript Heavy Lifting
This is where D3 really comes in.
Setting the margins, sizes, and figuring out the basic scale.
Setting the axes
Drawing the basic SVG container with the proper size and margins
Scaling the axes
Drawing the bars themselves
varmargin={top:10,right:10,bottom:90,left:10};varwidth=960-margin.left-margin.right;varheight=500-margin.top-margin.bottom;varxScale=d3.scale.ordinal().rangeRoundBands([0,width],.03)varyScale=d3.scale.linear().range([height,0]);varxAxis=d3.svg.axis().scale(xScale).orient("bottom");varyAxis=d3.svg.axis().scale(yScale).orient("left");varsvgContainer=d3.select("#chartID").append("svg").attr("width",width+margin.left+margin.right).attr("height",height+margin.top+margin.bottom).append("g").attr("class","container").attr("transform","translate("+margin.left+","+margin.top+")");xScale.domain(data.map(function(d){returnd.food;}));yScale.domain([0,d3.max(data,function(d){returnd.quantity;})]);//xAxis. To put on the top, swap "(height)" with "-5" in the translate() statement. Then you'll have to change the margins above and the x,y attributes in the svgContainer.select('.x.axis') statement inside resize() below.varxAxis_g=svgContainer.append("g").attr("class","x axis").attr("transform","translate(0,"+(height)+")").call(xAxis).selectAll("text");// Uncomment this block if you want the y axis/*var yAxis_g = svgContainer.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6).attr("dy", ".71em") //.style("text-anchor", "end").text("Number of Applicatons"); */svgContainer.selectAll(".bar").data(data).enter().append("rect").attr("class","bar").attr("x",function(d){returnxScale(d.food);}).attr("width",xScale.rangeBand()).attr("y",function(d){returnyScale(d.quantity);}).attr("height",function(d){returnheight-yScale(d.quantity);});
Adding the quantity labels to the top of each bar
This took me a while to figure out because I was originally appending to the rect element. According to the SVG specs this is illegal, so I moved on to appending them after everything else to they’d show on top. The positioning is tricky, too. I eventually found the correct variables to position it close to center. Then text-anchor: middle; sealed the deal.
// Controls the text labels at the top of each bar. Partially repeated in the resize() function below for responsiveness.svgContainer.selectAll(".text").data(data).enter().append("text").attr("class","label").attr("x",(function(d){returnxScale(d.food)+xScale.rangeBand()/2;})).attr("y",function(d){returnyScale(d.quantity)+1;}).attr("dy",".75em").text(function(d){returnd.quantity;});
Responsiveness
The general method for making D3 charts responsive is to scale the SVG down proportionally as the window gets smaller by manipulating the viewBox and preserveAspectRatio attributes. But after digging around on Github for a while, I found a fancier solution that preserves the height and redraws the SVG as the width shrinks.
document.addEventListener("DOMContentLoaded",resize);d3.select(window).on('resize',resize);functionresize(){console.log('----resize function----');// update widthwidth=parseInt(d3.select('#chartID').style('width'),10);width=width-margin.left-margin.right;height=parseInt(d3.select("#chartID").style("height"));height=height-margin.top-margin.bottom;console.log('----resiz width----'+width);console.log('----resiz height----'+height);// resize the chartxScale.range([0,width]);xScale.rangeRoundBands([0,width],.03);yScale.range([height,0]);yAxis.ticks(Math.max(height/50,2));xAxis.ticks(Math.max(width/50,2));d3.select(svgContainer.node().parentNode).style('width',(width+margin.left+margin.right)+'px');svgContainer.selectAll('.bar').attr("x",function(d){returnxScale(d.food);}).attr("width",xScale.rangeBand());svgContainer.selectAll("text")// .attr("x", function(d) { return xScale(d.food); }).attr("x",(function(d){returnxScale(d.food)+xScale.rangeBand()/2;})).attr("y",function(d){returnyScale(d.quantity)+1;}).attr("dy",".75em");svgContainer.select('.x.axis').call(xAxis.orient('bottom')).selectAll("text").attr("y",10).call(wrap,xScale.rangeBand());// Swap the version below for the one above to disable rotating the titles// svgContainer.select('.x.axis').call(xAxis.orient('top')).selectAll("text").attr("x",55).attr("y",-25);}
Wrapping text labels
Wrapping text labels is tricky. The best solution I found is the one Mike Bostock (D3’s creator) describes. I modified it slightly to work with my chart, but the overall solution is the same.
I was asked to help out with some CSS animation. I thought it would be no problem. A few hours at most. Boy was I wrong.
The biggest issue I ran into was that an element that came in from the right (outside the boundaries was hidden by overflow) functioned just fine on desktop Safari and Chrome, but did not appear on iOS unless I ran the debugger and toggled overflow or display properties during the transition. position and z-index made no difference.
I came across this article while researching solutions. The ending shed some light for me:
ensure you don’t have a CSS property such as transform on the root element. It’s more than likely that this is creating a new stacking context for the enclosed elements.
Whelp, that sucks. CSS animations rely almost solely on the transform property to operate. I played around a few more hours trying different techniques with containers and positioning. The only thing that sort of worked was using translate3d() and keeping the element active and in view the entire time. Then and only then did it work the same on iOS and desktop. If it paused or was hidden even for a moment, I couldn’t get it to come back.
Safari on iOS is doing something funky with stacking when the transform property is involved and I couldn’t find any solid documentation on what is happening in order to come up with a good solution.
If anyone has faced this beast and won, please drop me a line! I can’t post the specific elements here because it was client work, but I’m happy to discuss it one-on-one.
