Lately i was running into an Safari issue – what happens really often lately, i really start to fall in love with this „amazing“ piece of software. Whatever – the thing is, you may come to the idea to define all of your animation properties and set it to animation-play-state:paused. So you can simply trigger the animation with help of an equal class, lets say .play{ animation-play-state: running; }.
(mehr …)webksde
Typesetter Contact Form released
We have just released our first bigger Typesetter CMS Plugin. It’s a highly configurable contact form section, where you can add multiple types of fields, send (HTML) Mails to the administrator and the submitter (optional).
The whole markup and class structure is based on Bootstrap 3, so if you already use a Bootstrap theme, you can install it and you’re ready to go. If you won’t use Bootstrap you have to implement your own styles.
Currently it’s just a „type“ inside the CustomSections Plugin, which you have to modify a little, please find detailed instructions on Github: https://github.com/webksde/Typesetter-Custom-Sections–Contact-Form
CSS Object-Fit ♥♥♥
I first heard of the object-fit attribute a couple of month ago and i make extensive use of it since this ‚magic moment‘. It’s just so freaking helpfull for RWD that i won’t miss it anymore.
The worse thing about it, like most new techniques, some major browsers do not support it. It’s just IE & Edge and personaly i wouldn’t give a shit about them, but as web professionals – sadly – we still have to care about those.
So i found a nice workaround which will work in all Browsers supporting the background-size property.
It’s pretty simple: In JavaScript, use modernizr to detect missing object-fit support, read out the image path, set the image as background to the parent container. The rest ist just a little css.
Please see the detailed solution here: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3
Thank’s alot to Primož Cigler!
Make Firefox and Firefox Development Edition running together (64-Bit)
After upgrading my Firefox and Firefox Development Edition to 64-Bit, i was no longer able to start them at the same time. Trying this will result in a message like „Firefox is already running but not responding“.
Today i found the solution on the Mozilla support page – but only inside the google cache, because the topic is no longer available for some reason, so i publish it this way again.
The solution is to use different profiles for each Firefox. To do this you have to create a second profile and add a custom shortcut and link directly to the second profile via the -P (= Profile) parameter.
Here we go (just for Windows – see links beyond to get help for other systems):
- Create a second Firefox profile
- Press WIN+R and type: „firefox -ProfileManager“ – hit enter.
- Create a new Profile (i create a new profile for the DEV Edition), as i can say it’s not nessesary to choose a folder manually, simply click next.
- Create a shortcut to the FF Dev EXE (which is typicaly located under „C:\Program Files\Mozilla Firefox“ or „C:\Program Files\Firefox Developer Edition“, which one you have to choose depends on the Firefox edition you want to use your new profile with)
- In the target field add the -P parameter, example: „C:\Program Files\Firefox Developer Edition\firefox.exe“ -P „tf@webks.de“ (in this case including all quotes!)
For more detailed informations see:
https://developer.mozilla.org/en-US/docs/Mozilla/Command_Line_Options
Using Gulp-SFTP with Pageant (on Windows)
I tried multiple ways, pointing directly to the keyfile, etc. – everything fails or was not very practical.
(mehr …)Typesetter CMS: Create a reusable object, structured with page manager
Let’s say you want to add a „call to action“-section beyond the content which is usable inside the template.
- Create a regular page holding your contents
- Create a new extra content block (/admin/extra), choose type „file include“. (You will notice, that the edit link is disabled inside the backend, ignore this)
- Possibility 1: Use Layout Manager
- Jump back to your frontend, klick „Layout“ at the top right
- Hover the region you wish to include your created extra block, click insert and choose your block
- Click save and click abort when finished
- Possibility 2: Insert your extra block directly inside your template
- Insert the following code to your template: <?php gpOutput::Get(‚Extra‘,’Technical_section_name‘); ?> (the technical section name is the name you choosed with underscores instead of spaces, but still case sensitive!)
- Save and reload your page
- Now hover the new appeard block (which will show something like „Insert File“ per default), click the edit link and choose the page you created in step 1
The gerat thing about this is: the configuration of this extra is stored globaly and not per page, you have to set it just once and you can reuse it easily. You have it available to print it out inside your Template, or using a simple include section type with the page manager.
Smart Sticky Sidebar via hcSticky
If you ever need to have a sticky sidebar, which has a variable height, which is working well with a footer region, without having a second scrollbar … try https://github.com/somewebmedia/hc-sticky
Trying to build this with waypoint.js or something, is pain in the ass. This great library finished the job in < 5 minutes.
Smooth scrolling anchor links and hash url’s – also base tag fix
This solution is also very usefull on pages with
$(document).ready(function () {
// Anchor links on click based on Chris Coyier's solution: https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('a[href^="#"]:not([href="#"])').click(function(e) {
if (location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 80 + 'px'
}, 1000);
return false;
}
}
});
});
// Smooth scrolling anchor links
// to top right away
if (window.location.hash)
scroll(0, 0);
// void some browsers issue
setTimeout(function () {
scroll(0, 0);
}, 1);
$(function () {
// *only* if we have anchor on the url
$( window ).load(function() {
if (window.location.hash && $(window.location.hash).length > 0) {
// smooth scroll to the anchor id
$('html,body').animate({
scrollTop: $(window.location.hash).offset().top - 80 + 'px'
}, 1000, 'swing');
}
});
});
Typesetter aka gpEasy – Remove edit and login locks
To remove the edit lock, simply navigate to your main directory, open the „data“ folder, and delete the temporary „lock_….“ file.
To reset the login lock, navigate to: „/data/_site/“ and edit the „user.php“. Now simply reset the „attempts“ to 0.
Adaptive background (color taken from an image via JS)
Take a look at this amazing library. You may now the effect from Googles image search.
The library take´s the „primary color“ of an image, and set it to the image container as background color. Similar to the tv technique „Ambient Light“.