Skip to main content

Home/ Tools for web developers/ Group items tagged browser

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

Grumpicon. A Web app for the Grunticon workflow. - 0 views

www.grumpicon.com

svg generator png tools image icons css icon font vector webdesign tool

shared by Vernon Fowler on 17 Jan 14 - No Cached
  • To start, export SVG files for each of your images, drop those files onto the grumpy animal above, then click the 'Downlode it!" button to grab the files.
  • Once downloaded, check out preview.html to see a preview of your icons and their class names. To integrate in your site, you can drop the exported files into a folder on your site and paste the contents of grunticon.loader.txt into the head section of your HTML templates. Note: Be sure to replace the 4 [YOUR PATH HERE] parts of that text with the path to your own grunticon files (a root-relative path often works best across a whole site).
  • Vernon Fowler on 17 Jan 14
     
    Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.
  • Vernon Fowler on 17 Jan 14
     
    Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.
Vernon Fowler

Mogotest | Web Consistency Testing Made Easier - 0 views

mogotest.com

tool Cross-Browser webdesign browser testing test useful

shared by Vernon Fowler on 20 Apr 13 - Cached
  • Vernon Fowler on 20 Apr 13
     
    "The world's only cross-browser visual regression tool. Confidently update your CSS without breaking other pages."
Sarah HL

Relearn CSS layout: Every Layout - 0 views

every-layout.dev

css learning

shared by Sarah HL on 02 Jul 20 - No Cached
  • Sarah HL on 02 Jul 20
     
    If you find yourself wrestling with CSS layout, it's likely you're making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. Employing algorithmic layout design means doing away with @media breakpoints, "magic numbers", and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.
Vernon Fowler

Pens picked by the Editors of CodePen - 0 views

codepen.io

javascript css code html webdesign development webdev tools tool

shared by Vernon Fowler on 11 Jun 13 - No Cached
  • Vernon Fowler on 11 Jun 13
     
    CodePen is an HTML, CSS, and JavaScript code editor right in your browser with instant previews of the code you see and write. It's great for showing off your work and seeing what amazing things other people are doing with the web. It's also great for troubleshooting problems and getting critique.
Vernon Fowler

geuis/helium-css · GitHub - 0 views

github.com/helium-css

css javascript webdesign web tools

shared by Vernon Fowler on 16 Apr 13 - No Cached
  • Vernon Fowler on 16 Apr 13
     
    "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. "
Vernon Fowler

Website Error Checker: Accessibility & Link Checker - SortSite - 0 views

www.powermapper.com/...sortsite

accessibility usability tools tool

shared by Vernon Fowler on 24 Oct 16 - No Cached
  • Vernon Fowler on 24 Oct 16
     
    "Checkpoints Accessibility - check WCAG and Section 508 guidelines against many file types: find flashing GIFs, untagged PDFs Broken Links - check for broken links and spelling errors Compatibility - check for HTML, script and image formats that don't work in common browsers Search Engine Optimization - check Google and Bing webmaster guidelines Privacy - check for compliance with EU and US law Web Standards - validate HTML and CSS Usability - check against Usability.gov guidelines"
Luciano Ferrer

Disable Ctrl-Q Shortcut :: Add-ons for Firefox - 0 views

addons.mozilla.org/...disable-ctrl-q-shortcut

firefox shortcut extension

shared by Luciano Ferrer on 22 Feb 12 - No Cached
  • Luciano Ferrer on 22 Feb 12
     
    "Never close the browser by mistake again." ¿Cansado/a de darle al ctrl+q por error?
Sarah HL

smush.it! - 0 views

smushit.com

performance speed tools firefox

shared by Sarah HL on 13 Feb 09 - Cached
  • Performance just got a little bit easier. Optimizing images by hand is time consuming and painful. Smush it does it for you.
  • Smush it comes in different flavours: You can upload a bunch of pictures in your browser You can provide us with a list of image urls or You can get a Firefox Extension or a cross-browser bookmarklet to optimize the images found on any web page
Vernon Fowler

The Heads-Up Grid - 0 views

bohemianalps.com/grid

grid responsive css web javascript development html webdesign tools

shared by Vernon Fowler on 13 Sep 11 - No Cached
  • Vernon Fowler on 13 Sep 11
     
    Now Responsive!The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.
Vernon Fowler

CSS Tools: Reset CSS - 0 views

meyerweb.com/...reset

front-end prototyping webdesign CSS

shared by Vernon Fowler on 06 Feb 19 - No Cached
  • Vernon Fowler on 06 Feb 19
     
    "The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."
Vernon Fowler

Microdata - Dive Into HTML5 - 0 views

diveintohtml5.info/extensibility.html

HTML5 microdata schema structure metadata content data model

shared by Vernon Fowler on 20 Jan 13 - No Cached
  • a third option developed using lessons learned from microformats and RDFa, and designed to be integrated into HTML5 itself: microdata.
  • “Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have.
  • So where is the real information? It’s in the <dd> element, so that’s where we need to put the itemprop attribute. Which property is it? It’s the name property. Where is the property value? It’s the text within the <dd> element. Does that need to be marked up? the HTML5 microdata data model says no, <dd> elements have no special processing, so the property value is just the text within the element.
  • ...7 more annotations...
  • This technique is also useful for microdata. There are two distinct pieces of information here: a title and an affiliation. If you wrap each piece in a dummy <span> element, you can declare that each <span> is a separate microdata property.
  • There are two major classes of applications that consume HTML, and by extension, HTML5 microdata: Web browsers Search engines
  • Google supports microdata as part of their Rich Snippets program.
  • a handy tool to see how Google “sees” your microdata properties
  • Just like associating a URL with a Person, you can associate a URL with an Organization. This could be the company’s home page, a contact page, product page, or anything else. If it’s a URL about, from, or belonging to the Organization, mark it up with an itemprop="url" attribute.
  • To handle edge cases like this, HTML5 provides a way to annotate invisible data. This technique should only be used as a last resort. If there is a way to display or render the data you care about, you should do so. Invisible data that only machines can read tends to “go stale” quickly. That is, someone will come along later and update the visible text but forget to update the invisible data. This happens more often than you think, and it will happen to you too.
  • itemscope says that this element is the enclosing element for a microdata item with its own vocabulary (given in the itemtype attribute). All the properties within this element are properties of http://data-vocabulary.org/Geo, not the surrounding http://data-vocabulary.org/Organization.
Vernon Fowler

How to Point Multiple Domain Names to One Website: And How to Avoid Search Engine Probl... - 0 views

www.thesitewizard.com/...iple-domains-one-website.shtml

seo domain multiple domains

shared by Vernon Fowler on 22 May 13 - No Cached
  • The 3 sites, "example.com", "example.net" and "example.org", all point to the exact same page on the site's web host. It is done by hosting all three sites on the same web host, and arranging it so that they all resolve to the same account.
  • That is, there's a simple way to tell the search engines that all 3 domains point to the same site, and to add up all the links together and associate them with that site.
  • Next, you will also need to arrange with your web host to host all your domains so that they point to the same website.
  • ...3 more annotations...
  • After pointing all your domains to your website, you'll have to decide which of those domains is going to be your primary or main domain.
  • The kind of redirection employed above is recognised by search engines as an indication that all your different domains have moved permanently to your primary domain.
  • After setting the above, wait a couple of days for your changes to spread (or in the technical jargon for such things, "propagate") throughout the world, then test your secondary domains in your web browser.
  • Vernon Fowler on 22 May 13
     
    "A visitor recently asked me whether it was possible to point multiple domain names to one website, more or less the conceptual reverse of what I wrote about in "Can I Create Multiple Websites with One Domain Name?". This article discusses why a person might want to do this, how it can be accomplished, and provides a practical guide on the additional steps you need to take in order to avoid losing potential search engine ranking as a result of doing things this way."
Vernon Fowler

WebPagetest - Website Performance and Optimization Test - 0 views

www.webpagetest.org

performance optimization speed tools web testing test webdev php

shared by Vernon Fowler on 23 Feb 13 - Cached
  • Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.
Vernon Fowler

TinyPNG - Compress PNG images while preserving transparency - 0 views

tinypng.com

net303 bandwidth

shared by Vernon Fowler on 02 Nov 16 - No Cached
  • use less bandwidth and load faster
  • files produced by TinyPNG are displayed perfectly on all modern browsers including mobile devices
  • frustrated with the load times
  • Vernon Fowler on 02 Nov 16
     
    "In 2014 we added intelligent compression for JPEG images and in 2016 we added support for animated PNG."
1 - 20 of 23 Next ›
Showing 20▼ items per page