SVG and JavaScript Image Placeholders

Web developers love online services like lorempixel, placeimage and especially placekitten. They save us time during the initial coding of a website or service, providing customizable image placeholders so we can concentrate on the actual coding of the product instead of searching for suitable stock images. All of these services, however have one thing in common – they require Internet connection, which in my case is not always lightning fast. This is why I decided to create a similar service, which runs fully in the browser – AcidJs.ImgPlaceholder – a tiny JavaScript class (only 2Kb minified and g-zipped), utilizing base64-encoded SVGs and fully configurable via *-data properties.

thumb

Usage

Normal <img /> tags, supplied with data-imgplaceholder attribute:

<img data-imgplaceholder />
<img data-imgplaceholder width="200" height="100" />
<img data-imgplaceholder data-label="Custom Label" data-border-width="20" data-border-color="#b01e00" data-bgcolor="#f3b200" data-forecolor="#b01e00" />
<img data-imgplaceholder data-forecolor="#333" data-bgcolor="#00c13f" width="200" height="130" />
<img data-imgplaceholder data-border-color="#e34c26" data-label="HTML5, SVG and JavaScript" data-bgcolor="#f6f6f6" width="300" height="200" />
<img data-imgplaceholder data-forecolor="#333" data-border-width="20" data-bgcolor="#00c13f" width="200" height="140" />

HTML Attributes

Any standard HTML attributes for images like width, height, title, alt, etc plus the following class-specific attributes:

  • data-imgplaceholder – Required attribute, which marks the image tag as a placeholder.
  • data-label – Allows optional label for the placeholder. Default value is width x height.
  • data-forecolor – Optional label color. Default value is #666.
  • data-bgcolor – Optional background color. Default value is #d4d0c8.
  • data-border-width – Optional border width. Default value is 10.
  • data-border-color – Optional border color. Default value is #666.

Methods

  • render – The method is invoked automatically on page load, but it can be called also manually to create image placeholders on demand.

Supported Browsers

Any SVG-capable browser.

Check the AcidJs.ImgPlaceholder here. If you are also looking for similar text placeholders you may also want to give a try to XLipsum – a HTML5 WebComponent that can generate Lorem Ipsum texts in various formats.

Fair and Simpler Ribbon JS Licenses

With the release of version 4.3.0 of Ribbon JS, the commercial version of the control is now offered in two fair types of licenses – discounted and full commercial. The non-source code option has been removed and now source code is included in all licenses. Here are the details for the new purchase options:

Discounted License with Source Code

  • You are an individual, using Ribbon JS only for personal projects.
  • You are an individual or business, using Ribbon JS for commercial projects, and your yearly gross revenue does not exceed $10,000 USD.
  • You are an educational or non-profit organization.
  • 25% discount on major updates.

Full Commercial License with Source Code

  • You should purchase this license if none of the conditions of the Discounted License with Source Code applies.
  • 10% discount on major updates.

About Ribbon JS:

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks, support for AngularJS directives and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.

ribbon.js.scr

 

Ribbon JS 4.3.0 is out with Support for AngularJS Directives

I am happy to announce that the new version of Ribbon JS comes with a long awaited implemented feature request – support for AngularJS directives.

Release Notes:

  • Added support for AngularJS directives applied to the bounding box, tabs and tab ribbons in the configuration object. Check the documentation here.

* Version 4.3.0 is fully compatible with versions 4.0.0 and above.

About Ribbon JS:

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks, support for AngularJS directives and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.

ribbon.js.scr

Screenshots:

ribbonjs.4.1.0

IMDb Fetcher API Subscriptions

From March 8, 2015 on the IMDb Fetcher API service will be available via subscription plans. This is done in order to improve the service, move it to a more reliable hosting provider (when I developed this project I didn’t realize that it will become so popular and now my servers are literally choking) and implement new REST methods. Applications utilizing the free version of the API will still work, but will randomly get status code 6:

{
    "status": "fail",
    "code": 6,
    "data": "The apikey parameter is not provided or value is invalid. To use this service you need to purchase an API key from http:\/\/imdb.wemakesites.net\/purchase.html. The free version returns random errors on queries. Refresh the query and try again."
}

After choosing a subscription plan that suits for your needs and getting your API key, you have to change the query strings to the API methods by adding a new parameter – apikey:

http://imdb.wemakesites.net/api/1.0/get/name/?q=Clint%20Eastwood&apikey=YOUR_API_KEY

* AcidJs IMDb Fetcher is an easy to use REST API for getting movie, series and names (actors, writers, directors, etc.) data from IMDb and returning it in the form of serialized JSON objects that can be used on web apps or sites. Go straight to the documentation to see what’s available so far. If you are not a developer, and you want to display movie data from IMDb on your website, make sure you check the widgets section. In case you don’t want to use the API, movie and actors data dumps are also available.

Ribbon JS 4.2.0 is Out

I’ve just released a new minor version of Ribbon JS, introducing several new methods, a new event and API interface for setting declarative discrete data to tools, commands and tabs (setting/getting of this data is also available through the new ribbon methods and returned by some of the events of the control). Check the demo of the discrete data setting here.

Release Notes:

  • Version 4.2.0 is fully compatible with versions 4.0.0 and above.
  • Optional tool/command/tab property: props – Ribbon JS now allows the setting of discrete custom properties to tabs, tools and commands. These properties can be set either in the configuration of a tool or tab (the props key) or set/get via the setToolProps, getToolProps, getTabProps and setTabProps methods of the ribbon. The data of the prop keys is returned also by the events, triggered by the ribbon.
  • Method getReleaseNotes() – Programmatically open ribbonjs.com/release-notes and display the release notes of the current version of Ribbon JS.
  • Method getToolData(name) – Get the data associated with the queried tool by it’s name.
  • Method setToolProps(name, key, value) – Set the optional props key (check the Ribbon JS configuration documentation) to a tool/command definition for more info about this key. The required parameters are tool/command name (String) of the tool/command, key (String or Number) name and value (Any).
  • Method getToolProps(name) – Get the props object, associated with a tool or command.
  • Method getTabProps(name) – Get the props object, associated with a tab, queried by its name.
  • Method setTabProps(name, key, value) – Set the optional props key ( check the Ribbon JS configuration documentation) to a tab for more info about this key. The required parameters are tab name (String) of the tool/command, key (String or Number) name and value (Any).
  • Event: “acidjs-ribbon-toggle” – The event is triggered when tab button is clicked (in this case the event always returns {expanded: true}) or when the ribbon is collapsed or expanded either by clicking the expand/collapse button in the top right corner of the control or programmatically via the expand() and collapse() methods.

About Ribbon JS:

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.

ribbon.js.scr

Screenshots:

ribbonjs.4.1.0