Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Heskie
Aug 10, 2002
I'm rebuilding an e-commerce store I built about 5 years ago which supported IE6. Analytics for the last 12 months says IE usage is very low and dropping.

Since November 2013:
  • IE7 (0.15%)
  • IE8 (1.11%)
  • IE9 (1.05%)
  • IE10 (1.56%)
  • IE11 (2.68%)

Since April 2014:
  • IE7 (0.19%)
  • IE8 (0.80%)
  • IE9 (1.00%)
  • IE10 (0.75%)
  • IE11 (3.87%)

(The overall hits are like 300/day, so its a small percentage of a small number)

It was a bit of a suprise. I'd originally set out to support IE8 but after looking at the stats I'm not so sure? It'd be nice to actually use stuff like Flexbox on a real project, but I'm hesitant as I'm used to supporting IE7/8.

Would you regard these numbers low enough to drop IE7-10 support?

Heskie fucked around with this message at 11:36 on Nov 10, 2014

Adbot
ADBOT LOVES YOU

Heskie
Aug 10, 2002

Funking Giblet posted:

Do you have the conversion rates of each?

Unfortunately not but thats a good point. Setting up proper e-commerce Analytics support is one of the big things on my todo list.

Its a handcrafted jewellery store and fashion blog. A lot of the traffic are on Macs, smartphones and tablets so I'm going to go out on a limb and predict legacy IE sales to be low to zero. Safari (in-app) has a higher usage than all versions of IE combined. One of the big reasons for the redesign is the site is 5 years old and unresponsive. Its funny, I remember at the time using a HTML5 doctype was cutting edge :science:

At this point I feel like I'm begging the question and just looking for permission :shobon:

Heskie
Aug 10, 2002

pokeyman posted:

It never occurred to me to wonder what the opposite of "a responsive design" is. I'm not sure unresponsive fits very well (though obviously I knew what you meant), is there another term that people use?

Heh yeah. I was struggling to word it but 'non-responsive' and 'is not responsive' are just as bad and sound as if the website is down.

bpower posted:

I've just finished my first month in web dev after years in desktop client/server stuff. Jesus Christ theres so much to learn :psyduck:.

I hope you like package managers!

Heskie
Aug 10, 2002

kedo posted:

Exactly. Susy! SUSY! I love it.

Susy is great though I still find it a little restrictive. I spent ages trying to create a very simple masonry layout (gallery grid but with some items spanning 2 rows, fluid widths, fixed gutters). Eventually I conceded and manually built it with CSS/Sass in 5 minutes.

I don't know if its because I'm very comfortable with CSS or I've not quite 'got' grid frameworks, but is that something you've ever come across?

Heskie
Aug 10, 2002

streetlamp posted:

Can you throw up a quick codepen of it in SASS? Susy is pretty drat open to doing whatever you want it do.

fake edit: like this? http://www.zell-weekeat.com/smarter-layouts-with-susy/

Sort of like that but where some grid items span 2 rows (vertically) rather than 2 columns.

My first attempt was on a prototype but I'll be doing the real thing tomorrow. I'll give Susy another go and see if I fare any better.

I know Masonry/Isotope would make this trivial but I really hate relying on JS for this sort of thing.

Heskie
Aug 10, 2002

Bastard posted:

First one is easy: all modern/most used browsers so IE10 and up, latest version of Chrome, FF, Safari, iOS and Android. The thing I encountered in Android was that while it worked on the iPhone and desktop, on the Android device (a Galaxy I think) it basically looked like somebody unsuccessfully played Jenga with the DOM structure :saddowns:. Everything was just all over the place.

But then again, that was late at night so I'll have a crack at it again sometime.

I've been trying Flexbox on a recent project. Solved By Flexbox has some good information and the syntax (using Autoprefix) is nice to work with after years of floats and clearfix. That said, I've found myself going back to floats/inline-blocks more than I'd expect. I went into the project thinking that it would solve all my layout problems but in reality that's not the case. Its another tool to add your toolkit rather than being a silver bullet to CSS layout.

Speaking of layouts - I got back into using Susy and while I really like it my Sass compilation (gulp-ruby-sass) times are up to 6-8 seconds and increasing. I use BrowserSync on several devices and its very frustrating waiting for the Sass to compile every little change. I temporarily removed Susy and they went down to about 1.5-2s.

I looked into Libsass (gulp-sass) but it doesn't have Sass 3.3 features which Susy and a number of other Sass extensions (Neat, Breakpoint etc) require. For reference the compilation time is about 80ms on Libsass without Susy. For now I've dropped Ruby Sass, Susy and Breakpoint and I'm trying Libsass with sass-mq (pre Sass 3.3 version).

I like Susy though and would prefer to keep using it but with lower compilation times. Are these the sort of Sass compilation times the norm?

Heskie
Aug 10, 2002

The Wizard of Poz posted:

Thanks for that, but I think we're talking about two different things. The people on that SO question are talking about how to organise things so that they can keep their LESS files separate - this isn't a problem for me, I've got that part sorted. What I want is two separate CSS files to be output by the LESS processor. One with all the default style declarations, and a second one with just colour declarations. To do this I'm going to need to somehow come up with a LESS file that contains ONLY colour declarations - I was wondering if there's an easy way to do this or is it going to be a long manual process?

I don't think LESS has an equivalent of Sass' !default but could you @import the Bootstrap variables, then @import the custom LESS file (overriding previously set Bootstrap colours etc) and finally import the rest of Bootstrap.

Is the problem that the users wont/can't/don't use LESS so they need a vanilla CSS file to work with? Otherwise that SO answer should work if I'm understanding correctly?

I've never actually used Bootstrap for a project though so I might be well off the mark!

Heskie
Aug 10, 2002

YO MAMA HEAD posted:

Has anyone else used Craft CMS? I used it on a few small projects that benefited from its blank-slate-ness and liked the idea of being able to define all of my own custom fields, but had some issues with its (reported?) memory usage on my hosting.

Craft CMS looks great. The only barrier I see really is the license, its similar to EE that way.

That said, I'm always surprised how little attention Symphony CMS gets. I've always suspected that if it used Twig or even Smarty rather than XSLT it would have been much more popular. Whenever I've built a client's website with it, they've instantly 'got' it.

I do really like WordPress, but its nice to have 100% control of front-end markup and the admin panel in Symphony (without relying on filters to cut back on stuff before you've even begun).

Heskie
Aug 10, 2002

The Wizard of Poz posted:

I'm trying to achieve something fairly simple, but notoriously fiddly. I want to have select lists that are themed, but will still bring up the native select list UI on mobile. I have tried jQuery UI but that has it's own UI when the list is used, and not only that but it doesn't play nice with Angular. I tried Angular UI select lists but they don't work because they use a completely different syntax altogether so they won't fire the native select UI on mobile.

Surely this is a common enough requirement that there's a solution somewhere already? Someone? Anyone?

Check out this Codepen for a CSS only solution: http://codepen.io/ericrasch/pen/zjDBx

This is how I handled it on my latest project. Basically you wrap the select in a <div>, hide the overflow, set the select width to a value greater than 100% and use a no-repeatable background for the styled arrow.

I made a couple of slight modifications though, like positioning the arrow background with calc(). i.e.calc(100% - 20px) to position 20px from the right.

Its cross-browser and the select box works as expected using the device's native controls, all without relying on JS. It also means the browser will handle edge cases such as the menu appearing outside the browser window if required (see http://www.hanseri.no/a-closer-look-at-the-select-element/)

Heskie fucked around with this message at 15:19 on Dec 3, 2014

Heskie
Aug 10, 2002

caiman posted:

SVG and IE8

I'm looking at SVG's at the moment and came across this fallback technique:

code:
<img src="image.svg" onerror="this.src=image.png">
or

code:
if (!Modernizr.svg) { $("img[src$='.svg']") .attr("src", $this.src.replace("svg","png")); }
Obviously this doesnt account for inline <svg> tags though. Do you have a good resource on handling svg sprites?

edit:
Found a CSS Tricks list of SVG information, pretty handy since all my Googling was filled with pages of SVG Icon sets rather than useful info.

Heskie fucked around with this message at 12:44 on Dec 10, 2014

Heskie
Aug 10, 2002

caiman posted:

One thing I'm becoming more and more thankful for is that I'm not a "I'm a designer only" person. Those guys are kinda in a lovely situation right now.

While I can sympathise, anyone designing websites needs to recognise the medium is unique, concede that pixel perfection is a pipe-dream and educate themselves in whats possible. Responsive design has been a huge part of this for 3 or 4 years now and shouldn't just be brushed off as the developer's problem, it affects every part of the process nowadays as v1nce's post shows.

The designers at one of my old agencies used to give PSDs in cms and 300dpi while kicking back with requests like "set the text to use 'Crisp' like in the PSD". This was nearly 3 years ago though and thankfully they learnt to adapt.

A technique I quite like is Dan Mall's Element Collages, designing components rather than entire pages suits responsive design quite well.

Heskie
Aug 10, 2002
Anyone got any success using a 'living' style guide? I've looked at KSS, Pattern Lab and a few others but I'm still undecided how to approach it.

This would be for some solo projects so I'm more interested in building and consolidating modular components (i.e. Atomic Design / SMACSS etc) rather than documenting the (S)CSS for a team.

Heskie
Aug 10, 2002

kedo posted:

Style Guide stuff


RobertKerans posted:

Style Guide stuff

Cheers guys.

After wasting way too much time looking into this I came to the same conclusions. Huge unmaintainable docblocks, forced directory structures or convoluted tools (I really like the concept behind Pattern Lab but it does feel very rough) that aren't very practical.

I'm going to try Styleguide Boilerplate. Its a simple php page that acts as a starting point for a process similar to what you guys suggest. It gives a simple layout and loops through imported .html files (displaying the component and the markup). Easy to modify and use, no nonsense etc.

Heskie fucked around with this message at 10:41 on Jan 14, 2015

Heskie
Aug 10, 2002

fletcher posted:

Be sure to check out this extremely helpful post about how to get an A+ rating from SSL labs with nginx.

https://mozilla.github.io/server-side-tls/ssl-config-generator/

This is also a very useful tool.

Heskie
Aug 10, 2002

me your dad posted:

What CSS property would I use to prevent words from breaking and hyphenating in different display sizes? Basically, if a word is too long, it should break to a new line.

Whenever I've had to do this I've put a nbsp between the two words instead of a space. They'll then wrap together as a single word.

Its not the most elegant solution, sure, but its simple and works.

Heskie
Aug 10, 2002
Some typefaces just weren't made for the screen and render poorly at small (and pixel rather than point) sizes as I understand it.Browser/OS differences just add to that.

Using something like TypeKit would have been ideal. I've used typography.com in the past which worked well.

Maybe take a look at this page if you need to convince them that you need to be looking at fonts made for screens rather than print: http://www.typography.com/cloud/the-fonts/index.php#screensmart-fonts

Heskie
Aug 10, 2002

kedo posted:

e: I'm super familiar with WordPress, so... WooCommerce? Any opinions on it?

WooCommerce could be okay depending on your requirements. I rebuilt a store recently and gave it a long glance while weighing up my options.

Unfortunately for me it was a non-starter as some of the stuff I'd personally consider basic functionality, like table rate shipping, were only included as premium plugins (at $199/yr each for licenses) or from third party devs.

Eventually I stuck with Prestashop (don't use Prestashop), as although there's many things I dislike about it, it had all the features I needed out of the box.

I've been trying to find an ecommerce platform I like for years, and have tried many, but not found it yet.

Heskie
Aug 10, 2002

fuf posted:

It was this block:

code:
.
location ~* ^.+\.(xml|ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
    expires max;
}
Removing xml from set of matched extensions fixed the rewrite. But why would setting expiration headers give a 404? :confused:

I had the same issue with a .html rewrite, where nginx would match the file ending to my static file caching location block and never reach the rewrite.

Take a look at this stack overflow answer: http://stackoverflow.com/a/5238430

I believe nginx prioritises location blocks based on the selector. I think in your situation '/sitemap.xml' is matching your regex caching location block (location ~* ^.\.(....), and never actually bothering to look beyond it ('location /') to see the rewrite.

I can't remember the exact solution but maybe you could nest your regex static file location block inside your 'location /' block, or have a location block that matches sitemap.xml exactly (i.e. location = /sitemap.xml {})

Heskie
Aug 10, 2002

Skandranon posted:

There is a TortoiseGit UI, have you tried to get the Windows users to use that?

SourceTree and SmartGIT are good options too.

Heskie
Aug 10, 2002

nexus6 posted:

I agree and my next post was going to ask for any recommendations for flat and/or minimal CMS options. There seem to be quite a few so does anybody have any experience/opinions one way or the other?

If you're using PHP I've built a few sites with Sculpin (https://sculpin.io/). Its really simple, utilises Composer etc.

Heskie
Aug 10, 2002

v1nce posted:

Anyone got any pro tips related to REST/HATEOAS API design, implementation, authentication, etc? Broad articles welcome, best practices, examples of systems you like, or anything related to dropping one on Symfony2 would be ace.

This might help https://leanpub.com/build-apis-you-wont-hate

Heskie
Aug 10, 2002

fuf posted:

If I'm hosting video do I still need an mp4 (h264), webm and ogg version for each one? Or can I get away with just mp4 now? It's for a designer portfolio so I imagine most of the visitors will have updated browsers...

I'd honestly consider hosting videos on YouTube and disable all their UI. They allow a good deal of customisation on the embed nowdays https://developers.google.com/youtube/player_parameters?hl=en#Parameters

Heskie
Aug 10, 2002

Leshy posted:

CSS variables stuff

Just seen this article in a newsletter that may help you out:
https://justmarkup.com/log/2016/02/theme-switcher-using-css-custom-properties/

Heskie
Aug 10, 2002
I used to be big on BEM, SMACSS, Atomic Design etc and other sorts of architectures/conventions, and worry about whether something was an atom or a component or a module or a utility or a 'base' etc etc

Mark Otto (of Bootstrap fame) has some nice guidelines here: http://codeguide.co/. Personally I've started to prefer this much more simplistic approach and stops my decision paralyses on where poo poo should go.

If you're more into BEM and work on much bigger projects, Harry Roberts' CSS Guidelines is very good: http://cssguidelin.es/

Heskie
Aug 10, 2002

nexus6 posted:

What genius at Wordpress thought it was a great idea (and still is) to store absolute URLs in the database? How are you supposed to set up a separate staging/test/preview site without doing a search and replace on the entire database?

Is their development philosophy "gently caress it, we'll do it live"?

You can override the Database values with WP_HOME and WP_SITEURL.

Use something like phpdotenv and you can set these as environment variables, or use seperate config files per environment.

Better yet, take a look at roots/bedrock, which is about as good as WordPress allows in terms of a sane project structure.

Heskie
Aug 10, 2002
Also if you use Autoprefixer (or similar) you can support IE10. But I think that's about as good as it gets.

Heskie
Aug 10, 2002

Jabor posted:

All of those "clever tricks" you try to fool spambots with are basically just an easy way to make your site completely unusable by anyone that relies on a screen reader or other assistive technology in order to use their computer. Please don't do that.

What are your alternatives?

Heskie
Aug 10, 2002
I'm a bit confused by this as I write html/body tags constantly for the layouts and partials that my framework or static site generator. Yeah its not an .html file but I couldn't imagine going years without rewriting a body tag unless I worked on the same product for all those years that all extended from the same single layout file that never got updated.

I used an iframe yesterday to make a 'preview panel' in an admin interface to show how something appeared to the customer by literally displaying what the customer saw in a borderless iframe. Also tables are good for tabular data :v:.

HTML is cool and good.

Heskie
Aug 10, 2002

McGlockenshire posted:

I'm looking for modern, maintained Javascript libraries to perform data binding (the synchronization of an object with HTML elements or values) and related UI-centric operations. I'm not looking for tools to build a single-page application.

Right now it looks like my only sane options are Rivets and Vue.

The library must stand alone. No external library requirements. No build tools. No package managers. The project lead doesn't want to add additional tooling right now. If I can't commit the complete library to our source control, I'm not going to be able to use it.

I'd go with Vue as I've used it with PHP/Laravel for a long time now and really like it.

Whats stopping you from using Vue or Rivets?

Heskie
Aug 10, 2002

The Wizard of Poz posted:

Pretty sure this one is fine now, with the advent of HTML5. If I'm wrong though I welcome the correction.

Semantically it is fine, but I think it still matters in terms of SEO which is a shame.

Adbot
ADBOT LOVES YOU

Heskie
Aug 10, 2002

kedo posted:

CSS frameworks are dumb and you shouldn't use them.

I used to agree with this completely, until I realised how much more productive I was using a framework.

Now I just see it as an extension of using something like Normalize. I can carry the conventions between projects and teams. Even when I was using BEM for everything, I'd often name components slightly differently between projects which was always annoying when I came back 12 months later.

ddiddles posted:

Is there any good blog posts/tutorials on building your own grid system? I've always used a framework like Skeleton, but I want to actually learn how it all works.

This is an oldie but goodie https://css-tricks.com/dont-overthink-it-grids/

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply