web

How to disable the mobile version of a website when using a smartphone

In these days it is normal that many web pages have a computer version but also a mobile version.If a website has a mobile version, it is usually shown by default once it detects that the user is visiting from a mobile device, and it is very helpful because it will allow the web to be seen better, easier to navigate and much less resources to be downloaded . However, this is not always the case; Some mobile versions are worse, difficult to understand and take too many clicks to see some information. So, in some cases it will be better to go back to the desktop version.

Multiple websites on a single host with Docker

It is not possible to run multiple web applications in Docker at the same time. Since all of them use port 80, only one Docker instance is accessible.

Browsersync is an automation tool that can watch files for changes and inject them into a web page without reload.

Usage:

  • Install Node.js
  • Install Browsersync
    npm install -g browser-sync
  • Start Browsersync
    browser-sync start --proxy "myproject.dev" --files "css/*.css"

Browsersync will create a proxy that will wrap your vhost myproject.dev with a proxy URL.

It can also be used with gulp:

var browserSyncWatchFiles = [
'./style.css',
'./js/*.min.js',
'./*.php'
];
var browserSync = require('browser-sync').create();
var browserSyncOptions = {
proxy: "myproject.dev",
notify: false
};
gulp.task('browser-sync', function () {
browserSync.init(browserSyncWatchFiles, browserSyncOptions);
});

Technology:

Speed up webpage testing time

Testing web pages can be really time consuming. Every CSS, HTML or image change needs a browser refresh. It would be way better if the reloads could be avoided.

Deployment using containers

This can be done by performing several steps:
1. Install Docker on local and remote machine
2. Create Dockerfile on local machine and set all enviroment dependencies/variables (and add website to resources)
3. Build Docker image from Dockerfile and run docker container from that image
4. Test website

Than transfer Dockerfile from local machine to remote machine and repeat steps 3. and 4.

Taggings:

Firefox can not be open after you install it on MaC

After you download and install Firefox on your Mac you may see the error message, "Firefox.app" . What to do ?

EPM Registry Initialization Fails

The EPM Registry initialization fails in the BIDomain domain. Oracle Fusion General Ledger and Oracle Fusion Customer Relationship Management (CRM) code running within the FinancialsDomain and CRMDomain domains, respectively, has direct integration with the EPM Registry API and consumes EPM Security Component, which also tightly integrates with the EPM Registry API. When EPM Registry initialization fails, it greatly impacts communication with downstream EPM products in the BI domain.

Loading only one image and position it when hovering over it

It takes just a little modification in the images and the "hover"-methode.
First: the image that is shown by default and the 2nd image, that ist shown when hovering over the first, have to be combined to one image. Just put the 2nd image directly under the 1st via an image tool and save it as a new image. So this new image should be exactly twice the size of the original ones. Then use this new image in the "background"-attribute in your div. The "height" of the div must be exactly the half of the height of the new image. Furthermore you have to set the "background-position" in the div to "top". This way only the upper half of the image is shown. And finally you set the "background-position" in your "hover"-element to "bottom". So when hovering over the image it just gets "moved" to the top and only the bottom half can be seen.

In the attachment you can see what it would look like, when combining the 2 images.

Here is an example where the comined image is 100px wide and 60px high:

#button_home {
position:absolute;
width:100px;
height:30px;
background:url(home.png);
background-position:top;
}
#button_home:hover {
background-position:bottom;
}

This way everytime the page is loaded the combined image is loaded and there will be no delays.

Taggings:

Image with a text overlay that is dynamically generated

I want to display an image with a title that lays on top of the image. This title should be dynamically generated, therefore no photo editing tool can be used in this situation. The text comes from a dynamically generated JSON object, which then can be used by a JavaScript in order to inject the title information into a website. The only technologies that can here be used is web technologies such as XHTML and CSS.

examples of rich set JSF components

I need good examples of UI components I can integrate in a web application that uses JSF.

Pages

Subscribe to web