Skip to main content

Home/ Tools for web developers/ Group items tagged useful

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

Using Zapier and TinyPNG to automatically compress your images - Voormedia - 0 views

voormedia.com/...matically-compress-your-images

automation compression images

shared by Vernon Fowler on 06 Jan 17 - No Cached
  • select Dropbox as the trigger app and choose the New file in directory trigger
  • configure the folder in which the images will be compressed
  • Select the File from step 1
  • ...3 more annotations...
  • add another action that saves the compressed image back to Dropbox. Choose Dropbox as the action app and pick Upload File
  • select the Output File from step 2
  • select File Extension from step 1 (prevents renaming JPEG to JPG)
  • Vernon Fowler on 06 Jan 17
     
    "In this blog post, we created Zap with this action that monitors a Dropbox folder and compresses newly uploaded images. A very similar approach can be used to integrate the API with other cloud services supported by Zapier, such as Google Drive, OneDrive or Box."
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

Welcome To The 404 Checker - 0 views

404checker.com

checker 404 testing http protocol header status code tools tool web

shared by Vernon Fowler on 22 Apr 13 - No Cached
  • Check the HTTP Status code being returned by a partcular webpage, image or document. Useful for checking that your custom error pages are returning the correct codes.
  • View the full header returned from a HTTP request. Useful for debugging, optimisation and for general interest. Click the icon next to each header directive for more information about that item.
  • The link checker will fetch all links on a page and check each in turn for their status. Useful for location broken links on a page.
  • Vernon Fowler on 22 Apr 13
     
    "404 Checker is a website full of webmaster tools and information about your website, internet connections and protocols. Please consult the list below for information about the tools available. The information section (accessable from the menu on the left) contains information about HTTP Status Codes, and also instructions about how you can customise your servers response to these codes. The references section contains information about where to get more information."
Vernon Fowler

Font Awesome CDN - 0 views

cdn.fontawesome.com/help

accessibility icons

shared by Vernon Fowler on 11 Aug 16 - No Cached
  • ways to help technology that supports impairments, like screen readers, either ignore or better understand the Font Awesome icons you're using
  • For icons that have semantic or interactive meaning, this means you'll need to provide a proper text alternative to be used.
  • title="Submit My Tax Return"
  • ...5 more annotations...
  • For icons that have semantic or interative meaning
  • <span class="sr-only">Submit My Tax Return</span>
  • What do you mean by Auto Accessibility?
  • Make sure the CDN Embed code is the only way you're using Font Awesome.
  • For icons that are decorative Font Awesome CDN's auto accessibility feature will make sure it is ignored by assistive technology. There's nothing extra you need to on top of how you would usually reference an icon.
Vernon Fowler

How to enable keep-alive for faster page speed - 0 views

varvy.com/...keep-alive.html

WEB300 performance speed wordpress htaccess apache server

shared by Vernon Fowler on 19 Apr 17 - No Cached
  • Enable keep-alive using .htaccess If you do not have access to your webserver config file you can enable keep-alive yourself using an .htaccess file. <ifModule mod_headers.c> Header set Connection keep-alive </ifModule> Adding this to your .htaccess file will add keep alive headers to your requests, which will override most webserver or host limitations.
  • Some people mistakenly believe that they do not have to worry about this because HTTP connections nowadays are by default persistent (keep-alive enabled). While this is true, many people use shared hosting environments or web servers that may close connections unbeknownst to the user. This is done for performance reasons
Vernon Fowler

META SEO inspector v1.8.3 - 0 views

www.omiod.com/meta-inspector.php

metadata LIM225 meta seo inspector chrome extensions html microformats canonical tools

shared by Vernon Fowler on 24 Mar 13 - No Cached
  • Vernon Fowler on 24 Mar 13
     
    A Google Chrome extension useful to inspect the meta data found inside web pages, usually not visible while browsing. Meta data is not just the usual HTML meta tags, but the XFN tags, various microformats, the recently introduced canonical attribute, the no-follow links and so on.
Vernon Fowler

Golden Grid System - 0 views

goldengridsystem.com

grid css webdesign responsive framework web design tools

shared by Vernon Fowler on 11 Oct 12 - No Cached
  • Responsive grids that use gutters proportional to the screen can make the content feel like it's being squeezed together or pulled apart as the screen width changes.
  • With elastic gutters this just doesn't happen, as the gutters always stay in proportion to the content.
  • If you specify all your font-sizes, line-heights, as well as vertical paddings, margins and borders in ems, they'll all scale in proportion as the font-size is changed using media queries, always keeping the baseline grid intact (save for a 1px rounding error or two), which lets the layout keep the same vertical rhythm regardless of screen size.
  • ...1 more annotation...
  • GGS comes with a set of type presets aligned to a baseline grid, which is based on a base line-height of 1.5.
shinele lee

Professional seo company - 2 views

Our SEO services helps small to large scale business find more clients and customers! Use our proven internet marketing strategies without risk. Guaranteed. To know more about SEO services visit us...

started by shinele lee on 17 Oct 12 no follow-up yet
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"
Vernon Fowler

Unsemantic CSS Framework - 0 views

unsemantic.com

css framework responsive grid webdesign fluid layout tools rwd sass

shared by Vernon Fowler on 01 Mar 14 - No Cached
  • Vernon Fowler on 01 Mar 14
     
    Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages. For instance, if you want a 50% wide column, simply use class="grid-50". There are grid classes for multiples of five: 5, 10, 15 … 95, 100. There are also grid classes for dividing a page into thirds: grid-33 and grid-66.
Vernon Fowler

phildionne/golden-bootstrap · GitHub - 0 views

github.com/...golden-bootstrap

typography CSS less sass bootstrap

shared by Vernon Fowler on 21 Mar 14 - No Cached
  • Vernon Fowler on 21 Mar 14
     
    Golden Bootstrap is a tiny add-on for Bootstrap giving you the divine power of using golden ratio sized columns. Available both for Less and Sass CSS preprocessors.
Vernon Fowler

Daring Fireball: How to Create Retina-Caliber Favicons - 0 views

daringfireball.net/...retina_favicons

retina Icons tools tool design webdesign

shared by Vernon Fowler on 07 Oct 13 - No Cached
  • I found no other tool that suited my needs.
    • Vernon Fowler
      Vernon Fowler on 07 Oct 13
       
      IcoFX may be an alternative.
    • Vernon Fowler
      Vernon Fowler on 07 Oct 13
  • Old (non-retina) favicons are 16 × 16 px; a retina favicon is thus 32 × 32 px.
  • iConvertIcons doesn’t do multi-resource ICOs. Neither does Image2Icon.
  • ...1 more annotation...
  • X-Icon Editor is a free web app recommended by Thomas Fuchs in his otherwise excellent Retinafy Your Website flowchart, but the problem I found with it (other than the inherent clunkiness of a web app in general) is that it did awful things to colors
Vernon Fowler

Kalei Styleguide - CSS Living Style guide - 0 views

kaleistyleguide.com

css webdesign tool generator documentation styleguide

shared by Vernon Fowler on 09 Dec 13 - No Cached
  • Vernon Fowler on 09 Dec 13
     
    "This project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks. "
de Villamil Frédéric

Designing Typography for the Modern Web | Tips - 1 views

webdesignledger.com/...-typography-for-the-modern-web

typography webdev webdesign design

shared by de Villamil Frédéric on 31 Oct 10 - No Cached
  • de Villamil Frédéric on 31 Oct 10
     
    As web designers, it is our job to grow with the trends of the Internet. As new technology emerges, it's our position to jump on board and see where it can take us. This includes trends all over the web, typography being a major player. Many designers don't consider type as a field of interest or focus. Ironically, typography is possibly one of the most important parts of our dynamic web. It helps deliver a website's content to users from all over the world and it truly is an art to study. I'll be getting into a few concepts about typography for the modern web. Things haven't changed too much since the previous years of web design, however many new techniques are being utilized and shared amongst the design community.
de Villamil Frédéric

Multiple File Upload Support in Safari 4 Public Beta - Observation Point - 0 views

observationpoint.org/...upport-in-safari-4-public-beta

safari upload html5 webstandards webdev

shared by de Villamil Frédéric on 09 Mar 09 - Cached
  • de Villamil Frédéric on 09 Mar 09
     
    Introduced in the HTML 5 specification, the multiple attribute on file inputs (i.e. ) will allow for multiple files to be selected for upload. I had been using the WebKit nightlies and watching for this feature to be enabled in the default builds, but the Safari 4 beta is the first version of Safari that I've seen support this. The original commit to WebKit that added this support was 37863.
de Villamil Frédéric

Five Simple Steps ~ A book by Mark Boulton - 0 views

www.fivesimplesteps.co.uk

design webdesign development book webdev web

shared by de Villamil Frédéric on 08 Mar 09 - Cached
  • de Villamil Frédéric on 08 Mar 09
     
    A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design.
Sarah HL

JUnit FAQ - 0 views

junit.sourceforge.net/...faq.htm

programming bestpractices testing lang:en tips

shared by Sarah HL on 29 Jun 09 - Cached
  • They effectively communicate in an executable format how to use the software. They also prevent tendencies to over-build the system based on speculation. When all the tests pass, you know you're done!
  • Test-driven development is a lot more fun than writing tests after the code seems to be working
  • Do I have to write a test for everything? No, just test everything that could reasonably break.
  • ...6 more annotations...
  • If something is difficult to test, it's usually an opportunity for a design improvement.
  • Frequent testing gives you confidence that your changes didn't break anything and generally lowers the stress of programming in the dark.
  • Run all your unit tests as often as possible, ideally every time the code is changed
  • For larger systems, you may just run specific test suites that are relevant to the code you're working on.
  • write a failing test that exposes the defect. When the test passes, you know the defect is fixed!
  • Don't forget to use this as a learning opportunity. Perhaps the defect could have been prevented by being more aggressive about testing everything that could reasonably break.
1 - 20 of 43 Next › Last »
Showing 20▼ items per page