Pinboard (mlednor)

Elm: A Beginners' Guide to Elm and Data - SitePoint Premium

mlednor — 2017-03-17T06:40:13+00:00

lm, a front-end functional programming language for web apps Front-end developers have many considerations to make when working with web apps and sites. Once you’ve set up the perfect environment with the right libraries and tools, you’ll have to figure out the coding techniques you’ll apply. What if there was a way to build a web app that would just let you focus on… just building the web app? Elm is a functional programming language that compiles to HTML, CSS and JavaScript — error free. How? Its strong static typing system and time machine process allow you to crush bugs through reproducible and predictive debugging. Not to mention, Elm’s immutable data structures and compile time error reporting will help you save time and build a solid and robust app. There are many reasons why you’d want to start learning Elm! In our new mini course, we’ll show you how to get started with Elm, how to understand and work with Elm’s data structures, and how to continue learning. Our course barely scratches the surface of Elm, but we will give you everything you need to kick-start your new future with Elm. This mini-course is perfect for those who know HTML, CSS and JavaScript and ready to take their front-end development skills to the next level with some functional programming with Elm.

Palette Town | Sass Mixin for Generating Color Palettes

mlednor — 2016-06-19T17:19:16+00:00

Sass Mixin for Generating Color Palettes. Sick of putting together a whole bunch of variables to build or prototype something? I am. So I made a color palette generator in Sass. You can use it too, if you'd like. It's pretty simple, just include the mixin, pass in your color and which type of palette you'd like to create, and voila! A whole bunch of friendly variables are at your disposal for your stylesheets. The mixin will generate the colors by not only adjusting the hues according to the type, but it will mix the original color back in at 15% in order to create a consistent color palette. With each color comes shades of that color. Dark shades are slightly desturated, and light shades are slightly more saturated.

BEM

mlednor — 2016-06-03T15:46:40+00:00

BEM methodology was invented at Yandex to develop sites which should be launched fast and supported for a long time. It helps to create extendable and reusable interface components.

Gutenberg — A Meaningful Web Typography Starter Kit

mlednor — 2016-03-01T07:55:52+00:00

Gutenberg is a flexible and simple–to–use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).

State of Web Type

mlednor — 2015-10-28T08:30:38+00:00

Up-to-date data on support for type and typographic features on the web.

Accelerated Mobile Pages Project

mlednor — 2015-10-09T12:21:29+00:00

For many, reading on the mobile web is a slow, clunky and frustrating experience - but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.

davidmerfield/Typeset

mlednor — 2015-09-12T20:17:38+00:00

An html pre-processor for web typography

wentin/underlineJS

mlednor — 2015-09-05T07:20:27+00:00

Pushing the boundary of browser typography rendering!

HugoGiraudel/sass-boilerplate

mlednor — 2015-07-12T11:20:10+00:00

A boilerplate for Sass projects using the 7-1 architecture pattern.

purifycss/purifycss

mlednor — 2015-07-08T06:17:03+00:00

Detects which CSS selectors your app is using and creates a file without the unused CSS.

Sass Reference - SitePoint

mlednor — 2015-06-28T18:12:55+00:00

The ultimate guide to Sass

3d Lighting Effects in CSS

mlednor — 2015-04-21T04:44:54+00:00

Rotating Book Effect in HTML & CSS,

How to Center in CSS

mlednor — 2015-04-20T13:33:30+00:00

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation. Select the type of content you want to center in a parent

and the size of the parent.

asciimoo/cssplot · GitHub

mlednor — 2015-03-06T18:31:50+00:00

CSS charts and more https://asciimoo.github.io/cssplot

CSS Guidelines (2.2.2) – High-level advice and guidelines for writing sane, manageable, scalable CSS

mlednor — 2014-10-11T10:49:34+00:00

CSS Guidelines (2.2.2) – High-level advice and guidelines for writing sane, manageable, scalable CSS via Instapaper http://cssguidelin.es/

CSS Vocabulary

mlednor — 2014-08-30T17:19:55+00:00

My Current CSS and Sass Styleguide

mlednor — 2014-08-17T19:50:40+00:00

My Current CSS and Sass Styleguide via Instapaper http://www.sitepoint.com/css-sass-styleguide/

pocketjoso/penthouse

mlednor — 2014-07-15T06:26:28+00:00

Penthouse is a tool generating critical path css for your web pages and web apps in order to speed up page rendering. Supply the tool with your site's full CSS, and the page you want to create the critical CSS for, and it will return all the CSS needed to render the above the fold content of the page.

Phở Devstack - Automated workflow for front-end developers in one tasty bowl of code

mlednor — 2014-05-26T15:32:44+00:00

Automated workflow for front-end developers in one tasty bowl of code. Compiling, minifying, auto-refreshing, CSS prefixing, image sprites,…

Tetris & The Power Of CSS

mlednor — 2013-11-23T11:02:03+00:00

To be really good at CSS, you have to learn CSS. I know this sounds like a tautology but I've become aware of a peculiar attitude that preprocessors such as SASS are somehow successors to CSS. Some SASS and LESS nerds are fond of proliferating the following aphorism. It should be noted that its author did not himself intend it as an advocation of preprocessors.

Emmet LiveStyle — live bi-directional CSS edit of new generation

mlednor — 2013-09-17T09:23:31+00:00

Emmet LiveStyle is a plugin for live bi-directional (editor↔browser) CSS editing of new generation. Currently, it works in Google Chrome, Safari and Sublime Text, more browsers and editors will be available later.

zmoazeni/csscss · GitHub

mlednor — 2013-08-18T17:36:15+00:00

csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations.

Web Typography — Setting Weights And Styles With The @font-face Declaration | Smashing Coding

mlednor — 2013-08-13T13:10:09+00:00

If people are on your website, they’re probably either skimming quickly, looking for something, or they’ve found what they’re looking for and want to read it as easily as possible. Either way, keeping text readable will help them achieve their goal.

OverAPI.com | Collecting all the cheat sheets

mlednor — 2013-08-12T10:54:10+00:00

Collecting All Cheat Sheets

BBC-News/wraith · GitHub

mlednor — 2013-08-01T08:30:02+00:00

Wraith is a screenshot comparison tool, created by developers at BBC News.

10 Best Responsive HTML5 Frameworks and Tools

mlednor — 2013-07-04T08:42:26+00:00

This is a review of 10 open source responsive HTML5 frameworks, boilerplates and tools for front-end web development (HTML, CSS, and JavaScript). I’ve included tutorials and resources related to each of them, and a comparison table at the end.

Josh Earl » How to Add SASS Support in Sublime Text

mlednor — 2013-06-26T06:25:27+00:00

SASS, short for Syntactically Awesome Style Sheets, is a massively popular tool for web developers that takes a lot of the pain out of writing CSS. Unfortunately, Sublime doesn’t provide a lot of help if you want to use SASS in your project. Package Control lists a number of seemingly useful plugins, but each provides just one or two SASS features–none of them gives you everything you need to use SASS effectively. Then there’s the whole compiling thing–messing with a separate command line tool every time you want to make a CSS tweak is a royal pain. Here’s the setup I use that makes working with SASS as seamless as using plain old CSS.

CSS Beautifier

mlednor — 2013-06-01T06:40:52+00:00

BEAUTIFIES YOUR CSS AUTOMATICALLY SO THAT IT IS CONSISTENT AND EASY TO READ

Brackets

mlednor — 2013-05-24T06:04:02+00:00

Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.

Create a Sidebar that Sticks Within an Element | Vandelay Design Blog

mlednor — 2013-05-22T13:14:19+00:00

You’ve probably seen this trick used before with social icons or a sidebar that sticks to the top of your screen as you scroll down the page. The problem is that often they don’t stop scrolling and up either disappearing behind another element or overlapping something they shouldn’t, which looks cheap and unprofessional. In this tutorial we’ll create a ‘sticky element’ that only scrolls until the maximum height of it’s parent element which will prevent that unsightly overflow.

WebCode

mlednor — 2013-05-11T08:57:03+00:00

Vector drawing app that instantly generates JavaScript+Canvas, CSS+HTML or SVG code.

geuis/helium-css · GitHub

mlednor — 2013-04-30T09:38:09+00:00

Helium is a tool for discovering unused CSS across many pages on a web site. The tool is javascript-based and runs from the browser. Helium accepts a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. Finally, it generates a report that details each stylesheet and the selectors that were not found to be used on any of the given pages.

All you need to know about CSS Transitions | Mostly harmless by Alex MacCaw

mlednor — 2013-04-26T11:26:20+00:00

CSS3 transitions bring simple and elegant animations to web applications, but there's a lot more to the spec than first meets the eye. In this post I'm going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions. Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU.

Thank God We Have A Specification! | Smashing Coding

mlednor — 2013-04-26T11:26:07+00:00

This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. Alex MacCaw has already written a very insightful and thorough article on “All You Need to Know About CSS Transitions.”

csscss by zmoazeni

mlednor — 2013-04-11T06:33:42+00:00

csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations.

jQuery Vertical Accordion Menu Plugin – Getting Started « Design Chemical Lab

mlednor — 2013-03-06T14:49:40+00:00

Browserhacks

mlednor — 2013-03-01T10:25:49+00:00

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.

Typeplate » A typographic starter kit encouraging great type on the Web

mlednor — 2013-02-27T18:33:18+00:00

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.

6 Nifty, Time-Saving HTML Attributes

mlednor — 2013-02-27T17:27:37+00:00

There are dozens upon dozens of HTML attributes. Some are well-known and widely used, such as style and href, while others are more obscure. However, the obscure attributes aren’t necessarily the less useful ones. Many lesser-known attributes are like shortcuts – they can save you a lot of time and make your life as a coder easier. I know from the people who come to Code Conquest to learn code that it’s easy to underestimate the usefulness of some of these time-savers. In this post, I’ll show you six lesser-known but nifty attributes.

Roole

mlednor — 2013-02-08T07:33:22+00:00

Roole is a language that compiles to CSS. It drew many inspirations from other CSS preprocessing languages like Sass, LESS and Stylus. The most unique feature of Roole is that it has vendor prefixing built-in, so the language stays dead simple yet being able to prefix some extremely complex rules transparently. Roole is implemented in JavaScript, so it can be run both on the server side (via node.js) or in a browser.

Speeding Up Page Load Times - Treehouse Blog

mlednor — 2013-02-07T13:06:45+00:00

The average size of a web page has been growing at an accelerating rate over the last few years. Research carried out by HTTP Archive in January reports that the average page size has now hit 1.25mb. For users with a decent broadband connection this is not too troublesome, but for users that still rely on slow dial-up connections (like in many developing countries) or crippled mobile data networks this poses a real issue.

hint.css - A tooltip library in CSS

mlednor — 2013-02-05T10:11:32+00:00

Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips. It does not rely on any JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers. Note: CSS3 Transitions on pseudo elements is currently available on Firefox only. On rest of the browsers it degrades gracefully without any transition. Though the good news is that it will be coming soon on webkit also.

nanoc: a static site generator written in Ruby » home

mlednor — 2013-01-30T07:28:59+00:00

nanoc is a static site generator, fit for building anything from a small personal blog to a large corporate web site.

JavaScript/CSS Font Detector › lalit.org

mlednor — 2013-01-19T07:55:37+00:00

JavaScript code to detect available availability of a particular font in a browser using JavaScript and CSS.

How Using Variables in CSS Saved Me Hours Of Coding « Good Sense

mlednor — 2013-01-12T14:14:48+00:00

I’ve been using CSS pre-processors like LESS and SASS for a while now. They’re supposed to be helpful with features like variables, functions and mixins. But I was just using it because it was the right thing to do. Today it saved me HOURS of coding. I’m redesigning a website and decided to change the color scheme. So instead of finding all 46 uses of the color #65AED3 or all the places that used a certain font, I only needed to change the value of the variable. Frontend developers know it’s never as simple as a search-and-replace.

CodeKit Kickoff

mlednor — 2013-01-10T07:28:09+00:00

I use CodeKit daily and do a lot of prototyping with several libraries that provide me a lot of efficiency. As such, I have been working on developing a kickoff project to easily get up and running with this base application whenever I want to get a prototype to hit the ground running. While I understand that CodeKit provides a Framework concept, much of what I do is hand files off to others who may or may not be using CodeKit. The following kickoff project allows me to build a project easily in a modular way that can allow another developer to either choose to use the CodeKit compiling engine or I can choose to only supply the primary "/html" and "/app" directories and the project will just "fire up" without the need for CodeKit. For me, this is currently ideal. With all of that in mind, CodeKit is obviously a dependency to this project. While you could likely untangle the web with not a lot of effort, the purpose of this project is to be used with CodeKit.

Basehold.it - quick, painless, javascript-free baseline overlays

mlednor — 2013-01-02T18:12:48+00:00

Baseline grids are super helpful for web designers, allowing us to maintain vertical rhythm on our designs. But short of a few Javascript bookmarklets, there isn't really a simple way to get a baseline grid overlay on our designs. Enter Basehold.it

Zen Grids: a responsive grid system built with Compass and Sass

mlednor — 2012-12-08T09:16:25+00:00

A responsive grid system built with the power of Sass

Web Font Specimen

mlednor — 2012-11-25T10:57:40+00:00

Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Debuted in a special issue of A List Apart, Web Font Specimen is now in its second iteration.

How to Choose the Right CSS Preprocessor - Treehouse Blog

mlednor — 2012-11-24T08:43:07+00:00

You’ve probably already heard of CSS preprocessors by now, but haven’t quite plucked up the courage to try one because of the learning curve, or maybe because “preprocessor” just plain sounds intimidating. So let’s put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we’ll discuss the 3 most popular ones: Sass, LESS and Stylus. Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we’re all used to. If you’ve recently considered using a CSS preprocessor, there’s no better time to dive in with all the options and helpful tools available. Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that “If its not broken, don’t fix it”. But lately, many have realized just how powerful preprocessors can make our CSS.

The Elements of Typographic Style Applied to the Web – a practical guide to web typography

mlednor — 2012-11-20T15:27:03+00:00

A practical guide to web typography

Bourbon Sass Mixins Library

mlednor — 2012-11-16T18:22:47+00:00

Bourbon is a library of sass mixins that are designed to be simple and easy to use. No configuration required.

A List Apart: Articles: Expanding Text Areas Made Elegant

mlednor — 2012-10-22T06:18:42+00:00

An expanding text area is a multi-line text input field that expands in height to fit its contents. This UI element is commonly found in both desktop and mobile applications, such as the SMS composition field on the iPhone. Examples can also be found on the web, including on Facebook, where it’s used extensively. It’s a good choice wherever you don’t know how much text the user will write and you want to keep the layout compact; as such, it’s especially useful on interfaces targeted at smartphones.

Goodbye -9999px: A New CSS Image Replacement Technique - SitePoint

mlednor — 2012-10-12T07:02:47+00:00

The -9999px image replacement technique has been popular for the best part of a decade. The element’s background is displayed and it’s text is moved off-screen so it doesn’t get in the way. Simple and effective. It was often adopted to show graphical titles — that’s rarely necessary now we have webfonts, but you’ll still find it used all over the web. Until now.

The Perfect Paragraph | Smashing UX Design

mlednor — 2012-10-05T09:10:31+00:00

In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now. Despite their ubiquity, we frequently neglect their presentation. This is a mistake. Here, we’ll refer to some time-honored typesetting conventions, with an emphasis on readability, and offer guidance on adapting them effectively for devices and screens. We’ll see that the ability to embed fonts with @font-face is not by itself a solution to all of our typographic challenges.

978 Grid System for Web Design

mlednor — 2012-10-03T07:41:19+00:00

Welcome to the home of the 978 and counterpart grid systems.

aanand/deadweight

mlednor — 2012-09-08T13:42:16+00:00

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Sass - Syntactically Awesome Stylesheets

mlednor — 2012-08-31T13:28:31+00:00

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Pure CSS Tool Tips Revisited | Impressive Webs

mlednor — 2012-04-06T18:51:44+00:00

Creating tool tips with pure CSS and no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from. For a recent project, I had to research the concept and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws. So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.

CodeKit — THE Mac App For Web Developers

mlednor — 2012-01-27T07:49:51+00:00

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that's just the first paragraph.

5 of the Best CSS3 Font Tools » SitePoint

mlednor — 2011-07-23T15:51:18+00:00

Fonts have made the most dramatic visual impact on the web since graphic support was added to browsers. A few years ago, it would be impossible to find a website using anything other than Arial, Verdana, Tahoma, Times New Roman or Georgia (or, heaven forbid, Comic Sans). While there’s nothing wrong with standard font stacks, they can become a little monotonous. Internet Explorer has supported web fonts for more than a decade but it’s taken competing browsers a little longer to catch up. Licensing is still an issue — you can’t use any commercial font — but you should be able to find one which permits web usage or is similar to your corporate style. However, with great choice comes great responsibility. Fortunately, there are several online tools which can help you locate and use CSS3 fonts…

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development

mlednor — 2011-07-17T20:53:50+00:00

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Ultimate CSS Gradient Generator - ColorZilla.com

mlednor — 2011-07-04T07:07:27+00:00

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Creating a custom HTML theme | Tumblr

mlednor — 2011-06-25T11:55:07+00:00

Tumblr lets you fully customize the appearance of your blog by editing your theme's HTML code. This is only recommended for users comfortable hand-coding HTML. If you're not, there are hundreds of great themes to choose from in the Theme Garden! Once you've created a theme you're proud of, submit it to the Theme Garden to share with everyone on Tumblr!

CSS Lint

mlednor — 2011-06-18T16:01:55+00:00

Your CSS goes here. The more, the better. Linting works best when we see the big picture, so give us everything you've got.

inuit.css—cooler than a polar bear’s toenails…

mlednor — 2011-05-15T10:15:09+00:00

Progressive flexible mobile tablet sensible extensible accessible pragmatic functional useful production-ready more

ProCSSor - Advanced CSS Prettifier

mlednor — 2011-04-29T07:36:17+00:00

ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

Improve Browser Performance With the CSS Stress Test Tool » SitePoint

mlednor — 2011-04-27T17:41:09+00:00

CSS3 backgrounds, rounded corners, box shadows, text shadows, opacity and transformations save web developers hours of time. Basic effects can be achieved without resorting to image slicing, additional elements or scripting. Despite this, not all is rosy in the CSS3 world. When I first dabbled with the techniques a couple of years ago, I was shocked by the impact effects could have on browser performance. A single CSS property could result in visible redraws and page-scrolling treacle. On one site, I had to scrap rounded corners and revert back to images to solve a performance issue. I cursed a few times but simply considered it to be another development gotcha to file in my browser bitch box. Fortunately, US web developer Andy Edinborough has investigated the issue further and developed the CSS Stress Test bookmarklet.

Wrapping Long URLs and Text Content with CSS • Perishable Press

mlednor — 2011-04-20T08:37:34+00:00

To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for

 tags)

25 CSS Snippets for Some of the Most Common and Frustrating Tasks

mlednor — 2011-04-19T09:32:39+00:00

In this post we have 25 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Why reinvent the wheel when there are already plenty of time-saving pre-written CSS code snippets? As well as some classic and timeless CSS hacks you will also find many CSS3 snippets, like box-shadow, border-radius,linear-gradient and many more.