Since completely moving to Sass, I am really obsessed to make my work easier :) There are many Mixins that really help to speedup development and remove some of the tedious tasks ;)
“Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. ” – Sass Basics
I will be showcasing some of the libs and resources here in the coming weeks. I only have one condition, Mixins should be simple dropin modules so that they can be used universally!
Here one Mixin, I love, that sets a REM font size with a Pixel fallback:
|
1 2 3 4 5 6 7 8 9 |
@function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); } |
|
1 2 3 |
p { @include font-size(14px) } |
|
1 2 3 4 |
p { font-size: 14px; //Will be overridden if browser supports rem font-size: 0.8rem; } |
Some time ago I said: “My perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony”.
Here is a list of some of my core components, that I use in combination or standalone.
|
1 2 3 |
define('jquery', [], function() { return jQuery; }); |
NOW you can live happily ever after :)
This is basically the core stack that I use to build out ideas :) While Angular is always an option, the above satisfies most of all needs and is often far slimmer. The rest depends on how you organize your code yourself, but at least you are not forced into fixed structures ;)
MVC offers architectural benefits over standard JavaScript.
The MVC pattern brings modularity to your applications and it enables:
MVC is composed of three components:
Model is where the application’s data objects are stored. The model doesn’t know anything about views and controllers. When a model changes, typically it will notify its observers that a change has occurred.
View is what’s presented to the users and how users interact with the app. The view is made with HTML, CSS, JavaScript and often templates.
The controller is the decision maker and the glue between the model and view. The controller updates the view when the model changes. It also adds event listeners to the view and updates the model when the user manipulates the view.
“Hybridauth enables developers to easily build social applications and tools to engage websites visitors and customers on a social level by implementing social sign-in, social sharing, users profiles, friends list, activities stream, status updates and more.
The main goal of Hybridauth is to act as an abstract API between your application and various social apis and identities providers such as Facebook, Twitter and Google.”
Hybridauth 2.x was the best option for nicely aggregated social logins so far, but some of the social “Providers” are outdated or no longer working. Version 3.0 is still in development, but providing a complete rewrite.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
require 'vendor/autoload.php'; $config = [ 'callback' => 'http://localhost/hybridauth/examples/twitter.php', 'keys' => [ 'key' => 'your-consumer-key', 'secret' => 'your-consumer-secret' ] ]; $twitter = new Hybridauth\Provider\Twitter( $config ); try { $twitter->authenticate(); $userProfile = $twitter->getUserProfile(); $accessToken = $twitter->getAccessToken(); $apiResponse = $twitter->apiRequest( 'statuses/home_timeline.json' ); } catch( Exception $e ){ echo "Ooophs, we ran into an issue! " . $e->getMessage(); } |
Hybridauth 3.0 Remake @ Github
For Facebook , Twitter and Google+ I still use my own little wrappers, but if you want more this is the way to go in the future :)
Currently refreshing my list of options to document projects and APIs.
I will use this page to keep a list of possible tools & solutions.
Really cool interface to test and debug Regex. The website also includes a nice regex library.
E-Learning platform for Thailand
Really neat solution, that allows you to build a quick viewport based layout, without relying on the still buggy CSS units.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<head> <!-- Add vUnit.js to the head to avoid FOUC --> <script src="path/to/vunit.js"></script> <!-- Instantiate vUnit.js passing a CSSMap with properties you want to play with --> <script> new vUnit({ CSSMap: { // The selector (VUnit will create rules ranging from .selector1 to .selector100) '.vh_height': { // The CSS property (any CSS property that accepts px as units) property: 'height', // What to base the value on (vh, vw, vmin or vmax) reference: 'vh' }, // Wanted to have a font-size based on the viewport width? You got it. '.vw_font-size': { property: 'font-size', reference: 'vw' }, // vmin and vmax can be used as well. '.vmin_margin-top': { property: 'margin-top', reference: 'vmin' } }, onResize: function() { console.log('A screen resize just happened, yo.'); } }).init(); // call the public init() method </script> </head> <body> <h1 class="vw_font-size15">This title font-size is 15% of the viewport width.</h1> <p class="vh_height50">This p's height is 50% of the viewport height.</p> <p class="vmin_margin-top5">This p has some margin-top<p> </body> |
Also works nicely in combination with Visual Composer for WordPress :)
When working on projects in a team, sharing passwords is always happening. But how do you securely share passwords among team mates. I am using 1Password for years on all my devices. I am glad to see them expanding their offers with a team based password safe. The current setup is in beta and free to test.
