Blog

5 Apr 2017, 21:11
by repraze

I've been working hard in my spare time to bring you an update on our little friendly call-cache module.


// using the cache with Promises

cache.get('baz',
    function(callback){     // generating the cache
        console.log('Fetching Baz');
        callback('Baz');    // promise will get the first parameter
    }
).then(function(result){          // promise style, always called
    console.log('Retrieved '+result);
});

A whole new syntax is now possible with call-cache and it's future compatible! Let's avoid callback hell from now on...

2 Apr 2017, 20:20
by repraze

Looking back a few months ago, I was happily writing my own sets of Mixins to make my CSS cross-browser. I encourage you to read about them. Every time I encountered a weird property, I created a Mixin. I could have used one of the many available collections out there, but I kept my own little file.

Little did I know the mess to come.

The Let Down

Using the latest CSS features was good, and seeing my code build nicely was gratifying enough, but as time went by and some of the properties became standard to all browsers, my files became messier.

Mixins are great, with a simple binding in your style, it expands into a set of predefined properties. This is especially useful when you want to make your style browser compatible. One declaration and you're done. When a browser integrates the property, you can reduce the Mixin and continue. Relying on a library is probably the best so you don't have to keep track. Although what do you do when you simply don't need a Mixin any more?

This is the main issue, writing those Mixins in your sources means that you depend on them. The result are ghost functionalities that bind to now available properties. The build is universally slower and it's all just a big mess. The only solution is to remove all the bindings to those Mixins and you've lost what made them useful in the first place.

Autoprefixer - The Way Forward

Autoprefixer takes another route to solve the problem. It will grab your CSS and parse it to add vendor prefixes. The solution is always kept up to date and you can target a set of browsers.

With Autoprefixer, your CSS becomes somewhat similar to TypeScript. A higher language that will be parsed to be browser compatible. The good thing about this method is that you don't compromise your language in the first place. As things move forward you can simply update and rebuild, no hassle.

What About Mixins Then?

There's a better way to deal with your browser issues now, but it doesn't mean that Mixins are obsolete! They are still very useful to generate tedious code in just a couple of lines. You can have recursions and iterate through arrays to create rich and powerful style-sheets. I've created my own column grid system with combinations and you can imagine how it would take forever to write something similar with just CSS. All those n column implementation out there.

26 Aug 2016, 16:08
by repraze

The ability to create "Mixins" is an important feature of style sheet pre-processors such as less. They are comparable to functions in programming and enables you to write CSS widely supported by the different browsers while remaining easy to manage its compatibility.

In short it will be useful to any good web-designer to maintain a cross-compatible style while being able to quickly change settings across the entire application.

My take on it

As I know some of you just want to look and copy the code, so there you go!


/*
	Compilation of Useful Less Mixins
	Thomas Dubosc (@repraze)
	http://repraze.com/posts/view/1ntp5ltvyo/compilation-of-useful-less-mixins
*/

//Changes how the placeholders are displayed, expects {}
.placeholder (@rules) {
	&::-webkit-input-placeholder {
		@rules();
	}
	&:-moz-placeholder {
		@rules();
	}
	&::-moz-placeholder {
		@rules();
	}
	&:-ms-input-placeholder {
		@rules();
	}
}

//Rounded corners
.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius:	@radius;
	border-radius:		 @radius;

	-moz-background-clip:	padding;
	-webkit-background-clip: padding-box;
	background-clip:		 padding-box;
}

//Shadows on element
.box-shadow (@string) {
	-webkit-box-shadow:	@string;
	-moz-box-shadow:	@string;
	box-shadow:			@string;
}

//Hyphenate text
.hyphens (@string){
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

//Transition for animations style and timing
.transition (@transition) {
	-webkit-transition:	@transition;
	-moz-transition:	@transition;
	-ms-transition:		@transition;
	-o-transition:		@transition;
	transition:			@transition;
}

//Transform (rotate, translate) an element
.transform (@string){
	-webkit-transform:	@string;
	-moz-transform:		@string;
	-ms-transform:		@string;
	-o-transform:		@string;
	transform:			@string;
}

//Perspective definition for 3D viewing of elements
.perspective (@value: 1000) {
	-webkit-perspective:@value;
	-moz-perspective:	@value;
	-ms-perspective:	@value;
	perspective:		@value;
}

//Filtering such as grayscale
.filter (@string){
	-webkit-filter:	@string;
	-moz-filter:	@string;
	-ms-filter:		@string;
	filter:			@string;
}

//Animation keys definition, expects {}
.keyframes (@name; @arguments) {
	@-moz-keyframes @name { @arguments(); }
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}

//Bind key to animation
.animation (@arguments) {
	-webkit-animation: @arguments;
	-moz-animation: @arguments;
	animation: @arguments;
}

//Element selection mode
.user-select (@string) {
	-webkit-user-select:@string;
	-khtml-user-select:	@string;
	-moz-user-select:	@string;
	-o-user-select:		@string;
	user-select:		@string;
}

//Generate background gradients
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
	.gradient(@type; @colors; @dir; @prefixes; (@index - 1));

	@prefix  : extract(@prefixes, @index);
	@dir-old : 90 - (@dir);

	background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
  	& when ( @index = length(@prefixes) ) {
		background-image: ~"@{type}-gradient(@{dir}, @{colors})";
	}
}

Incomplete?

Again, this is a collection of useful mixins I've written and found. The power of less is that you can change this library to add extra compatibility and it will replicate everywhere you've used them without changing a thing!

The .border-raduis defines a default! You can parameter any of the functions to default to whatever you want when no arguments are passed. Though, leaving a library clean then having default variable in your .less style file is preferable so you can reuse this library without changing it constantly. I usually like to keep my variables into a separate settings.less file.

Ussage

Here's a few examples on how to use some of the functions described.



.smallRadius{
	.border-radius(2px);
}

.insideShadow{
	.box-shadow(inset 0 0 0 1px lighten(#000000, 80));
}

.transitionThis{
	.transition(all 0.5s ease-in-out);
}

.scaleThat{
	.transform(scale(3.0));
}

.blurry{
	.filter(blur(5px));
}

This is just a small take on what pre-processors can do for you! I invite you to read some more on LessCSS.org

16 Jun 2016, 21:51
by repraze

Not much has been going on on the foreground of the website since it's reopening nearly 3 weeks ago. However, publications are on the way! The main reason for the delay was to make sure some of the extra features required for you to interact with the blog wouldn't break the existing posts.

New features

  • The ability to Comment. I was looking into developing my own system, but then I saw that it probably required me to create a huge framework with account creation or verification through 3rd party API and then sanitize the inputs with captchas or even filtering. Disqus will do for now.

  • Pagination system around the website. The pagination system is not quite visible yet, but buttons will appear when a few more articles will be there. This required me to create an URL parsing system to keep filtering tags when generating links.

  • Allow the creation of source blocks on the website.

Cooking right now

I've been heavily developing the project section of the website and I'm glad to say that it is ready soon to be released! I've been working with APIs to be able to link them with GitHub and get some data to display on the website. It led me to create my first public NPM module: call-cache!

28 May 2016, 20:29
by repraze

Hi and welcome back to a new version of Repraze.com. The website now merges the content Wulty.com with a shiny new custom system that should allow me to create articles easier.

The main reason for merging the two websites was the fact that they both were running on different servers and using different technologies. With this new platform I can gladly say I am now PHP (and MySQL) free.

The platform should now be regularly updated with new content, sections and bug fixes as the codebase is simpler to maintain. In the following weeks Wulty will disappear and redirect to Repraze, but don't worry! The posts will be slowly moved here.

What's new?

Repraze now features a blog system and a shop. All the Instagram shots can still be viewed on the homepage which also features a shiny new 3D animation as a landing greeting visual. Links around the website are now intelligible with the title of posts appearing in them.

The items in the shop are very limited. At the moment there is only one design for a basic Repraze T-shirt. More interesting designs will appear to fill it as I come up with satisfying ideas.

A Project section is being developed to easily follow what is happening on a particular project. Rather than scrolling and searching through the blog for related posts, it will be possible to find everything under a project and save them as bookmarks to come back for updates.

Advertising

For a while I used to have a donation button to be able to pay for hosting, domain names and any tools I needed. However I have decided to move to advert blocks. The website will display them in various places if you are not blocking them. The aim is not to make them intrusive, as I too hate pop-ups.

Latest Posts