HTML5 - portalZINE NMN - development meets creativity

GreenApe is breathing again

30. August 2017

After some downtime, GreenApe is breathing again. I revived the brand with a good friend of mine and we will be reopening shop options shortly.

Michael and I have been friends for a long time. We have been working on many different projects over the years.

He launched GreenApe in 2011 and I helped him with his first steps. A couple of months ago we decided to merge our competences and expand what GreenApe offers and stands for.

From the website: “The GreenApe brand was established in 2011. GreenApe’s career began with the 1st Single Malt Whisky Coffee.

As the first of its kind, our coffee is refined with Original Single Malt Whisky. To this day, he pampers many connoisseurs and gourmets with his unique taste. Now there is another reason to rejoice.

From now on, we are continuously expanding the GreenApe product world with several stylish gadgets and useful accessories. For you this means that you will be able to discover even more beautiful, special or practical things in the future.“

GreenApe is all about lifestyle & leisure products, fun gadgets and unique food & drinks.

Font Face Observer … gives you a font promise ;)

20. August 2017

Font Face Observer is a fast and simple web font loader. You can use it to load fonts and customise your browser’s font loading behaviour.

Font Face Observer gives you control over web font loading using a simple promise based interface. It doesn’t matter where your fonts come from: host them yourself, or use a web font service such as Google Fonts, Typekit, Fonts.com, and Webtype.

Font Face Observer @ Github

Easy leaderlines for your webpage

20. August 2017

Quickly draw a leader line in your web page.

<div id="start">start</div>
<div id="end">end</div>

1 2	<div id="start">start</div> <div id="end">end</div>

// Add new leader line from `start` to `end` (HTML/SVG elements, basically).
new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

// Add new leader line from `start` to `end` (HTML/SVG elements, basically).

new LeaderLine(

document.getElementById('start'),

document.getElementById('end')

);

Leaderline @ Github

Export SVG Animations for the Web with Snap.SVG Animator

18. June 2017

Snap.svg Animator is an open sourced plugin for Animate CC that exports animations for the web rendered in SVG.

It uses the Snap.svg JavaScript library to dynamically draw SVG content at runtime. Snap.svg is a JavaScript library created by Dmitry Baranovskiy, who also created Raphaël.js.

A simple API allows you to write and manipulate SVG content in the browser.

Adobe Plugin / Snap.SVG

Lets fix the short comings of current CSS integrations – EQCSS / Element queries

14. May 2017

“Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser.
Unlike CSS @media queries, @element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains.
Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they contain.”

Element Query Conditions

Icons in pure css – CSS Icon

6. May 2017

Icon set made with pure css code, no dependencies.

Github

Smart CSS viewer for Chrome – CSS Peeper

29. March 2017

Inspect styles in a simple, well-organized & beautiful way with this Chrome extension. You can select any object to get more specific information about them. Also a nice way to browse color palettes of websites you visit.

CSSPeeper

Chrome 56 .. whats new?

9. February 2017

With Chrome 56, web apps can now communicate with nearby Bluetooth Low Energy devices using the Web Bluetooth API, position sticky is back – making it easy to create elements that scroll normally until sticking to the top of the viewport. And HTML5 by Default is enabled for all users.

Chrome 56 on iOS also adds the ability to scan QR codes directly within Chrome. So many thought QR-Codes were dead, well not so much !

Google

Rocket.Chat – Open Source Web Chat Platform

6. February 2017

Rocket.Chat is am impressive Open Source Web Chat Platform, with a huge amount of features:

BYOS (bring your own server)
Multiple Rooms
Direct Messages
Private Groups
Public Channels
Desktop Notifications
Mentions
Avatars
Markdown
Emojis
Custom Emojis
Reactions
One touch Geolocation
TeX Math Rendering – inline math typesetting
Media Embeds
Link Previews
Sent Message Edit and Deletion
Transcripts / History
File Upload / Sharing
Scalable file sharing – S3 uploads with CDN downloads
Full text search
Live chat / Messaging call center
LDAP Authentication
CAS 1.0, 2.0 support for education institutions and hosting providers worldwide
Support for Okta SSO through SAML v2
I18n – Supports 22 Languages
Hubot Friendly
(Beta) Face to Face Video Conferencing (aka WebRTC )
(Beta) Multi-users Video Group Chat
(Beta) Jitsi integration
Audio calls
Multi-users Audio Conference
Screensharing
….. more

Rocket.Chat

A better HTML5 parser for PHP – HTML5DOMDocument

4. February 2017

HTML5DOMDocument extends the native DOMDocument library. It fixes some bugs and adds some new functionality.

Preserves white spaces
Preserves html entities
Preserves void tags
Allows inserting HTML code that moves the correct parts to their proper places (head elements are inserted in the head, body elements in the body)
Allows querying the DOM with CSS selectors (currently avaiable: *, tagname, tagname#id, tagname.classname, #id, .classname)

<?php
require 'vendor/autoload.php';

$dom = new IvoPetkov\HTML5DOMDocument();
$dom->loadHTML('<!DOCTYPE html><html><body>Hello</body></html>');
echo $dom->saveHTML();

<?php

require 'vendor/autoload.php';

$dom = new IvoPetkov\HTML5DOMDocument();

$dom->loadHTML('<!DOCTYPE html><html><body>Hello</body></html>');

echo $dom->saveHTML();

GitHub

Element Query Conditions

Width-based Conditions

Height-based Conditions

Count-based Conditions

Scroll-based Conditions

Aspect-based Conditions

Meta-Selectors