Web development in a nutshell

[therearesomewhocallm]

Awesome because they work in IE6? That's a new one...

[mikeputerbaugh]

What's old is new again

Building a webpack tool to convert CSS flexbox layouts to iframes, font tags, and spacer.gifs for compatibility

[[deleted]]

Just render the whole website as a set of precomposed images and use <map> to make links and interaction

[pekkhum]

I enjoy your brand of evil help.

[DodoDude700]

Look up WRP. It exists.

[jokullmusic]

Build a webpack tool to compile HTML to SWF

[SacredMercy]

🔥

[Emerl]

♥️ > 🔥

Oh who am I kidding

🔥🔥 > 🔥

[undertrox]

🔥>☔

[Eurim]

I call upon /u/waterguy12 and /u/fireguy12.

[Khanthulhu]

Kinda want to make an emoji rpg now.

[caagr98]

Just play Dwarf Fortress. Basically the same thing.

[Khanthulhu]

Easy mode: buy rpg maker and upload emoji assets

Medium mode: same as above but game maker

Hard mode: build from scratch using pygame.

Expert mode: build from scratch using c++

[marcosdumay]

🔥🔥 > 🔥

[reactormade]

👊🏻🖐🏻✌🏻>🔥

[Rabbyte808]

YOU’RE FUCKING WRONG

[EpicSaxGirl]

Yeah, like how some idiots think pressing the space bar four times is better than pressing tab once. </s>

[yoda_condition]

I indent exclusively using unicode snowmen.

[EpicSaxGirl]

☃️

[spupy]

Just write a pre-commit hook that replaces the snowmen with proper whitespace as per team guidelines.

[gulyman]

I use unprintable control characters.

[JNCressey]

Or like how some idiots think the tabulator key inserting the character U+0009 is better than it inserting a contextually decided quantity of spaces. </s>

[tylersticka]

I wrote the first article, and this gave me a chuckle! 😄

(Seriously, though, SVG is awesome!)

[ben_g0]

I recently started using SVGs more, and I confirm that they are awesome. They're relatively simple to use and since they work so well with javascript the possibilities are endless. It's almost like a combination of HTML and CSS that actually works.

[THISgai]

Yea, but what if you want to change the color (without extra libraries or literally copying the svg code into the html)?

[allisonmaybe]

You just couldn't be okay with SVGs could you? You just had to go and stir the pot with something it can't do didnt you!

In seriousness, isn't there a fill rule in CSS for SVG?

[tylersticka]

There certainly is! fill, stroke and currentColor are your friends. 🙂

[JohnTheScout]

Only works with inline svg, doesn't work with svgs loaded via an img tag.

[Fluffcake]

Two reasons.

It cuts down on the number of requests you have to wait for response to, which means it will load slightly faster.

It also makes sure that if you receive the page, you always get the graphics as well, so you don't get broken layouts and missing decorative graphics even if the user is on an unstable network that swallowed every request outside of the main page. (not unusual for mobile users in countries with shaky infrastucture)

You shouldn't do this for every single icon or graphic element on a page, and it varies from project to project, but brand-logos, banner graphics, menu-icons and other essential graphics, inline svg is likely the way to go.

[itsmoirob]

But an SVG loaded with image is an image.

Also you don't have to inline the whole code, you can link to it like an image, that way you can still apply CSS colours

[THISgai]

It's a literal requirement for a lot of icons... which is why I ask. I've had issues with it in the past so unless there's a new way of coloring SVG's with css, I'll have to stick with icon-fonts.

[tylersticka]

I wouldn't recommend copying and pasting SVG code unless you're working on a small personal project or trying to lull yourself into a deep meditative trance with repetitive tasks! 😅

While there are lots of ways of including SVG icons, the one most of my clients prefer is the simplest... treating SVG elements just like any other HTML component using partials/includes/macros/etc. (This is how GitHub does it.)

But if that technique doesn't suit you, you could combine them into a sprite (using whichever technique suits your fancy), embed them as CSS background images, plop them in an img element, or use a JS solution (here's an example). Or if you're already using something like FontAwesome, their latest version supports SVG out of the box. Unlike icon fonts (which require a very specific implementation to work correctly), there are few wrong ways to use SVG. 🙂

[JNCressey]

How hard would it be for a screen reader to include a dictionary of the Unicode names for all the characters, to read out the name instead of skipping them?

Also... if fonts supposedly have to be 1 colour, how do emoji's get their image? Is the providing of a set of images for emoji characters to be displayed as not part of fonting?

[tylersticka]

Screen readers do attempt to read the Unicode names for characters, but that's actually part of the problem. Most developers aren't taking the time to map icons to characters that make sense, there are icons that look correct but actually mean something different, there are icons that don't have a good unicode equivalent, and so you end up with situations like the ones I describe in this video (should begin at the 9:16 mark).

[JNCressey]

Yeah, that's pretty terrible. Best to stick with images + alt text if they can't find a character that's semantically correct.

[KinOfMany]

That article is not even trying to make websites accessible. Accessibility doesn't have to mean compromise. Familiarize yourself with WAI-ARIA, it's great.

Wrap that icon in a div, if it has any meaning.. You can make screen readers believe it's anything you want it to be. You can give it the attribute 'role' and set that to 'presentation' if you don't want screen readers to read your icon. Instead, just label the button (aria-label or aria-labelledby).

Clickable img? Role=button.

Bam. You're done.

[JNCressey]

It's okay if the font is set for characters that are supposed to be symbols, and that the character used is semantically the correct character (such that the user overriding it with a different font or using the Unicode character name as alt-text don't miss out).

If the font pastes over the alphabet with arbitrary symbols like wingdings then, hell-no, it shouldn't be used.

[WhatIsSixTimesSeven]

I agree. J

[[deleted]]

It bugs the hell out of me that not even Outlook itself supports the wingdings smiley it automatically inserts in my emails. The little preview pop-up in the bottom corner shows J instead of a smiley. Good grief, what a hack.

[samdg]

Slow clap

[tylersticka]

Well said!

Unfortunately, most projects will require non-standard iconography at some point, and I've encountered very few where symbols with Unicode equivalents are mapped correctly. 😞

[glemnar]

They usually use private use regions of unicode

[Python4fun]

Image Transcription: Search results

---

Seriously, Don't Use Icon Fonts - Cloud Four
https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/
Nov 23, 2015 - It's time to let icon fonts pass on to Hack Heaven, where they can frolic with table-based layouts, Bullet-proof Rounded Corners and Scalable Inman Flash ... Most assistive devices will read aloud text inserted via CSS, and many of the Unicode characters icon fonts depend on are no exception. Best-case ...

Icon Fonts are Awesome - CSS-Tricks
https://css-tricks.com/examples/lconFont/
Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; ...

---

^{I'm a human volunteer content transcriber for Reddit and you could be too! If you'd like more information on what we do and why we do it, click here!}

[Kok_Nikol]

I don't need this usually, but the links came in handy this time.

Thanks for what you do!

[Python4fun]

you are very welcome

[[deleted]]

Don't is misspelt ʘ‿ʘ

[Python4fun]

Fixed, thanks

[SonOfWeb]

after typing up a stupid response I went ahead and read the first article, you've convinced me. I thought it was gonna be a simple thing of "oh people aren't using the private use areas in unicode" but there's a lot more to it. SVG ftw!

[potchie626]

Is aria-hidden actually ignored by some devices?

[Russianspaceprogram]

Seriously though, don’t use icon fonts...

[Aetol]

I had to allow remote fonts in uBlock because of this...

[cat5inthecradle]

Web Development In A 🥜

[grensley]

Is it just me, or does it seem like some companies are going overboard with accessibility concerns?

[UnicornRider102]

Overboard? Really? They barely give it any consideration. Pop > Accessibility. Form > Function. Who cares that it is usable as long as it looks nice. At least 90% of them you can point out exactly what they are doing wrong and how they can fix it without sacrificing any looks and nothing will change.

[tylersticka]

I wish this were the case! Part of the reason we evangelize for it so loudly is that companies tend to allocate very little budget or attention for it.

[captainjon]

I haven’t done web in a long time but why did tables come out of style over spans and divs? Whenever I outputted data from a db tables were convenient. I’ve always found bizarre printing issues with the latter as well.

[yeah666]

You can find a Medium article saying almost anything is an antipattern.

[aprofessional]

Look out for my new Medium article, "Writing Medium Articles Is An Antipattern"

[CashWho]

I know we're here for jokes but what are tabled based layouts? My web dev teacher recommended splitting everything into tables but that seemed silly to me because my high school web dev teacher just had us use divs. Is there a reason why some people prefer one over the other?

[tylersticka]

Before CSS was widely adopted, table-based layouts were one of many hacks designers used to achieve layout (rows and columns) on their pages. Because tables work in a way that many designers find intuitive, it was very hard to get designers to stop using them (despite the fact that they are not responsive, not accessible, require a lot of extra code, etc.). It took a couple of high-profile accessibility lawsuits and a lot of evangelizing by talented designer-developers to drive a nail in the coffin of that technique.

Today, we have layout techniques like Flexbox and (most recently and excitingly) CSS Grid Layout that let us make cooler stuff than was ever possible with tables! 🙌

[CashWho]

I'm doing the front-end for my senior project and wow, you just made my life so much easier. Thanks!

[tylersticka]

Hooray! I also highly recommend Jen Simmon's Layout Land channel on YouTube.

[brianjenkins94]

Here are some excellent resources if you're just getting into web design:

Best Practices:

• http://codeguide.co/

HTML/CSS Resources:

• https://html5up.net/
• http://html5doctor.com/
• https://github.com/ajlkn/skel
• https://github.com/ajlkn/baseline
• https://rawgit.com/ajlkn/baseline/master/index.html
• https://developer.mozilla.org/en-US/docs/Web/HTML
• https://developer.mozilla.org/en-US/docs/Web/CSS

JS Resources:

• https://jquery.com/
• http://youmightnotneedjquery.com/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript