?

http://maps.googleapis.com/maps/api/staticmap?center=33.9,-88.14999999999998&zoom=12&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x1d2c4d&style=element:labels.text.fill%7Ccolor:0x8ec3b9&style=element:labels.text.stroke%7Ccolor:0x1a3646&style=feature:administrative.country%7Celement:geometry.stroke%7Ccolor:0x4b6878&style=feature:administrative.land_parcel%7Celement:labels%7Cvisibility:off&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0x64779e&style=feature:administrative.province%7Celement:geometry.stroke%7Ccolor:0x4b6878&style=feature:landscape.man_made%7Celement:geometry.stroke%7Ccolor:0x334e87&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0x023e58&style=feature:poi%7Celement:geometry%7Ccolor:0x283d6a&style=feature:poi%7Celement:labels.text%7Cvisibility:off&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x6f9ba5&style=feature:poi%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:poi.business%7Cvisibility:off&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0x023e58&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x3C7680&style=feature:road%7Celement:geometry%7Ccolor:0x304a7d&style=feature:road%7Celement:labels.icon%7Cvisibility:off&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x98a5be&style=feature:road%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:road.highway%7Celement:geometry%7Ccolor:0x2c6675&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x255763&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0xb0d5ce&style=feature:road.highway%7Celement:labels.text.stroke%7Ccolor:0x023e58&style=feature:road.local%7Celement:labels%7Cvisibility:off&style=feature:transit%7Cvisibility:off&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x98a5be&style=feature:transit%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:transit.line%7Celement:geometry.fill%7Ccolor:0x283d6a&style=feature:transit.station%7Celement:geometry%7Ccolor:0x3a4762&style=feature:transit.station.bus%7Cvisibility:simplified&style=feature:transit.station.bus%7Celement:geometry.fill%7Cvisibility:simplified&style=feature:water%7Celement:geometry%7Ccolor:0x0e1626&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x4e6d70&size=355x600

There is simply no question that **jQuery is the most powerful JavaScript library available today**, and as time goes by, it is only getting stronger. As an open-source, free, and massively popular collection, it represents some of the best that the web has to offer in terms of collaborative tools. So if you, like so many, are interested in learning the basics of jQuery and putting it to use in your own web development projects, coding courses are a great way to push your skills to the next level.

SVG - Scalable Vector Graphics Vector icons are the way of the future, and SVG is the perfect base format. It’s a scalable format meaning that you can change it to any size without quality loss. You can use SVG on the web in many ways: As an image <img src=”/images/home.svg” /> Inline HTML <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> With CSS #vector-image { background-image: url(“/images/home.svg”); } While it SVG is supported by most browsers, it’s has some quirks and may require a bit of getting used to. SVG is based on XML, much like your website markup, which means that it can be manipulated directly by Javascript or CSS. This opens a whole new world of possibilities for the creative front-end developer or tech-savvy designer. Another, and maybe more common, way of working with SVG, is as a base format. This way you can open your SVG in software like Adobe Illustrator, Sketch or Affinity Designer, edit it, scale it, colour it or whatever manipulation you fancy. Afterwards you just export it to your desired format for your project. Compared to PNG, it’s not widely support in apps like Word, Powerpoint and Photoshop. PNG - Portable Network Graphic If you want total compatibility, PNG is the safe choice. Unlike SVG, PNG is a raster format (based on pixels) meaning you have no way of upscaling without losing quality. So you have to download your icons in at least the size you need for your project. That way you can always scale it down when needed. If you are not sure which format to choose, go with PNG. PNG will work in Word, Powerpoint, Photoshop and you can insert them directly into email footer or your website. Compared to formats such as JPG, PNG contains information about transparency. So PNG can easily be added on top of colored background without editing them. Base64 encoded icons (SVG or PNG) You will find both PNG and SVG icons available in base64 format on Iconfinder. Base64 is a way of storing image data making it available without saving the icon as a file. You can copy-paste the base64 encoded icon directly in your CSS or HTML. CSS #vector-image { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iM ... z48L3N2Zz4=); } HTML <img alt="Embedded Image" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjwh ... AiLz48L3N2Zz4=" /> You can use this technique to save server lookups and making your website load faster. You can read more in this blog post: http://blog.iconfinder.com/base64-encoding-assets-the-what-when-and-how/ AI - Adobe Illustrator AI format is available for Iconfinder Pro users - AI is the vector format used by Adobe’s Illustrator app. If you are using Photoshop, you can easily drag and drop an AI files into a canvas giving you a vector based object you can use. And of course this format is compatible with Adobe illustrator. CSH - Photoshop Custom Shape CSH format is available for Iconfinder Pro users - CSH files contain custom shapes used by Photoshop. To use a custom shape you have to first open the downloaded file, then use the Custom Shape Tool. Select the shape in the Shapes drop-down list. This is perfect for icons you often use since they will be saved for later use in Photoshop. ICO - Microsoft Windows icon format If you need to use your icon for Windows applications or as a favicon for your website, ICO is the right format. The ICO format can also be used for favicons for a website. More about favicons: http://en.wikipedia.org/wiki/Favicon ICNS - The Apple OS icon Format Like the ICO format, ICNS is mostly for very specific purposes. ICNS is an Apple specific format only suitable for Mac OS X documents and apps. So if you need your icon for anything else, choose a different format.

by Mike Davis

Made with #PhotoshopMix. Get it at http://mix.adobe.com