Archive for the coding Category

Floating Labels with Semantic UI

Sunday, April 11th, 2021 | Permalink

I recently started working on a project using Semantic UI.
It’s a super-rich CSS framework, coming with nearly all the things you want and need.
From my perspective it is simpler than bootstrap to learn, as there is much more “speaking” css class names like a FORM is “ui form”, a grid is “ui grid” and so on.

Unfortunately it is missing one import style utility called FLOATING LABELS.

This is the coming into effect when you get into an input field and start typing. It shifts the name of the field to the top of the input field and still shows the name.

I found a script that helps you doing this.
https://codepen.io/ysung812/full/MWWGJJz

Simplified you just need the CSS styles:

/*************************
Floating label
**************************/

.ui.input.floating-label {
position: relative;
margin-bottom: 1rem;
}

.ui.input.floating-label>input,
.ui.input.floating-label>label {
height: 3.125rem;
padding: 0.75rem;
}

.ui.input.floating-label>label {
text-align: left;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0;
/* Override default `

.ui.input.left.icon.floating-label>label {
left: 26.99px;
}

.ui.input.floating-label input::-webkit-input-placeholder {
color: transparent;
}

.ui.input.floating-label input:-ms-input-placeholder {
color: transparent;
}

.ui.input.floating-label input::-ms-input-placeholder {
color: transparent;
}

.ui.input.floating-label input::-moz-placeholder {
color: transparent;
}

.ui.input.floating-label input::placeholder {
color: transparent;
}

.field.floating-label input:focus::-webkit-input-placeholder {
color: transparent;
}

.field.floating-label input:focus:-moz-placeholder {
color: transparent;
}

.field.floating-label input:focus::-moz-placeholder {
color: transparent;
}

.field.floating-label input:focus:-ms-input-placeholder {
color: transparent;
}

.ui.input.floating-label input:not(:placeholder-shown) {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}

.ui.input.floating-label input:not(:placeholder-shown)~label,
.ui.input.floating-label input:-webkit-autofill~label {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 12px;
color: #777;
}

.ui.input.floating-label::-webkit-input-placeholder {
color: #6c757d;
opacity: 1;
}

.ui.input.floating-label::-moz-placeholder {
color: #6c757d;
opacity: 1;
}

.ui.input.floating-label:-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}

.ui.input.floating-label::-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}

.ui.input.floating-label::placeholder {
color: #6c757d;
opacity: 1;
}

/* Fallback for Edge
————————————————– */

@supports (-ms-ime-align: auto) {
.ui.input.floating-label>label {
display: none;
}
.ui.input.floating-label input::-ms-input-placeholder {
color: #777;
}
}

/* Fallback for IE
————————————————– */

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.ui.input.floating-label>label {
display: none;
}
.ui.input.floating-label input:-ms-input-placeholder {
color: #777;
}
}

SSLChecker a script to avoid expired Letsencrypt certificates

Saturday, May 4th, 2019 | Permalink

Letsencrypt is a wonderful, simple and cost free way to encrypt your SSL traffic.
Since it start it helped protect data privacy to millions of websites. One of the downsides of Letsencrypt is the limited time a certificate is valid. Every three months you need to update your certificates, otherwise your users will be seeing a warning page in their browsers.

But not only Letsencrypt users struggle with the problem of expiring certificates. Also bigger every now and then face the same problem. Just with a different twist. The more servers and components are running SSL and need certificates, the more likely people tend to buy certificates with long running periods. Which means, on one hand you have to touch all these systems only every couple of years, but on the other hand the probability that the colleague that installed the cert is not around anymore. Results in partial failing systems and people under pressure trying to fix system by system.

As I am running multiple servers and also multiple domains, I created a small Python script called SSLChecker which notifies you via email 30,14,3 and one day before a certificate expires.

It can handle multiple domains at once and notify a list of people.

It is under the GNU license released on GitHub. Feel free to contribute, use and help keeping data private.

Fixed! – SugarCRM – Module Loader blank page after installing module

Wednesday, April 11th, 2012 | Permalink

This took me a while till I found a solution. The module builder in SugarCRM seems to have a bug. Whenever you install something using the module loader, the system seems to kind of crash. The module loader page is not showing anything any more except the saying “Module Loader”. This seems to be a bug in all 6.2.x versions.

I found a solution here.

Goto the file ModuleInstall/PackageManager/PackageManager.php and edit line 668.

change:

$target_manifest = remove_file_extension( $upgrade_content ) . '-manifest.php';

to:

$target_manifest = UploadFile::realpath(remove_file_extension( $upgrade_content ) . '-manifest.php');

Ever asked yourself how long it takes till Apple approves your App?

Friday, April 6th, 2012 | Permalink

There is no general answer to this, but from my experience it takes around one week usually.

I have submitted four apps within the last three months and in general there was a waiting time of one week.
Honestly this is a hard time for a developer. In some cases (2 out of 4) Apple decided not to approve the app and rejected it.

I wonder how long this takes for the Google Android market.

RTB finally gets an open standard called Open RTB

Sunday, August 28th, 2011 | Permalink

If you are working in the online advertising industry, you might already have heard the letter RTB. It is like a buzzword floating around in all agencies currently. Most people don’t know what it is.

It is basically buying display inventory based on algorithms and target user thru that. All is happening in real time and every agency has to send a bid.

There is now an open standard for this called Open RTB.

Create PowerPoint like presentations with HTML5 and JS – deck.js helps

Wednesday, August 24th, 2011 | Permalink

Just found deck.js a JavaScript framework that lets you create Power Point like presentations within the browser using new web technologies like Ajax, HTML5 and CSS3.

Adobe launches Adobe Edge a HTML5 CSS3 Animation tool

Monday, August 1st, 2011 | Permalink

Adobe Labs just launched Adobe Edge, a tool that lets you create animations in a UI and export them as HTML5, CSS3 and javascript. Basically it reminds me to the last version of the flash creation tools I saw.

Currently Adobe Edge is free as it is still in the Labs. You can download it from the product page.

How TripAdvisor is structuring their technology and teams

Friday, July 22nd, 2011 | Permalink

I just found this interesting guest article of Andy Gelfond (VP Engineering at TripAdvisor) on highscalability.com.

He is describing how they are solving daily issues as well as showing how they are working within teams. Quite interesting for everyone interested in high traffic projects.

You can find the article on http://highscalability.com/blog/2011/6/27/tripadvisor-architecture-40m-visitors-200m-dynamic-page-view.html

Pretty thrilled by node.js

Wednesday, April 13th, 2011 | Permalink

How could I have missed that?

node.js is an evented I/O for Google V8 engine.

Okay, so what does that mean?
Basically it means it is a library on top of V8 that enables you to do things with JavaScript that haven’t been possible before. Things like coding and running your own webserver or tcp server. As nodejs never stops running processes it can do several things at the same time. Like running the webserver and doing calls to another webserver at the same time, for several users and without running more than one process.

To be honest it is easier if you just watch this video. It’s worth watching!

Anyone any experience with ez Components?

Sunday, January 2nd, 2011 | Permalink

I am playing with ezComponents (future zetaComponents) currently.
I have done a couple of projects with ez Publish in the past and I really like the structure.

I am testing the ImageConversion component, but I just can’t get the quality of the outcoming image under control.
$converter->createTransformation( 'thumbnail', $filters, array( 'image/jpeg', 'image/png' ) );

try
{
$converter->transform(
'thumbnail',
$image,
$uploadPath.$filename.'_thumb.'.$ext
);
new ezcImageSaveOptions(array('quality' => 70));

}
catch ( ezcImageTransformationException $e)
{
die( "Error transforming the image: <{$e->getMessage()}>" );
}

If I remove the line new ezcImageSaveOptions(array('quality' => 70)); I get a “fuzzy” jpeg.

If I have it in the code, I get a 100 % quality image.
Anyone, any idea?

Btw. I really think this is a great library. I don’t call it a framework, as I think it has not everything you need for a framework.