Loading...

Templarian - Design, Develop, and Deploy


Next Page

Stock Material Design Icons

Google's Material Design resource provides almost 600 unique icons. These icons promote a consistent design while creating applications. !<a href="/files/stock_mdi.png">Preview</a> The files below are updated to the June 5th release and consolidate all the icons into a single <a href="/files/stock_mdi_all.png">file</a>. <a href="/files/stock_mdi.design">Download as .Design</a> for Expression Design <a href="/files/stock_mdi.svg">Download as .SVG</a> for Inkscape <a href="/files/stock_mdi.ai">Download as .AI</a> for Adobe Illustrator ```text Stock Icons Action - account-box - account-circle - book - bookmark - bookmark-outline - delete - done - done-all - event - exit-to-app - explore - extension - favorite - favorite-outline - flip-to-back - google - google-plus - help - history - home - https - info - info-outline - keep - label - label-outline - launch - list - lock - lock-open-outline - lock-closed-outline - print - receipt - reminder - schedule - search - settings - shopping-basket - star-rate - store - swap-horizontal - swap-vertical - tab - thumb-down - thumb-up - theaters - today - translate - view-array - view-carousel - view-column - view-headline - view-list - view-module - view-quilt - view-stream - visibility - visibility-off - work - accessibility - backup - bug-report - credit-card - language - settings-application - invert-colors - tab-unselected - polymer - android - x - swap-vertical-circle - swap-driving-apps - settings-bluetooth - settings-power - settings-voice - settings-cell - settings-phone - swap-driving-apps - aspect-ratio - developer-mode-tv - drawer - input - picture-in-picture - settings-backup-restore - settings-display - settings-ethernet - settings-input-antenna - settings-input-component - settings-input-composite - settings-input-hdmi - settings-input-svideo - settings-overscan - settings-remote - system-update-tv - 3d-rotation - account-balance - add-shopping-cart - loyalty - payment - send-money - trending-down - trending-neutral - trending-up Alert - alert-circle - alert-triangle AV - closed-caption - fast-forward - fast-rewind - games - high-quality - loop - mic - mic-none - mic-off - movie - news - pause - pause-circle-fill - pause-circle-outline - play-arrow - play-circle-fill - play-circle-outline - queue - replay - shuffle - skip-next - skip-previous - stop - videocam - videocam-off - video-youtube - volume-up - volume-down - volume-mute - volume-off - layout (they call it web) Communication - call - call-ended - call-made - call-merge - call-missed - call-received - call-split - chat - comment - contacts - email - dialpad - forum - gmail - hangout - hangout-video - hangout-video-off - import-export - message - messenger - phone - ring-volume - textsms - voicemail - live-help - swap-calls - search-hands-free - dnd-on - location-off - location-on - no-sim - portable-wifi-off - stay-current-portrait - stay-current-landscape - stay-primary-portrait - stay-primary-landscape - vpn - invert-colors-on - invert-colors-off - clear-all Content - add - add-box - add-circle - add-circle-outline - archive - backspace - block - clear - content-copy - content-cut - content-paste - create - drafts - filter - flag - forward - gesture - inbox - link - mail - markunread - remove - remove-circle - remove-circle-outline - reply - reply-all - report - rotate-left - rotate-right - save - select-all - send - sort - text-format - undo Device - access-time - access-alarms - add-alarm - airplanemode-off - airplanemode-on - battery-std - battery-20 - battery-30 - battery-50 - battery-60 - battery-80 - battery-90 - battery-alert - battery-charging-20 - battery-charging-30 - battery-charging-50 - battery-charging-60 - battery-charging-80 - battery-charging-90 - battery-charging-full - battery-unknown - bluetooth - bluetooth-searching - bluetooth-connected - brightness-auto - brightness-high - brightness-low - brightness-medium - data-usage - gps-fixed - gps-not-fixed - gps-off - network-cell - network-wifi - sd-storage - screen-rotation - screen-lock-landscape - screen-lock-portrait - signal-wifi-1-bar - signal-wifi-2-bar - signal-wifi-3-bar - signal-wifi-4-bar - signal-cellular-1-bar - signal-cellular-2-bar - signal-cellular-3-bar - signal-cellular-4-bar - storage - timer - usb - wifi-tethering - screen-lock-rotation - bluetooth-disabled - location-disabled - location-searching - developer-mode - nfc - now-widgets - event-note - now-wallpaper Editor - border-all - border-bottom - border-clear - border-horizontal - border-inner - border-left - border-outer - border-right - border-top - border-vertical - border-color - border-style - format-bold - format-underline - format-color-text - format-color-fill - format-color-reset - format-align-left - format-align-center - format-align-right - format-align-justify - format-indent-increase - format-indent-decrease - format-list-bullet - format-list-numbered - format-line-spacing - format-paint - format-quote - format-comment - insert-chart - format-functions - format-textdirection-l-to-r - format-textdirection-r-to-l - insert-emoticon - attach-file - insert-link - insert-photo - format-clear - vertical-align-bottom - vertical-align-top - vertical-align-center - wrap-text - merge-type - format-size - format-strikethrough - insert-invitation - mode-edit - mode-comment - format-italic - attach-money - insert-drive-file - attach-drive File - attachment - cloud - cloud-done - cloud-download - cloud-off - cloud-queue - cloud-upload - file-download - file-upload - drive-document - drive-drawing - drive-file - drive-form - drive-fusiontable - drive-image - drive-ms-excel - drive-ms-powerpoint - drive-ms-word - drive-pdf - drive-presenation - drive-script - drive-site - drive-spreadsheet - drive-video - folder - folder-shared - folder-mydrive - drive - cloud-circle - drive-audio - drive-chart - drive-text - drive-zip - drive-keep - drive-file-move - drive-file-rename - folder-open Hardware - cast - cast-connected - chromecast - computer - dock - gamepad - glass - headset - headset-mic - keyboard - keyboard-hide - mouse - nest-protect - nest-thermostat - phone - speaker - tablet - tv - watch - keyboard-alt - keyboard-arrow-down - keyboard-arrow-left - keyboard-arrow-right - keyboard-arrow-up - keyboard-backspace - keyboard-capslock - keyboard-control - keyboard-return - keyboard-tab - keyboard-voice - memory - phone-android - phone-iphone - laptop-chromebook - laptop-mac - laptop-windows - desktop-mac - desktop-windows - tablet-android - tablet-mac - security Image - auto-fix - camera - camera-alt - camera-roll - crop - crop-free - crop-landscape - crop-portrait - crop-square - flash-auto - flash-off - flash-on - image - landscape - lightcycle - palette - panorama - photo - photo-album - photo-library - photo-sphere - portrait - slideshow - switch-camera - switch-video - tag-faces - timelapse - wb-auto - wb-cloudy - wb-incandescent - wb-irradescent - wb-sunny - contrast-box - contrast-circle - plus-circle - minus-circle - ??? - relative-scale - ??? - compare Maps - marker-check (been-here) - directions - directions-bike - directions-bus - directions-car - directions-subway - directions-train - directions-transit - directions-walk - earth - explore - flight - map - hotel - person-location (location-history) - location (my-location) - place - rate-review - satellite - navigation - terrain - traffic - directions-ferry - store-mall-directory - local-airport - local-atm - local-attraction - local-bar - local-cafe - local-car-wash - local-convenience-store - local-drink - local-florist - local-gas-station - local-grocery-store - local-hospital - local-hotel - local-laundry-service - local-library - local-mall - local-movies - local-offer - local-parking - local-pharmacy - local-phone - local-pizza - local-play - local-post-office - local-print-shop - local-restaurant - local-see - local-shipping - local-taxi - menu Navigation - apps - arrow-back - arrow-forward - arrow-drop-down - arrow-drop-up - cancel - chevron-left - chevron-right - check - close - expand-more - expand-less - fullscreen - fullscreen-exit - menu - more-horizontal - more-vertical - refresh - unfold-less - unfold-more - arrow-drop-down-circle Notification - adb - bluetooth - bluetooth-audio - bluetooth-connected - disc-full - drive-eta - email - event - gmail - hangout - keep - mms - more - phone-bluetooth-speaker - phone-in-talk - phone-forwarded - phone-locked - phone-missed - phone-paused - play-download - play-install - sd-card - sim-card-alert - sms - sms-failed - sync - system-update - time-to-leave - usb - vibration - voice-chat - wifi-tethering - do-not-disturb - vpn - tap-and-play - sync-disabled - sync-green - sync-problem - sync problem red Social - cake - circles - circles-add - circles-extended - communities - domain - group - group-add - location-city - mood - notifications - notifications-none - notifications-off - notifications-on - notifications-paused - pages - party-mode - people - person - person-add - person-outline - blogger-box - facebook-box - google-plus-box - instagram - linkedin-box - pinterest-box - tumblr-box - twitter-box - share - share-alt - plus-one - poll-box - public - school - whatshot Toggle - radio-button-off - radio-button-on - star - star-outline - star-half - check-box - check-box-blank - check-box-outline - check-box-blank-outline - check-circle - check-circle-blank - check-circle-outline - check-circle-blank-outline ```

Difference between two Object Arrays

Very often when working with lists of data you have the full array of items and a subset array. Knowing the difference can be useful to display only the unused items. !<a href="/files/diff_object_arrays.png">Example</a> The example below shows how this can be accomplished with a few lines of jQuery. ```javascript jQuery Example var items = [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}], removeItems = [{id: 1}, {id: 3}]; var diff = $(items).not(function (i, item) { return $.grep(removeItems, function (n) { return n.id == item.id; }).length > 0; }).get(); // diff == [{id: 2}, {id: 4}, {id: 5}] ``` And because AngularJS is what I've been trying to blog more about below is a simple `UtilService`. This method is useful for comparing the difference between two lists of data. ```javascript AngularJS example myApp.factory('UtilService', function() { return { diffArray: function (items, not, prop) { prop = prop || 'id'; return $(items).not(function (i, item) { return $.grep(not, function (n) { return n[prop] == item[prop]; }).length > 0; }).get(); } }; }); myApp.controller('TestController', [ '$scope', 'UtilService', function ($scope, UtilService) { $scope.items = [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}]; $scope.removeItems = [{id: 1}, {id: 3}]; $scope.diffItems = UtilService.diffArray(items, removeItems); // diffItems == [{id: 2}, {id: 4}, {id: 5}] } ]); ``` Hopefully you found this useful, and let me know if you find a better method on Twitter.

AngularJS with .htaccess

Much like in <a href="/2014/06/02/iis_angularjs_url_rewrite/">IIS</a> you may want to redirect all your traffic for your AngularJS application to the root node (`/`) and all your API traffic to a separate file to process. The first step is to ensure you have enabled html5 mode in your `app.js`. ```javascript app.js $locationProvider.html5Mode(true); ``` Generally it is helpful before writing out a htaccess file to list the urls you would like to support. ```text Example Endpoints /page-title index.html AngularJS App /2014/07/11/page-title index.html AngularJS App /api/auth api/index.php API Endpoints /api/document/1 api/index.php API Endpoints ``` In this case we want everything after api to process with `api/index.php` and everything else redirect to `index.html` our AngularJS application. To do this we need a `.htaccess` file in the root folder. ```text .htaccess <IfModule mod_rewrite.c> RewriteEngine on RewriteBase / RewriteRule ^api api/index.php [NE,L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*) /index.html [NE,L] </IfModule> ``` Hopefully you found this snippet helpful. *Note:* The `.htaccess` file is commonly used with shared hosting plans, if you have access to the httpd config use that instead.