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 `` margin */
line-height: 1.5;
color: #495057;
pointer-events: none;
cursor: text;
/* Match the input under the label */
border: 1px solid transparent;
border-radius: 0.25rem;
transition: all 0.1s ease-in-out;
}

.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;
}
}

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');


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.

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 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.

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

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!

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' ) );

}
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.