WebAppers http://www.webappers.com - Hunting the Best Open Source Resources for Web Developers Wed, 19 Jun 2013 07:05:32 +0000 http://wordpress.org/?v=2.8.6 en A Realtime Monitoring System for PHP using MySQL http://www.webappers.com/2013/06/19/a-realtime-monitoring-system-for-php-using-mysql/ http://www.webappers.com/2013/06/19/a-realtime-monitoring-system-for-php-using-mysql/#comments Wed, 19 Jun 2013 07:05:32 +0000 Ray Cheung http://www.webappers.com/?p=8815

Advertise here via BSA

Pinba is a MySQL storage engine that acts as a realtime monitoring/statistics server for PHP using MySQL as a read-only interface. It accumulates and processes data sent over UDP by multiple PHP processes and displays statistics in a nice human-readable form of simple “reports”, also providing read-only interface to the raw data in order to [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

Pinba is a MySQL storage engine that acts as a realtime monitoring/statistics server for PHP using MySQL as a read-only interface. It accumulates and processes data sent over UDP by multiple PHP processes and displays statistics in a nice human-readable form of simple “reports”, also providing read-only interface to the raw data in order to make possible generation of more sophisticated reports and stats.

Intaro Pinboard is a simple PHP monitoring system, which aggregates and displays Pinba data. Originally Pinba saves realtime (or nearly realtime) data in own tables. Pinboard periodically dumps this data in own tables and displays core metrics on basis of own data and realtime data from Pinba.

php-monitor

Requirements: PHP Framework
Demo: http://intaro.github.io/pinboard/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/19/a-realtime-monitoring-system-for-php-using-mysql/feed/ Surviving the Zombie Apocalypse with HTML5 & SVG http://www.webappers.com/2013/06/19/surviving-the-zombie-apocalypse-with-html5-svg/ http://www.webappers.com/2013/06/19/surviving-the-zombie-apocalypse-with-html5-svg/#comments Wed, 19 Jun 2013 07:01:41 +0000 Ray Cheung http://www.webappers.com/?p=8808

Advertise here via BSA

As browser adoption of HTML5 continues apace, developers are finding more and more options for creating elegant, highly responsive UIs. In the case of Scalable Vector Graphics (SVG), what’s old is new again, and quite slick. The SVG spec has been around for a while now. Under development since 1999, the spec, or more accurately a [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

As browser adoption of HTML5 continues apace, developers are finding more and more options for creating elegant, highly responsive UIs. In the case of Scalable Vector Graphics (SVG), what’s old is new again, and quite slick.

The SVG spec has been around for a while now. Under development since 1999, the spec, or more accurately a family of specs, describes an XML-based file format for vector graphics. An SVG block defines the individual components of a vector image, such as paths, shapes, fills, strokes and other features. This provides a lightweight option for certain types of graphics that might otherwise have been created in Adobe Illustrator or Inkscape and then exported to a raster format. It also promises a raft of potential functionality in manipulating an image on the fly—hence the “scalable” part of SVG.

With widespread adoption of HTML5 standards, browsers are taking SVG in new directions, such as emphasizing the <svg> tag for inline SVG, using CSS for styling, and opening up the DOM so that SVG images can be created or manipulated on the client side with JavaScript.

To demonstrate, this series of walkthroughs will aim to benefit humankind in two ways. One, it will cover SVG examples that are compatible across browsers, while pointing out some of the differences in SVG adoption. Two, it will more or less accurately predict one’s chances of surviving a zombie apocalypse.

Step One: Prepare

Before starting, it’s helpful to know which browser will be targeted. While all modern browsers have adopted SVG to some degree, its implementation still varies in many ways—some minor, some significant. For example, the Synchronized Multimedia Integration Language (SMIL) spec describes how to animate SVG through the <animate> element. This gives a developer the chance to add both user interactivity and independent attribute changes over time, without ever leaving the <svg> element. Unfortunately, not all browsers yet recognize SVG/SMIL animation (though alternative forms of SVG animation do exist).

“Can I Use…”  provides a thorough side-by-side comparison of all major desktop and mobile Web browsers and indicates which of their versions recognize various HTML5 features. Particularly useful is its drill down on specific SVG features, like use of Inline SVG and SVG Filter Effects, which have just been added to Internet Explorer 10.

Step Two: Create the SVG Element

This particular SVG Zombie Apocalypse Survival Predictor will use three separate SVG elements: a pane for the “city,” a control panel for the risk factors, and a pane for the prediction meter itself.

To start, create a 600×400 root element called “cityBox”:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Planning for the Zombie Apocalypse with HTML5 and SVG</title>

<script>

</script>

<style>

</style>

</head>

<body>

<svg id="cityBox" width="600" height="400">

</svg>

</body>

</html>

Voila. Invisible box. It’s winter in Zombieland. A border can be added through CSS styling, either with the “style” attribute in the <svg> element itself or by defining the style up in the header, thusly:

<style>

#cityBox {

border: 1px solid #000000;

float: left;

}

</style>

Step Three: Add Text

While developers have many ways of handling text on the page, doing it through SVG opens the door to a lot of interesting options, such as changing character offsets, stretching text, rotating sentences or fitting text to a path.

Before trying any of these, though, add a title to the cityBox element:

<svg id="cityBox" width="600" height="400">

<text x="300" y="50">

Surviving the Zombie Apocalypse

</text>

</svg>

Figure 1: SVG Element with

The x,y coordinates define the baseline of the first character. Remove them from this example, and the text pretty much disappears off the top of the SVG element.

Styling for the SVG text element comes in three flavors: the “style” attribute, a defined style or individual SVG attributes. Note, however, that certain attributes seem to misbehave depending on the method used and the browser. For example, defining “font-family” works for all browsers no matter where it goes. However, “font-size” is implemented inconsistently. Defining it in the <style> header doesn’t work in either Chrome or Internet Explorer. Defining it in the “style” attribute of the element, as in the following example, works in Chrome but not in Internet Explorer:

<text x="300" y="50" id="titleText" style="font-size: 36;">

The only technique that works in both browsers is defining “font-size” as an attribute within the <text> tag. So, for demo purposes, and maximum cross-browser compatibility, that’s how it will be done here.

<text x="300" y="50" font-family="sans-serif" font-size="36" text-anchor="middle" stroke="#000000" fill="#000000">

Note that, as with CSS, stroke and fill colors can use color names or hex values. Also note the “text-anchor” attribute, which defines the position of the text in relation to the x,y origin. Since it defaults to “left”, this example sets it to “middle” and defines the point of origin to be the center of the <svg> element.

Here’s another interesting quirk about “text-anchor” and text in general: if the <text> element exceeds the boundaries of the <svg> element, what happens next depends on the browser. In Chrome, anything outside the edges of the <svg> element is cut off. However, in Internet Explorer, the text extends outside the boundaries of the <svg> element.

Like other vector images, SVG text has both stroke and fill. By default, a <text> element displays a black fill, with no stroke. In this example, a black stroke has been added, as seen in Figure 2. Not only does it thicken the text, but as will be seen later in this series, the color of the stroke can be animated for an interesting effect.

Figure 2: element with formatting

Step Four: Images

While the point of SVG is ostensibly to create graphics, sometimes it’s better to incorporate an existing SVG graphic onto the page rather than create it from scratch. This is especially true when the graphics are being created by vector design software—such as Microsoft Expression Design, Adobe Illustrator, or Inkscape—or when they’re taken from SVG clip art libraries such as Wiki Commons.

The City pane of the Zombie Apocalypse Survival Predictor will eventually display all the elements of a zombie apocalypse. But to start, it’ll have just a single human. A single, terrified human running for his (or her) life. The human in this case originally started in Inkscape and was saved as an SVG file (human.svg). (Note: all .svg graphics files used in this walkthrough are courtesy of http://openclipart.org.)

The <image> element can work in a couple of different ways, one of which is supported across browsers and one of which is not.

First, the easiest method. Within the <svg> element, add the following:

<image id="human" x="275" y="175" width="50" height="50" xlink:href="human.svg" />

This tag adds the svg file referenced externally (“human.svg”) and places it at 275,175, which is the center of the city after compensating for image size. Speaking of size, the image is then scaled to 50×50. In this case, it’s not necessary to know the original file size. The image is automatically transformed so that its largest dimension matches the specified parameter, and the other dimension is scaled proportionally. The result should be something like Figure 3.

Figure 3. Auto-Scaled SVG Image on Chrome

Unfortunately, it doesn’t always come out like this. In many browsers, such as Firefox and Internet Explorer, the width and height attributes define the view area rather than the image size, with the result being a cropped image starting from the upper-left coordinate, as in Figure 4.

Figure 4. Auto-Scaled SVG Image on Firefox and Internet Explorer

There are a couple of ways to solve this. One is to edit the image itself and resize it to the desired dimension. But this sort of defeats the purpose of using a scalable graphic. So instead, a transform will be applied.

Opening the “human.svg” file in a text editor shows the current image dimensions in the metadata, in this case:

width=”342.70523″

height=”482.82114″

But don’t be fooled into thinking that these attributes can be manually edited and everything will come out right. Not so. Because of the rest of the XML data embedded in the SVG file, changing the width/height metadata will result in an image mask that behaves unpredictably based on the browser.

Instead, use the width and height values to create a new <image> element:

<image id="human" x="2750" y="1750" width="343" height="483" transform="scale(.10,.10)" xlink:href="human.svg" />

In this example, width and height are set to the image’s actual values (rounded). Scaling the largest dimension (height: 483) down to 10 percent creates an image close enough to 50×50. Note, however, that “transform” attributes affect element origin as well. So the original x,y coordinates of 275,175 need to change to 2750,1750 (divide the original value by the scale amount: 275 / .1 = 2750) to maintain the same placement. This results in Figure 5, taken from Internet Explorer.

Figure 5: element with transform=scale, as seen in Internet Explorer

Now the panicked little human looks the same in every browser. Or at least every browser tested for this walkthrough.

Step Five: Basic Shapes

Now that some of the trickier stuff is in place, the control panel will go back to the basics that most SVG tutorials start with: simple shapes. SVG defines several shape elements: <line>, <rect>, <circle>, <ellipse>, <polygon> and <polyline>. Entirely new shapes can also be created using the <path> element, as well.

The Predictor Control Panel will consist of triangular “step” controls for scaling quantities, text labels, and a couple of circles with images. To start, create the <svg> element and its style (which has a 1 px border for now for dev purposes).

Under <style> add the following:

#controlPanelBox {

border: 1px solid #000000;

float: left;

}

In the <body> of the page add:

<svg id="controlPanelBox" width="400" height="400">

</svg>

For creating triangles, both the <polygon> and <path> elements work well. The following two elements look identical, as seen in Figure 6:

<polygon points="50,50 100,25 100,75" stroke="black" stroke-width="1" fill="red" />

<path d="M 50 50 L 100 25 L 100 75 L 50 50" stroke="black" stroke-width="1" fill="red" />

Figure 6: <polygon> (left) and <path> (right)

With the <polygon> element, each point in the polygon is defined absolutely and the shape is automatically filled. With the
element, the origin point is defined in the data (“d”) attribute as the Moveto (“M”) value. Each succeeding Lineto (“L”) point draws the path, ending with the point of origin. This last point closes the path and creates the polygon shape. Without it, the red fill will still be in the shape of a triangle, but the stroke will be missing its last leg.

One nice trick with paths is that the Moveto and Lineto values can be relative, just by using lowercase instead of uppercase. This allows the path to be moved around easily simply by changing the Moveto value. For example, the following two elements result in an identical shape, also the same as Figure 6:

<path d="M 50 50 L 100 25 L 100 75 L 50 50" stroke="black" stroke-width="1" fill="red" />

<path d="M 50 50 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" />

For this reason, while polygons are generally easier to create, relative paths make more sense for the control panel. Several triangles will be used, so two versions can be created (mirror images), then copied and repositioned just by changing M values.

Each set of controls will also have a couple of <text> elements to serve as a label and a text field. The latter of these will be modified through JavaScript later in this series based on interaction with the controls.

So for the first parameter in the control panel, the existing human population, the set of elements should look like this:

<path id="zombieLess" d="M 50 50 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" />

<text id="zombieLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="25">

City Population (000s)

</text>

<text id="zombieText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="black" x="175" y="60">

0

</text>

<path id="zombieMore" d="M 300 50 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" />

Figure 7: controlPanelBox element with City Populaton control

As an added bonus, elements can be nested within a Group <g> element. The group as a whole can be named, styled and manipulated, with the results being applied to each member of the group. In this case, each control will be grouped just for organization.

Thanks to relative path definitions, a quick copy and paste creates the start of two identical control sets. After changing the Moveto points, origins, ids and text content, the page now has three Step controls:

<g id="zombieGroup">

<path id="zombieLess" d="M 50 50 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" />

<text id="zombieLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="25">

City Population (000s)

</text>

<text id="zombieText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="black" x="175" y="60">

0

</text>

<path id="zombieMore" d="M 300 50 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" />

</g>

<g id="mallGroup">

<path id="mallLess" d="M 50 150 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" />

<text id="mallLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="125">

# of Shopping Malls

</text>

<text id="mallText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="black" x="175" y="160">

0

</text>

<path id="mallMore" d="M 300 150 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" />

</g>

<g id="redneckGroup">

<path id="redneckLess" d="M 50 250 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" />

<text id="redneckLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="225">

Rednecks

</text>

<text id="redneckText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="black" x="175" y="260">

0

</text>

<path id="redneckMore" d="M 300 250 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" />

</g>

Figure 8: controlPanelBox element with relative <path> elements

For the last set of controls, this app needs the most basic shape of all: the circle. A <circle> element works by defining three primary attributes: center-x (“cx”), center-y (“cy”) and radius (“r”). By default, fill is black and the stroke doesn’t exist. But

since this is a toggle control, the current selection will be indicated by a thick, red stroke, while the inactive selection is a thin, black stroke. Both of them have a white fill, forming a circle that can potentially hold an image. Or a zombie.

<circle id="slowCircle" cx="75" cy="325" r="40" stroke="red" fill="white" stroke-width="4" />

<circle id="fastCircle" cx="275" cy="325" r="40" stroke="black" fill="white" stroke-width="2" />

Figure 9: Zombie Circles

The zombie image is handled the same way as the human image was—dimensions are defined as the actual dimensions of the graphic, then a “transform” attribute is applied to scale it to .16 of the original size. This scale applies to the x,y origin as well. Also, because SVG elements are rendered in order, the images need to appear after the circles:

<circle id="slowCircle" cx="75" cy="325" r="40" stroke="red" fill="white" stroke-width="4" />

<image id="slowZombie" x="375" y="1875" width="175" height="304"

transform="scale(.16,.16)" xlink:href="zombie.svg" />

<circle id="fastCircle" cx="275" cy="325" r="40" stroke="black" fill="white" stroke-width="2" />

<image id="fastZombie" x="1630" y="1875" width="175" height="304" transform="scale(.16,.16)" xlink:href="zombie.svg" />

Figure 10: Zombie Circles with Zombies

Lastly, a label/text field pair are added, and the whole thing is grouped:

<g id="speedGroup">

<circle id="slowCircle" cx="75" cy="325" r="40" stroke="red" fill="white" stroke-width="4" />

<image id="slowZombie" x="375" y="1875" width="175" height="304" transform="scale(.16,.16)" xlink:href="zombie.svg" />

<text id="speedLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="315">Zombie Speed</text>

<text id="speedText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="350">Slow</text>

<circle id="fastCircle" cx="275" cy="325" r="40" stroke="black" fill="white" stroke-width="2" />

<image id="fastZombie" x="1630" y="1875" width="175" height="304" transform="scale(.16,.16)" xlink:href="zombie.svg" />

</g>

At this point in its development, the Zombie Apocalypse Survival Predictor should look like Figure 11.

Figure 11. Completed Zombie Apocalypse Survival Predictor (thus far)

What’s Next

Obviously, anyone using the Predictor in its current state would be dead meat. Or undead meat as the case may be. Or just food. The next steps in this series will build on existing controls covered here by adding a pane for the prediction scale, some animation and some JavaScript to make buttons do things.

In the meantime, the project thus far can be viewed at: http://justinwhitney.com/zombies/zombies_part1.htm

Additional examples of SVG in action can be viewed at:

SVG Dice

SVG Gradient Background Maker

SVG Filter Effects in Internet Explorer 10

SVG Helicopter

About the Author

Justin Whitney builds Web sites and mobile apps in a bunker in rural East Texas while prepping for the end of civilization.

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/19/surviving-the-zombie-apocalypse-with-html5-svg/feed/ Fontastic Helps You Create Customized Icon Fonts http://www.webappers.com/2013/06/18/fontastic-helps-you-create-customized-icon-fonts/ http://www.webappers.com/2013/06/18/fontastic-helps-you-create-customized-icon-fonts/#comments Tue, 18 Jun 2013 07:05:55 +0000 Ray Cheung http://www.webappers.com/?p=8791

Advertise here via BSA

Fontastic helps you create your customized Icon Fonts. You can save time adding icons to your websites, get crispy clear icons and speed up your website in seconds. Fontastic will revolutionize your Web Design process. Simple click to select the icons to your font. By including only the icons you need, you make your website faster. [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

Fontastic helps you create your customized Icon Fonts. You can save time adding icons to your websites, get crispy clear icons and speed up your website in seconds. Fontastic will revolutionize your Web Design process.

Simple click to select the icons to your font. By including only the icons you need, you make your website faster. You can also customize your font. Keep the standard settings, or change the character and CSS mapping to make it easier to code. And finally download a packaged folder including all the fonts, the HTML & CSS code, and a reference page.

fontastic2

Requirements: -
Demo: http://fontastic.me/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/18/fontastic-helps-you-create-customized-icon-fonts/feed/ Gives Users Real Time Hints & Progress on Forms http://www.webappers.com/2013/06/18/gives-users-real-time-hints-progress-on-forms/ http://www.webappers.com/2013/06/18/gives-users-real-time-hints-progress-on-forms/#comments Tue, 18 Jun 2013 07:01:50 +0000 Ray Cheung http://www.webappers.com/?p=8787

Advertise here via BSA

Progression.js is a jQuery plugin that gives users real time hints & progress updates as they complete forms. All you have to do is to give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression. Once [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

Progression.js is a jQuery plugin that gives users real time hints & progress updates as they complete forms. All you have to do is to give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression. Once you have created your form you will need to initiate the plugin. It is released under MIT License.

progressive-form

Requirements: jQuery Framework
Demo: http://git.aaronlumsden.com/progression/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/18/gives-users-real-time-hints-progress-on-forms/feed/ Photoshop Template of iOS 7 GUI Elements http://www.webappers.com/2013/06/17/photoshop-template-of-ios-7-gui-elements/ http://www.webappers.com/2013/06/17/photoshop-template-of-ios-7-gui-elements/#comments Mon, 17 Jun 2013 07:05:32 +0000 Ray Cheung http://www.webappers.com/?p=8778

Advertise here via BSA

teehan+lax has released iOS 7 GUI PSD which is a Photoshop template of GUI elements found in the beta 1 release of iOS 7. The sole purpose of this file is to help you pitch, design and build amazing software. The PSD is a well organized, labeled and layered PSD full of editable shape layers. Most [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

teehan+lax has released iOS 7 GUI PSD which is a Photoshop template of GUI elements found in the beta 1 release of iOS 7. The sole purpose of this file is to help you pitch, design and build amazing software.

The PSD is a well organized, labeled and layered PSD full of editable shape layers. Most people find it useful for mocking up apps. Others use it to concept ideas or create custom interface elements that work harmoniously with those native to iOS.

ios7-psd

Requirements: Photoshop
Demo: http://www.teehanlax.com/tools/ios7/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/17/photoshop-template-of-ios-7-gui-elements/feed/ Micro Grid Based Wireframe PSD Template http://www.webappers.com/2013/06/17/micro-grid-based-wireframe-psd-template/ http://www.webappers.com/2013/06/17/micro-grid-based-wireframe-psd-template/#comments Mon, 17 Jun 2013 07:01:25 +0000 Ray Cheung http://www.webappers.com/?p=8782

Advertise here via BSA

Microframe is a micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts. The repo includes: A Microframe PSD Template with a 12 column grid and 3 sample layouts, A Blank Microframe PSD Template with 12 column grid. A Microframe Detail PSD Template which you can place your Microframe PSDs [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

Microframe is a micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts. The repo includes: A Microframe PSD Template with a 12 column grid and 3 sample layouts, A Blank Microframe PSD Template with 12 column grid. A Microframe Detail PSD Template which you can place your Microframe PSDs in to explain/present to clients, or simply detail components for your own reference. The Detail PSD also has a view for laying out your layout variations.

The PSD uses guides to create a 12 column grid which you can use to align your elements all pertty like. There is a 12 column layout (for standard laptop/desktop views), a 6 column layout (for tablet views), and a 4 column layout (for mobile views). Each layout is grouped into a Photoshop group.

wireframe

Requirements: Photoshop
Demo: https://github.com/jglovier/microframe
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/17/micro-grid-based-wireframe-psd-template/feed/ Creative and Modern Button Styles and Effects http://www.webappers.com/2013/06/14/creative-and-modern-button-styles-and-effects/ http://www.webappers.com/2013/06/14/creative-and-modern-button-styles-and-effects/#comments Fri, 14 Jun 2013 07:05:44 +0000 Ray Cheung http://www.webappers.com/?p=8773

Advertise here via BSA

Codrops has shared some Creative Button Styles for our inspirations. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

Codrops has shared some Creative Button Styles for our inspirations. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.

Buttons

Requirements: CSS
Demo: http://tympanus.net/Development/CreativeButtons/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/14/creative-and-modern-button-styles-and-effects/feed/ 100% Free and Open Source E-Commerce Solution http://www.webappers.com/2013/06/14/100-free-and-open-source-e-commerce-solution/ http://www.webappers.com/2013/06/14/100-free-and-open-source-e-commerce-solution/#comments Fri, 14 Jun 2013 07:01:37 +0000 Ray Cheung http://www.webappers.com/?p=8769

Advertise here via BSA

Sylius project provides a full stack e-commerce solution. In further parts of The Book you’ll learn how to master it and develop your next project really quickly. Sylius provides a complete webshop solution and some of features include: Flexible product catalog, with multiple variants per product, options, properties (think attributes) and protypes. Categorization engine, which allows you [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

Sylius project provides a full stack e-commerce solution. In further parts of The Book you’ll learn how to master it and develop your next project really quickly. Sylius provides a complete webshop solution and some of features include:

  • Flexible product catalog, with multiple variants per product, options, properties (think attributes) and protypes.
  • Categorization engine, which allows you to categorize the products under various taxonomies, by “Brand”, “Category” or whatever you imagine.
  • Inventory tracking system, where you can track every single unit of your inventory or disable tracking at all.
  • Powerful shipping with configurable shipping categories, item sizes, weight, shipments management and customizable cost calculators.
  • Taxation engine, with support for many different tax categories, rates and zones.
  • Orders system allowing you to easily create and manage sales, with super-flexible adjustments which can serve many different purposes, from taxation & shipping to promotions and manual order total changes.
  • Customizable checkout process, built from reusable steps.

And best of all, Sylius is 100% free and open source − and they intend for it to stay that way.

sylius

Requirements: PHP and Symfony2 Framework
Demo: http://sylius.com/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/14/100-free-and-open-source-e-commerce-solution/feed/ Detect Errors and Potential Problems in JavaScript http://www.webappers.com/2013/06/13/detect-errors-and-potential-problems-in-javascript/ http://www.webappers.com/2013/06/13/detect-errors-and-potential-problems-in-javascript/#comments Thu, 13 Jun 2013 09:30:35 +0000 Ray Cheung http://www.webappers.com/?p=8765

Advertise here via BSA

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. The goal is to help JavaScript developers write complex [...]

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. The goal is to help JavaScript developers write complex programs without worrying about typos and language gotchas.

Any code base eventually becomes huge at some point, and simple mistakes–that would not show themselves when written–can become show stoppers and waste hours of debugging. And this is when static code analysis tools come into play and help developers to spot such problems. JSHint scans a program written in JavaScript and reports about commonly made mistakes and potential bugs. The potential problem could be a syntax error, a bug due to implicit type conversion, a leaking variable or something else.

js-hint

Requirements: -
Demo: http://www.jshint.com/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/13/detect-errors-and-potential-problems-in-javascript/feed/ Screen Specifications of Most Popular Devices http://www.webappers.com/2013/06/12/screen-specifications-of-most-popular-devices/ http://www.webappers.com/2013/06/12/screen-specifications-of-most-popular-devices/#comments Wed, 12 Jun 2013 07:47:52 +0000 Ray Cheung http://www.webappers.com/?p=8761

Advertise here via BSA

Screensiz.es helps you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from Wikipedia, and for a better understanding of Pixel Density. The “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzzy math. Requirements: - Demo: http://screensiz.es/ License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

]]>

Advertise here via BSA

Screensiz.es helps you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from Wikipedia, and for a better understanding of Pixel Density. The “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzzy math.

screen-sizes-mobile

Requirements: -
Demo: http://screensiz.es/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

]]> http://www.webappers.com/2013/06/12/screen-specifications-of-most-popular-devices/feed/