120: Rapidfire 32

01:05:37   Download

This week it’s another RAPID-FIRE!!! Nothing but the best darn question and answer you’ve ever heard!

We talked about (roughly in order):

Q & A:

  • 1:28 How can I achieve HTML includes or imports without using any php or javascript? I know that Codekit has a Kit language that can do this but I don’t have a mac yet. Is there a HTML preprocessors that can do this? If so, can I use only the import function and still use regular HTML on it?
  • 8:56 Picture this: Client organization has a CMS and puts all their ‘news’ content in. Monthly they need to generate a paper newsletter… They push ONE BUTTON and a multi-page pdf, at least as beautiful as the site, is generated with all of their news content… Has anyone tried this?
  • 17:03 What’s the best way to compress a vector graphic from Illustrator for the web? There used to be a SVG option for “Save for Web and Devices” but it’s gone in CS6. What SVG specs are best to use?
  • 22:43 I’m starting to hear the phrase “Tech Bubble” a lot and it’s very disheartening. Do you guys believe we’re in a tech bubble? If so, is it we the web developers/designers who have to worry? Or is it more threatening to investors, entrepreneurs, and 30 y/o billionaires?
  • 32:30 I’m about to start working at a full time job where the team uses Git. Do you have any advice about workflow or etiquette?
  • 39:34 I’m a developer at a mid-sized SaaS company and we have a pretty successful product. Our product has an API and there are several other companies that sell web site integrations & 3rd party plugins to our customers. Our company even receives fees to recommend certain “preferred partners”. Do you think it would be unethical or a conflict of interest for me to develop my own premium WordPress plugin on my own time?
  • 47:47 I’m currently working in a project and the design calls for use of full-screen image backgrounds, in order to optimize this for mobile devices I’m using media queries to call the appropriate background, it works like a charm, however there is something that bothers me, if I resize the window there’s a small bit of time where the webpage has no background while the image get’s loaded. Any way around this?
  • 51:51 Why aren’t box-shadow and text-shadow shorthand properties like background and font? Why don’t the properties box-shadow-color, box-shadow-offset, etc. exist?
  • 58:09 My question is about Print Stylesheets. Are they still relevant? How do you approach them?

Sponsors:

In this inaugural one-day conference, we look at the State of Craft and deep dive into a series of presentations to give attendees smarter and faster ways to build the web.

Bring the experts to your desktop June 17th from 9AM to 5PM (CT). Use coupon code “Shoptalk” at checkout for a special discount!

  • Environments For Humans: WP Summit – Environments for Humans brings together some of the Web’s most notable experts in for an all-new, one-day only online conference all about WordPress, the WP Summit 2014! Bring the experts to your desktop June 18th from 9AM to 4PM (CT). Use coupon code “Shoptalk” at checkout for a special discount!

Show Links:

  • keithwyland

    I know of some large sites that use Apache SSI and the sites have 99.8% uptime requirements, so it can be solid production-wise. Where SSI breaks down for production code (IMO) is how super simple it is.

    It sounds like for the “caller’s” purposes (local testing, etc.) it is a nice simple solution that doesn’t require an additional language or tool or CLI and runs on something you’re probably already dependent on (an apache web server). There are some simple flow control options with it along with simple string variables.

    Here’s more info:
    http://httpd.apache.org/docs/current/howto/ssi.html

    • Dave Rupert

      > Where SSI breaks down for production code (IMO) is how super simple it is

      Interesting. I’m curious why you think a too simple solution would break down. Could you elaborate?

      • keithwyland

        To maybe state it a little more clearly: I think for simple things like the caller was asking about, it’s a great solution. When it comes to trying to use Apache SSI as a base for a full CMS, it’s too simple. Does that make sense?

        If you need more features than just including a file, then look elsewhere.

      • keithwyland

        A little more commentary…

        For the large sites I mentioned, they are just that: large. And the only concept of “CMS” for those sites is based around Apache SSI and directly editing HTML files whenever content needs to be updated, etc. So Apache SSI itself doesn’t have (IMO) what’s required to support the complexity of a huge amount of content and templates.
        5 page website? Sure, it’s just a header/footer and body.
        500 page website? Not so much.

  • Andy Barr

    I use HTML includes () on a daily basis for my work, they just need enabling in the IIS application pool and work exactly like Server Side Includes. We have a windows stack using ASP.

  • Brian Krogsgard

    I have a couple notes regarding the segment on the GPL and WordPress. You can totally fork something, but many commercial WordPress companies have trademarks on brand names and logos.

    So if you fork something and then don’t remove names/logos/certain assets, or if you re-use copyrighted documentation, etc, then you can still get hit with a DMCA takedown notice from that commercial company. This happens pretty often, and the big brands have trademarks in the US and Europe at least.

    That’s on top of the doucheyness of it, and the fact that most people tie updates to license keys these days. So in general it’s a pretty bad idea to buy stuff from unofficial sources.

  • For the person asking about includes. They might want to check out assemble.io? I haven’t played with it but I’ve been curious. http://assemble.io/

  • 47:47 – Javier asks about eliminating the flash when a background image changes as a result of a media query. I wrote about a hack for this using multiple-backgrounds on CSS-Tricks: http://css-tricks.com/the-layered-look/ Here’s a link on CodePen: http://codepen.io/collection/pgmbo/

  • Re: the inseparability of box-shadow “sub-properties”

    Could it have to do with the fact that you can apply multiple box shadows?

    Haven’t used it much, but my understanding is that box-shadow is really a *list* of shadows, *each* of which has x- and y- offsets, blur, color, etc. So, you could have something like:

    box-shadow: 2px 2px 2px #000, -2px -2px 2px #0cc;

    In that case, wouldn’t something like “box-shadow-color: purple” be ambiguous?

    • Dave Rupert

      You might be right. While you can’t comma separate with borders, CSS backgrounds you can with: x/y-offsets, colors, images, repetition, size, etc. You’d just need to comma separate in the same order.

      You’re probably right tho. Maybe no one put together a strong enough use case. Who knows.

      • Oh, duh, good point… didn’t even think about backgrounds.

  • I just had to solve a similar web to PDF problem myself for a client. You can make this as complex as you want but in the end I used a little library called WKHTMLtoPDF, based on khtml/webkit. It’s a great little library that basically acts like a web browser.

    You feed it a page size, the URL, and an output and it spits out a PDF. It takes a little trial and error to get it working but that’s pretty much with anything. Like Chris mentioned in the podcast, treat your CSS like a print stylesheet, using inches, points, etc.

    There’s a bunch of libraries that will render from say PHP, but I found a lot of them expect you to do it line-by-line and character by character, kind of like postscript—render this line here at 0,0 at font style whatever. So if you’re trying to make a piece of content that’s already formatted for the web, imagine trying to spit out the code necessary… It gets old fast. So KHTMLtopdf was a life saver here. Just be careful what you feed it… things like Typekit fonts won’t load and other little layout gotchas… YMMV

  • Clinton

    Regarding HTML includes, if you’re using gulpjs, it can be done with gulp-file-include. https://github.com/coderhaoxin/gulp-file-include