CIGen&twbs3

My Codeigniter Scaffolding with twitter bootstrap 3

The Start

Yesterday I was thinking about creating the phpadmin like crud interface for my database tables. About two years ago I found that nice little scaffolding plugin called spark plug on google code. Via the url it allows you to very easily create a basic skeleton of your codeigniter php application.

Note on Codeigniter

Knowing that Codeigniter got bit of a handycap because of the unsave future of the ownership of the codeigniter project. It’s still a very small footprint framework and really best php framework for starters. Even if you’re used to create your mvc and crud. It was a codeigniters’ philosophy to not need to use terminal commands (CLI) to get your web application running. Hopefully a good soul or two will take care of this great project.

Other php Frameworks with Skeleton generation

Symfony might be the rolls royce use generators via CLI to scaffold almost everything and start coding straight forward php. No fallback to phpmyadmin database manners. Symfony or Laravel also might got a overhead of functionality, even if they have bundles that can be used optionally. Codeigniter is known as a very small footprint php mvc. its about 100k of size. When being a newbie CI’s more than just heaven. So Ci is really rapid php development.

The Motivation

The reason why I changed the source of sparkplug is because twitter bootstrap is really the quasi standard in frontend creation these days. As I always got the idea of pushing it a little bit. I also made it clean and ready for use the way I need it anyway with:

  • Twitter Bootstrap (buttons, tables, alerts)
  • serverside validation preset
  • html5 Markup
  • clientside validation preset
  • CI pagination for the list view
  • xss cleanup

So theres still a bit of additional repetitive work to perform, but still again some time saved:-)

Usage

If you call the url to your sparkplug controller with the method scaffold and the param {tablename} it will generate the whole crud for just one table. While rewriting the sparkplug controller to a fully working new table controller.

MEANS: You create one tables’ crud, rename the controller, paste in the new sparkplug controller, and run again for the next table. just to prevent conflicts:)…then on production site, make shure to remove the spark plug scaffolding.

One table fits all at the moment.
Manual rename of the ci controllers is still required.
This is no different to the original spark plug…
@TODO create startpage with list of all tables…

You’ll find the source of the codeigniter scaffolding library at:

Sparkplug twbs3 on github

My Codeigniter Scaffolding with twitter bootstrap 3 isn’t a fork. But like usual in codeigniter to push creators, it comes with a fully working installation of codeingiter with minimum configuration.

the non fork of ci sunrise please don’t get angry at me hopefully, just don’t like forking yet.

service!

Jq back2top

My JQuery Plugin jquery.backtotop.my – An Exercise on grunt and qunit, etc…

The following little article about my JQuery Plugin jquery.backtotop.my, is the result of three days on working with grunt, so here is the masterplan whats all behind such a (silly) plugin handcraft;-).
The functionality of the plugin is pretty simple and is an idea of the php.net site, where its used with the scrollto singlepage jquery plugin. There if clicking on an html id anchor then instead of switching instantly to the content, the webpage smoothly scrolls with a little speed and a easing-out until the position is completed. I left the easing out because then jquery ui or the jquery easing plugin would be needed. It’s a little overkill you may think to use a jquery plugin, but we’ll see. The plugin can be tested with qunit, the styles can be changed and set using LESS and easyly compiled using grunt.

The Requirements

  • Have a backtotop scroll button using iconfonts (c)
  • Have a button with fadeIn and fadeOut when scrolling more than the viewports height.
  • Have a linear scroll to top when pressing the button.

The Tools

  • grunt and nodejs
  • npm jquery init scaffolding
  • twbs3
  • qunit
  • jshint
  • lessc
  • concat
  • uglify
  • copy for iconfonts dist

The books

  • packt js unittesting
  • addy osmany js design patterns
  • grunt.org documentation

The screenshot

jquery.backtotop.my
jquery.backtotop.my

I’ve got a demosite installed on keepitnative.ch

You can check the source on Github

Jq mail2

The Idea –

What to do when creating a webpage. Have an basic customers’ goal to achieve, choose important content, structure the content, and choose a navigation. Whats the design? What functionality? You may choose to have a members area, maybe want some special value added to a representative web presence. Some even wish to have a web app running which doesn’t cost but gives a little win.
I’m of the first common web design with just the plan to create a clean web presence with the needed features so far (apart from ecommerce…).
To keep the work to a minimum here’s a possible solution to avoid using a php form-mailer and just use the good old mailto with obfuscation. An alternative to Googles reCaptcha based mailhide.

My JQuery Plugin obfuscateemail

My JQuery Plugin obfuscateemail

How it works:

The idea is that spambots usually cannot parse javascript at present time. So you can have a little security by using such scripts as my plugin which is called «My JQuery Plugin obfuscateemail».
After pressing the email link on the webpage by a website user, it opens the users’ mailclient (native html) and sets the mousecursor inside the users’ new email. Subject and body still are optional, but I thought with this feature, the whole mail process is close to a common php form mailer.
You can add email addresses in the options object before calling the plugin.
it uses method overloading, so please just check the following code

The plugin call

The actual plugin

The html

The source Code: obfuscateemail.js

Also credit to henry which created a basic logic of the mailto script, based on I got the idea to wrap it in a jquery plugin, cheers

Brugg (brʊk)[3] ist eine Kleinstadt und Einwohnergemeinde im Kanton Aargau in der Schweiz sowie Hauptort des Bezirks Brugg. Die Stadt liegt beim Wasserschloss der Schweiz, dem Zusammenfluss von Aare, Reuss und Limmat. Sie ist 16 Kilometer von Aarau, 27 Kilometer von Zürich und 45 Kilometer von Basel entfernt (jeweils Luftlinie).
Der Ortsname ist das schweizerdeutsche Wort für «Brücke». Dies ist ein Hinweis auf den eigentlichen Zweck der Stadtgründung durch die Habsburger, denn Brugg entstand an einer Brücke an der engsten Stelle der Aare im Mittelland. Im mittlerweile eingemeindeten Dorf Altenburg befindet sich die älteste nachweisbare Residenz der Habsburger, bis zur Verlagerung ihrer Macht in Richtung Österreich war Brugg das Zentrum des habsburgischen Kernlandes. Von 1415 bis 1798 war Brugg eine Berner Untertanenstadt und gehört seither zum Kanton Aargau. Heute ist Brugg Sitz des Schweizerischen Bauernverbandes sowie Standort der Fachhochschule Nordwestschweiz und einer Genietruppen-Kaserne der Schweizer Armee.

RWD Tooltip

Here’s a zip of my WordPress Responsive Navigation Tooltip Plugin. it displays a short title in a tooltip for all the links of the main navigation.
NOTE: the plugin was intended to display the tooltips on every page. to display the navigation links only on a certain page, you can wrap the plugin call in an if statement:

NOTE: The plugin is only displaying on desktop. if your theme changes the navigation html markup, in order to display a mobile navigation, you’ll have to change the css properties of your tooltip manually. that’s why the css isn’t correct yet, and you’ll probably need to change it.

Not online and tested anymore, still supported by me though. i implemented this tiny wordpress plugin about two years ago. Its a copy of a responsive tooltip, based on css resizing i found on the web, when no such plugin was available. I implemented it for my old website, which is now redesigned and there’s no use for it at the moment. I added a zip to save the little work, for use in future time.

The original source of the tooltip css, i used for this little plugin is probably not online anymore, so you need to test it, if the WordPress Responsive Navigation Tooltip Plugin still works.

Here’s the whole plugin logic highlighted. i’ll start with the stylesheet:

the stylesheet:

Then the markup for the WordPress Responsive Navigation Tooltip:

sample markup for a wordpress navigation

adding css class to the navigation and some text to the tooltip

Here’s the whole source of the script

jquery code logic of the tooltip

Here’s the plugin entry file, as simple as this:

wordpress php plugin logic

use plugin only on certain pages

Download the plugin zip:

responsivetooltip download zip

It’s also better practice to use a wordpress plugin, than assemble it by linking the javascript and css manually, service.

Brugg (brʊk)[3] ist eine Kleinstadt und Einwohnergemeinde im Kanton Aargau in der Schweiz sowie Hauptort des Bezirks Brugg. Die Stadt liegt beim Wasserschloss der Schweiz, dem Zusammenfluss von Aare, Reuss und Limmat. Sie ist 16 Kilometer von Aarau, 27 Kilometer von Zürich und 45 Kilometer von Basel entfernt (jeweils Luftlinie).
Der Ortsname ist das schweizerdeutsche Wort für «Brücke». Dies ist ein Hinweis auf den eigentlichen Zweck der Stadtgründung durch die Habsburger, denn Brugg entstand an einer Brücke an der engsten Stelle der Aare im Mittelland. Im mittlerweile eingemeindeten Dorf Altenburg befindet sich die älteste nachweisbare Residenz der Habsburger, bis zur Verlagerung ihrer Macht in Richtung Österreich war Brugg das Zentrum des habsburgischen Kernlandes. Von 1415 bis 1798 war Brugg eine Berner Untertanenstadt und gehört seither zum Kanton Aargau. Heute ist Brugg Sitz des Schweizerischen Bauernverbandes sowie Standort der Fachhochschule Nordwestschweiz und einer Genietruppen-Kaserne der Schweizer Armee.

WordPress Responsive Tooltip

WordPress Responsive Tooltip

IE7&h5bp

IE7 and HTML5 Boilerplate – The task:

Imagine you plan to use IE7 and HTML5 Boilerplate for a website, that has to be displayed correctly.
So first you’re quite happy about the nice idea with boilerplate as a perfect starting point for a new website. A while ago there were CSS prefixes for the loads to css change for the older versions of internet explorer. since quite a time, the ie prefixes have been removed. In the project i’m talking about, needed to work on ie7. the good design was making it fun:-).

IE7 and Quirksmode

I was using html5 doctype for an off the scratch website. using html4 doctype would have been an option to have no problems on ie7. Still with modernizrjs and html5 shiv, html5 markup like ‘header’ and footer can be safely used. This makes sense on a new website, not a responsive redesign.

Testing html5boilerplate on ie7 was a shock. The paddings were not set correctly. The solution was to use the ‘http-equiv’ meta:

and use css property

not to fall in ie7’s evil quirksmode…

The solution modernizr.js

Modernizrs’ polyfilling is great to detect features that aren’t supported on older browsers.
HTML5shiv was perfectly doing its job creating via javascript.

or similar. Here’s the html5shiv source.

Using CSS prefixes for older browsers

What you have to do to fix your layout is set the widths for your html5 tag columns again.
Heres the example of your /css/main.css

These prefixes are deprecated in the newest version of html5 boilerplate.

Html5 Boilerplate features

html5boilerplate
html5 boilerplate project page

Html5 boilerplate uses:

  • html5 markup, using elements like header, footer, aside and article
  • modernizr and jquery already linked as a boilerplate
  • normalize.css, the modern alternative for css resetting
  • htaccess tweaks for security matters, e.g. a 404error page if a site doesn’t exist
  • Google analytics prepared javascript wrapper

IE7 and HTML5 Boilerplate usage and experience

Hope you could profit form this little back in the old days when IE7 was destroying a web developers’ day, to remember to set widths on the conditional comment classes in your main.css (also little tip for starters).
On Mobile Boilerplate the problem is not existent, (apart from separating Mobile Windows 7 in HTML5 boilerplates css prefixes), as all other mobile browsers are capable of HTML5 elements and stick to w3c drafts. and so on…

Boilerplate is just great to start a new website template markup with.

This was my post about IE7 and HTML5 Boilerplate.

RwdTypo

Mein JQuery Plugin zu Fluide Layouts und Typografie: Den Plugin habe ich ergänzt durch eine Plugin Option. Der Plugin kann nun mit einem Wrapper Element konfiguriert werden. Das kann z. B. ein Paragraph ‘p’ sein. Nur so kannst Du einen Text testen, welcher ein Bild umfliesst.


Angepasst ist die $(selector).html() – Methode anstatt der $(selector).text() Methode. Die html Methode liest auch HTML Tags, währendem die text()-Methode nur den Text innerhalb eines Elementes einliest.

Der Aufruf des Plugins geht wie folgt:

Das Resultat sieht wie folgt aus:

Desktop:

Desktop Ansicht
Desktop Ansicht

Mobile:

 Mobile Ansicht
Mobile Ansicht

Der Trick mit dem Sternchen ist wie bereits in einem früheren Post beschrieben, dass auf einer Zeile nach 45 Buchstaben ein Stern kommt der ohne den Stern nach 75 Zeichen auf einer Zeile Platz finden sollte. Sonst sind es zu wenige Wörter auf einer Zeile (1 Stern) oder zu viele Wörter mit zwei Sternen.
Bei meinem Plugin sind nur die Ersten zwei Sterne relevant die anderen kannst Du ignorieren. Für weitere Text Analysen muss der Plugin auf einen anderen Paragraphen angewendet werden, indem Du den Selektor des Plugins auf einen Text anwendest.

Das Bildschirm Resultat, um die Mobile Sizes zu testen

Service.

LESS CSS

Meine LESS lernen Responsive Website ist nun auf dem Stand von Version 1.0.4.
Es ist die Vertiefung von LESS Theorie. Themen sind:

  • Clientseitige Kompilierung,
  • Serverseitige Kompilierung,
  • LESS Anwendung,
  • IDEs/Editoren zur LESS-Bearbeitung.

Probleme, die ich heute gelöst habe:

  • Site SEO-Optimierung,
  • Internet Explorer HTML5 Elemente,
  • Internet Explorer CSS3 Gradients,
  • Internet Explorer fehlende SVG-Unterstützung, durch PNG ersetzt, adaptive images währen nett, aber der Nutzen ist fraglich.
MYLESSStudies
MYLESSStudies

Modernizr.js löst das Eine oder Andere Problem im Internet Explorer.
Was bleibt ist die JQuery Responsive Accordion Navigation (mit angepassten css widths und margins), welche im Internet Explorer nicht zum funktionieren scheint oder gar während den umfangreichen Bauarbeiten an der Website kaputt gegangen ist:-(.
Eventuell schreibe ich bald ein Toggle-Accordion, JQuery basierend als IE tauglichen Ersatz.

Fazit:
Einsatz eines Serverside-Templatings und -Routings ist daraus entstanden, um die Code-Menge zu minimieren.

Ein CSS System wie naheliegend Twitter Bootstrap oder YAML CSS Framework wollte ich nicht verwenden, ich wollte ja schliesslich das Response Webdesign Buch bearbeiten und in LESS Einblicke erhalten, die dann in einem Vortrag in der Firma weitergegeben werden sollen.
Twitter Bootstrap Grid, Components und CSS-Klassen lernen macht schon eher Sinn. Es ist aber auch nicht trivial wirklichen Lernerfolg zu erhalten und nicht wieder in der reinen Anwendung zu verweilen. Auch das bootstrap.js ist eher fragil und ich befürchte dass mit grossem Schaden wie bei meinem letzten Code-Igniter Projekt Komponenten wie das Modal Window, nach ein monatiger Arbeitspause auf einmal nicht mehr funktionieren. Das ist schwierig zu verarbeiten und die Motivation leidet sehr stark. Darum gerade möglichst wenig Magie und überschaubaren Code mit verinnerlichtem Wissen.

Clientseitiges JS-Templating und -Routing funktioniert bei abgeschalteten Javascript nicht. Allgemein ist bei einem Javascript Fehler das JS-Templating/-Routing im Client blockiert. Die Projekt-Ordner sind so benannt, dass alternativ ein Clientside Framework eingesetzt werden könnte.

Mein Routing/Templating bindet ohne Codewiederholung ‘flat’ html Fragmente ein.
@TODO Tinymce, Filemanager, Bilderupload im Admin Panel sowie News Frontend mit MVC, Archiv und RSS Feed.

Für ein Blogsystem müsste auch eine Konfiguration und ein MVC sowie Datenbankabfragen her. Das jetztige PHP Skript ist eine Controller-View Logik. Die Erstellung hat inklusive dem Erstellen der Inhalte zwei Wochen gedauert. Die JQuery UI Accordion auf Response ge-css-let versagt im Internet Explorer. Diese werde ich bei Gelegenheit durch ein anderes Skript ersetzen.

LESS Responsive Website

Hier ist der Weblink zur LESS CSS Doku Website