Skip to main content

Home/ Tools for web developers/ Group items tagged code

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
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
  • 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

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

Outbound Links - Analytics Help - 0 views

support.google.com/...answer.py

outbound analytics tracking links javascript

shared by Vernon Fowler on 15 Jan 13 - No Cached
  • Because links that lead away from your site are not automatically tracked by Google Analytics, you will need to manually tag all outbound links you want to track. To do this, you will add some custom JavaScript that uses the _trackEvent method to record these links and then modify the links you want to track.  These instructions assume you already have either the traditional (ga.js) or the asynchronous tracking code in your pages, that you have some familiarity with JavaScript, and that you can edit your website pages to include this JavaScript.
Vernon Fowler

Grunt for People Who Think Things Like Grunt are Weird and Hard ◆ 24 ways - 0 views

24ways.org/...grunt-is-not-weird-and-hard

grunt tutorial javascript css tools webdesign frontend front-end workflow webdev tool

shared by Vernon Fowler on 28 Mar 14 - No Cached
  • You install Grunt on a per-project basis. Go to your project’s folder. It needs a file there named package.json at the root level. You can just create one and put it there.
  • The contents of that file should be this: { "name": "example-project", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1" } }
  • Once that package.json file is in place, go to the terminal and navigate to your folder.
  • ...3 more annotations...
  • This is a one-liner again. Just run this command in the terminal: npm install -g grunt-cli
  • Then run the command: npm install
  • You should close and reopen the terminal as well. That’s a generic good practice to make sure things are working right.
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

CSS Lint - 0 views

csslint.net

css tool optimization lint tools webdesign performance syntax design

shared by Vernon Fowler on 01 Jun 13 - No Cached
  • Vernon Fowler on 01 Jun 13
     
    CSS Lint points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The [rules] are all pluggable, so you can easily write your own or omit ones you don't want.
Vernon Fowler

Get Started with Font Awesome - 0 views

fontawesome.io/get-started

icons bootstrap font responsive accessible accessibility webdesign

shared by Vernon Fowler on 11 Aug 16 - No Cached
  • Super-simple upgrades Since each site gets a unique embed code, you can easily upgrade to the latest version of Font Awesome, all without pushing any code. Easy peasy.
  • Vernon Fowler on 11 Aug 16
     
    Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself! Font Awesome even plays nicely with Bootstrap 3!
Vernon Fowler

Git Immersion - Brought to you by Neo - 0 views

gitimmersion.com

git tutorial howto guide development tutorials code webdev tool tools

shared by Vernon Fowler on 17 Jun 13 - No Cached
  • Vernon Fowler on 17 Jun 13
     
    "Git is a powerful, sophisticated system for distributed version control. Gaining an understanding of its features opens to developers a new and liberating approach to source code management. The surest path to mastering Git is to immerse oneself in its utilities and operations, to experience it first-hand."
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.
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.
de Villamil Frédéric

Github: Making Code More Social - O'Reilly Radar - 0 views

radar.oreilly.com/...b-making-code-more-social.html

rubyonrails ruby dev socialweb

shared by de Villamil Frédéric on 08 Mar 09 - Cached
  • de Villamil Frédéric on 08 Mar 09
     
    Github launched less than a year ago, but it's already making an impact on how open-source software is being created. Rails was there from day one, kick-starting the social software repository's traffic. It has taken off though it still doesn't compare to Sourceforge's traffic.
de Villamil Frédéric

Code: Flickr Developer Blog » Building Fast Client-side Searches - 0 views

code.flickr.com/...ding-fast-client-side-searches

javascript webdev performance xml json

shared by de Villamil Frédéric on 22 Mar 09 - Cached
  • de Villamil Frédéric on 22 Mar 09
     
    Yesterday we released a new people selector widget (which we've been calling Bo Selecta internally). This widget downloads a list of all of your contacts, in JavaScript, in under 200ms (this is true even for members with 10,000+ contacts). In order to get this level of performance, we had to completely rethink how we send data from the server to the client.
de Villamil Frédéric

When Clients Take Too Much Design Control | Build Internet! - 0 views

buildinternet.com/...s-take-too-much-design-control

mustread design webdesign

shared by de Villamil Frédéric on 18 Jan 10 - Cached
  • de Villamil Frédéric on 18 Jan 10
     
    Have you ever dealt with a client who suddenly flipped on "design mode" mid-project? The expectation is that you are an expert, and you act as a filter between the client and a (successful) finished product. Web design is more than just coding a client's vision. You've spent the time honing skills. Now let's reclaim your artistic license while keeping professional.
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

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.
1 - 20 of 26 Next ›
Showing 20▼ items per page