Writing an admin template in 14 lines of css…. using bootstrap

When i went to work the other day i found it amusing there are hundreds and hundreds of admin theme packs on all sorts of websites to find. I use some of them, i don’t like them. They work, as a presentation piece. But are full of bloated styles of yonder year when support should be this or that. Or can we please use 10 different kinds of editors just to use.

Then i found out that bootstrap in version 4 is ditching IE9 completely and pushing flexbox i thought i can do that!

So i set up a project and started the code. 14 lines later i was done. Awesome. It even support small screens.

You can check my example on codepen or github.

Lets vue js

So i have been using vuejs for a time now and it is awesome. Just a minimalistic framework for making live easier.

But the community is using laravel, and i am a symfony guy so i decided i can use it and incorporate it in my projects. After learning about the “todo” app and wanting to use it i wanted more. I don’t want a [array].push in my javascript, i want an ajax call and save it in my database and get the right result so i can use that in my project and save it in my database. And yes, vuejs is still awesome.

I wanted to use some logical data and save it using the symfony forms. Why, so i can give users the right error messages from that data. And symfony (form) is awesome too, as long as you know how to implement those.

To force the submission you can just use the submit on a form element. But i do not like that, i will find a nice workaround and use the csrf from the form.

When i find the right way i will post it.

Oh right, vue 2.0 just came to live after 8 betas and 8 alphas. Cool. I did found out rewriting 1.* scripts do have to get some treatment. But just rewite directive in components and everything works again.

Soon. More.

10k apart

So i found this contest on the internet. A collaboration between Microsoft and An Event Apart to create an accessible website in under 10k. Called 10k apart. So i setup a Jekyll setup and started coding. The basic template is far beyond 10k so i got rid of it all.

Setup a small site using sass for the styles and added 2 templates. Because more gets a bit much. I also wanted to create a site JavaScript less. And did want a hamburger menu on it because we can.

Html is not compressed in Jekyll so i found a compress template to use. Sass can be compressed in the _config.yml. And all together i got it to some 9.someting k.

 style: compressed

You can find my entry on the 10k apart gallery. And find the source on github. And a preview here.

Static site generators

I finally got around on creating pages on GitHub. I never got around on installing Jekyll because my Ubuntu server used ruby 1.x and i did not want to upgrade. But earlier this week and had no luck on using all the php, node and other static site generators i just forced myself to install the latest ruby version using rvm.

So i installed Jekyll and started playing around and setup a site with “jekyll serve” and liked it. I started looking for how to setup a static site using Jekyll and setting it up for the GitHub pages. I found out it is just stupid simple. Just push your Jekyll project to gh-pages. That’s it. GitHub fixed the pages automatically.

It`s just stupid simple

Continue reading

I like grunt – symfony grunt sass edition

So i like grunt, people tell me there are lots and lots of builders in the world but i started a “Let’s create symfony with grunt” repository on git.

The first time i created the project i just forked an existing grunt edition of symfony and added the things i liked. Sounds great but now i wanted more. Symfony released a 3.0 version some time ago and i wanted to check my repository. And maybe update some things to the “real” version i wanted.

There were two things i wanted. How does this javascript es6 version work, and how do i f&#@% let the code check all my files i create. The latter is easy, just force linters on the developer. So i included sass-lint and updated my jshint modules. Did that on the end of my project so i got lots of errors in my 5 line code and fixed them. But for that es6…

I want to create a “how to es6 for dummies” idea, cause when you get it it will be simple. But when you don’t… it will eat your soul. So i found a nice grunt-babel plugin. And i just wanted to create an easy thing. I had a bootstrap modal on my page and wanted to view my model, i needed a root import for my model from bootstrap using jQuey. I will find the fancy es6 stuff later. That wouldn’t fit so i found a nice Frontbook repository  which fixed my stuff. Add grunt-browserify to let you require my jQuery and bootstrap javascript and all things well. I just didn’t want to mix streams and include a multiple usage javascript builder. But what can you say, it works.

Anyway, not to make a post longer than it should, and i cannot create short posts. Check out the gruntfile on this. I used it on a symfony project, but you can use it on anything. It’s built for ease of use. Use it.

My repository: symfony-grunt-sass

Next time a how to es6 for n00bs with typescript or just something else.

Updated googlemaps

Updated the google maps plugin to 0.3.1.  I have changed the code to nice classes, so it looks great now and i can update the code easily. Not quite done yet, but the code works as is like the current plugin.

Next to do are:

  • Add some icons for the markers.
  • Load (all) the data dynamically, when moving the map.
  • Add some custom field for use in other plugins in the admin for auto filling the address.
  • Dynamically add more icons for the markers, maybe add a add button in the admin.


So i had a domain for my plugins on dev.dimme.nl, but i never used my main domain. So i moved the messages to the main domain dimme.nl.

I was also messing around with a website for a customer, so i just installed WordPress and started typing for a new theme. It worked, a mobile first theme which also can be used on a desktop and was quite surprised by the result. So i am trying to get it on the WordPress theme page. Made a base page for display to showcase the usages, you can see this on jour.dimme.nl.

Jour is a template based on bootstrap-3, but i am going to create some themes on bootstrap-4, and support all my plugins on that framework. Just because i like it and like to use it. I would like to host them and create some auto update functionality, but i havent figured out how to do that.

Busy busy busy

Recently i have been busy finding out what to do. Creating WordPress data has been on the back burner finding out what i like to do. I have released a music video, made animations for a movie. Searching the internet for useful frameworks (more later). Thinking of making a YouTube channel.  Finding out what this angularJS. Finding out about composer, nodeJS, grunt, express, and so on, Thinking of making games with unity. Thinking of making games in JavaScript/php. Too much to do for one person.

Continue reading