Skip to main content

Home/ Tools for web developers/ Group items tagged useful

Rss Feed Group items tagged

Vernon Fowler

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

  • 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).
  •  
    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.
  •  
    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

  • 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)
  •  
    "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

  • 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
  • a handy tool to see how Google “sees” your microdata properties
  • Google supports microdata as part of their Rich Snippets program.
  • 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

  • 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.
  •  
    "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

  • 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

  • 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

  •  
    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

  • 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

  •  
    "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 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

  •  
    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

  • I found no other tool that suited my needs.
    • Vernon Fowler
       
      IcoFX may be an alternative.
    • Vernon Fowler
  • iConvertIcons doesn’t do multi-resource ICOs. Neither does Image2Icon.
  • Old (non-retina) favicons are 16 × 16 px; a retina favicon is thus 32 × 32 px.
  • ...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

  •  
    "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

  •  
    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

  •  
    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

  •  
    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

  • 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