We're growing into something new. Read More
Idered

Kasper Mikiewicz


Design it & Code it is back

It was down for a few months but now It's back with new website design and 2 new projects. Here's url: http://designitcodeit.com/ I've also used my [Editr](http://lab.idered.pl/editr/) so users can now play with code, it's also great way for me to test Editr in production environment. It's built on top of Laravel 4 which is really awesome to work with. Here're some screens from backend:

Like Button: your own like script

Hey, Like Button is my first premium script ever on which I would like to get some feedback to make it perfect and make my customers happy :) **For helpful feedback, I'll send you a free copy of script.** Here's a demo page: http://lab.idered.pl/like-button/demo/ List of features: - 2 Database drivers: MySQL, File(atomic saving) - 2 Layout views: Vertical & Horizontal - Dark & Light color schemes for inactive button - 5 color schemes for active button - Preloader is added on AJAX request - Allows to like and unlike(optional) - You can bind multiple buttons with the same ID so when you click on one, value of all will be updated - You can disable default counter and use custom one - PHP API to get number of likes and check if item is liked - JS Callback functions - Match sociall buttons sizes - looks nice next to Twitter and Facebook like/share buttons - Counter can be a link with title Thanks

Discussion

Editr.js v2

Hey, it's been a long time since my last post here but today I want to share with you Editr v2. ![](http://i.imgur.com/lFF350w.png) I've spent a few days (and nights) to rebuild code and add some new awesome features: * Panels - now you can edit html, css, js and view changes without switching between tabs. * Emmet support * Preloader * Read-only state * Base64 support Source is now much cleaner and well commented so you can dig in :) Also, wanted to thanks for @jakiestfu , @andyfleming and [jcummins](https://github.com/Idered/Editr.js/issues/6) for great ideas which are now available in Editr.

Discussion

Editr: HTML, CSS, JS Playground

## About Editr is open source HTML, CSS and JavaScript playgrond that you can host on your server. ![](http://i.imgur.com/R3S76QN.png) * based on ACE Editor * easy setup * supports multiple editors on one page * configuration via JS object or HTML attributes ## Installation Copy `editr` folder to root of your website. Add this in ``: and this before ``: Now add sample editor: and start Editr with jQuery: $('.editr').editr({ path: '/editr/items' }); ## Options * `path` This is used as default path for projects so you don't have to add it as html attribute. HTML attribute `data-path` will overwrite this default. * `theme` ACE Editor theme * `callback` A function that is called after files are loaded. ## Usage To load Editr on your site, create a div with this attributes: * `class="editr"` Used as hook for loading Editr * `data-path`(optional) Path to folder with projects * `data-hide`(optional) This attribute allows you to hide elements from editr toolbar. Values: `all, html, css, js`. * `data-item` Name of project inside projects folder * `data-files` List of file names separated by `;` which you want to show inside editor. If file name is preceeded with `!` then this file will be loaded inside editor but it won't be visible and editable. You an also put here paths to files e.g. `js/script.js`. This will load `editr/items/flat-ui/switch.html`. First html file(`switch.html` in this case) is used as main preview. In this example, `normalize.css` will be added to preview but it won't be visible or editable.

New website design for "Design it & Code it"

Hey, I've finished new layout for "Design it & Code it" and I would like to know what Forrst community think about it. You can see current(old) design [here](http://designitcodeit.com). I took some inspiration from [Designmodo](http://designmodo.com/), hope it's not too similiar, is it? Awesome icons from [iconmonstr](http://iconmonstr.com/). Users will be available to play with code, change it and preview changes in 'Result' tab. I'll work on font contrast during development. So, what do you think?

Discussion

Subscription form on Design it & Code it

I've created quite nice subscription form, which I think is worth of sharing :) Features: * Validates email using JavaScript * Disables submit button if email isn't valid or is empty * Displays nice icon - valid or invalid, icon is hidden when input is empty * Works nicely on mobiles Any thoughts? [![](http://dribbble.s3.amazonaws.com/users/21668/screenshots/1028939/preview.png)](http://designitcodeit.com/i/24)

Discussion

Flat swich on Design it & Code it, pure css

New project from flat series. I've made it without JS, If you want to support IE8 then please use [selectivzr](http://selectivizr.com/). Some info about it: * Based on font-size - set to 2em to make it double size * You can put in it whatever you want - text, image * Has a nice animation * Works on mobiles [![](http://i.imgur.com/x1kDvGV.png)](http://designitcodeit.com/i/23)

Discussion

3 New projects on Design it & Code it

Hey everybody, sorry that I haven't updated http://designitcodeit.com in last few months but I'm back in code/design mode with new projects :) Hope you enjoy them :) Flat love buttons: [![](http://designitcodeit.com/uploads/7j3I8jXzremY.png)](http://designitcodeit.com/i/20) Focus modal box - lightbox (pure css): [![](http://designitcodeit.com/uploads/j9trDum90iMn.png)](http://designitcodeit.com/i/21) Flat radio buttons(pure css, nice animations) [![](http://designitcodeit.com/uploads/snFCd1jdvUTZ.png)](http://designitcodeit.com/i/22)