Web Developer / Front End Developer / JavaScript https://jacekjeznach.com Web developer, front end developer portfolio. Main area of my expertise is front end development and everything related with this side of web. HTML,CSS, JS (ES5,ES6), building small & medium Web Apps, Angular , Vue.js, building custom plugins, features, animations and just coding layouts. Fri, 09 Mar 2018 17:22:24 +0000 en-US hourly 1 Double ring animation https://jacekjeznach.com/double-ring-animation/ Sun, 22 Jan 2017 14:22:04 +0000 https://jacekjeznach.com/?p=1348 Nice double ring animation built with HTML and CSS/LESS. You can see CODEPEN demo here:  https://codepen.io/fixcl/pen/lvCFr   Code below: HTML Place main div that contains the animation <div class="hoja">CODEPEN</div> CSS/LESS The following less code creates double ring animation: @import url(http://fonts.googleapis.com/css?family=Open+Sans:700); @D:280px; // size control // diametro @R:(@D/2); // radio @B:(@R/8); @O: 0.6; // opacity @A: 2s; […]

The post Double ring animation appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Nice double ring animation built with HTML and CSS/LESS.

You can see CODEPEN demo here:  https://codepen.io/fixcl/pen/lvCFr

 

Code below:

HTML

Place main div that contains the animation



<div class="hoja">CODEPEN</div>

CSS/LESS

The following less code creates double ring animation:


@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);


@D:280px; // size control // diametro

@R:(@D/2); // radio

@B:(@R/8);

@O: 0.6; // opacity

@A: 2s; // accelerate

html,
body{
height: 100%;
}

body{
overflow: hidden;
}

.hoja{
color: rgb(220,220,226);
position:absolute;
top:50%; left:50%;
margin-left:-@R;
margin-top:-@R;
width:@D;
height:@D;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-size:@R/4;
line-height:@D;
-webkit-font-smoothing: antialiased;
}

.hoja:after,
.hoja:before{
content:"";
border-radius:100%;
position:absolute;
top:0; left:0;
width:100%;
height:100%;
transform-origin:center center;
}

.hoja:after{
box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O),
inset @B 0 0 rgba(250, 200, 0, @O),
inset 0 -@B 0 rgba(250, 150, 0, @O),
inset -@B 0 0 rgba(250, 100, 0, @O);
animation: rotar @A -0.5s linear infinite;
}

.hoja:before{
box-shadow: inset 0 @B 0 rgba(0, 250, 250, @O),
inset @B 0 0 rgba(0, 200, 200, @O),
inset 0 -@B 0 rgba(0, 150, 200, @O),
inset -@B 0 0 rgba(0, 200, 250, @O);
animation: rotarIz @A -0.5s linear infinite;
}

@keyframes rotar{
0%{
transform:rotateZ(0deg) scaleX(1) scaleY(1);
}
50%{
transform:rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100%{
transform:rotateZ(360deg) scaleX(1) scaleY(1);
}
}

@keyframes rotarIz{
0%{
transform:rotateZ(0deg) scaleX(1) scaleY(1);
}
50%{
transform:rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100%{
transform:rotateZ(-360deg) scaleX(1) scaleY(1);
}
}

The post Double ring animation appeared first on Web Developer / Front End Developer / JavaScript.

]]>
10 useful tips for WordPress dashboard customization https://jacekjeznach.com/10-useful-tips-wordpress-dashboard-customization/ Sun, 22 Jan 2017 13:55:05 +0000 https://jacekjeznach.com/?p=1329 The dashboard is a very important part, as it is where you – the admin – publish content and control everything about your blog. In this article, I have compiled over 10 WordPress hacks and snippets for WordPress develoipers to customize the dashboard. Keep logged in on WordPress for a longer period A very handy code […]

The post 10 useful tips for WordPress dashboard customization appeared first on Web Developer / Front End Developer / JavaScript.

]]>
The dashboard is a very important part, as it is where you – the admin – publish content and control everything about your blog. In this article, I have compiled over 10 WordPress hacks and snippets for WordPress develoipers to customize the dashboard.

Keep logged in on WordPress for a longer period

A very handy code snippet, which enables to stay logged in for a longer period of time. Add the code to functions.php and adjust the amount of seconds if needed ( line 3).

add_filter( 'auth_cookie_expiration', 'stay_logged_in_for_1_year' );
function stay_logged_in_for_1_year( $expire ) {
  return 31556926; // 1 year in seconds
}

Source: Labnol

Remove dashboard menus

When a WordPress developer builds blog for a client, it can be a good idea to remove access to some dashboard menus in order to avoid future problems such as the client “accidentally” deleting the custom theme they paid for.
Paste the code into 
functions.php file from your theme directory. The following example will remove all menus named in the $restricted array.

function remove_menus () {
global $menu;
                $restricted = array(__('Dashboard'), __('Posts'), __('Media'), __('Links'), __('Pages'), __('Appearance'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'));
                end ($menu);
                while (prev($menu)){
                        $value = explode(' ',$menu[key($menu)][0]);
                        if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
                }
}
add_action('admin_menu', 'remove_menus');

Source: Hungred

Require a featured image before you can publish posts

If your blog layout is set to display a featured image, it can be useful to prevent post publishing th post without the features image set.
This code has to be pasted into your 
functions.php file.

add_action('save_post', 'wpds_check_thumbnail');
add_action('admin_notices', 'wpds_thumbnail_error');

function wpds_check_thumbnail( $post_id ) {
  // change to any custom post type 
  if( get_post_type($post_id) != 'post' )
      return;

  if ( ! has_post_thumbnail( $post_id ) ) {
    // set a transient to show the users an admin message
    set_transient( "has_post_thumbnail", "no" );
    // unhook this function so it doesn't loop infinitely
    remove_action('save_post', 'wpds_check_thumbnail');
    // update the post set it to draft
    wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));

    add_action('save_post', 'wpds_check_thumbnail');
  } else {
    delete_transient( "has_post_thumbnail" );
  }
}

function wpds_thumbnail_error() {
  // check if the transient is set, and display the error message
  if ( get_transient( "has_post_thumbnail" ) == "no" ) {
    echo "<div id='message' class='error'><p><strong>You must add a Featured Image before publishing this. Don't panic, your post is saved.</strong></p></div>";
    delete_transient( "has_post_thumbnail" );
  }
}

Source: WP Snipp

Place a custom logo in dashboard

Just as a clients will love to see their own logo on WordPress login page, they might ask the WordPress developer to place it on the dashboard too.
Simply copy the code below and paste it to your 
functions.php file.

add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
   echo '<style type="text/css">
         #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }</style>';
}

Source: Smashing Magazine

Remove dashboard widgets

Introduced in WordPress 2.7, dashboard widgets can be pretty useful. For example, a WordPress developers can display your Google Analytics stats. Though, sometimes you don’t need it, or at least don’t need some of them.
The code below will allow you to remove WordPress’ dashboard widgets once you paste it in your 
functions.php file.

function example_remove_dashboard_widgets() {
        // Globalize the metaboxes array, this holds all the widgets for wp-admin
        global $wp_meta_boxes;

        // Remove the incomming links widget
        unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);       

        // Remove right now
        unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
        unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
        unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}

// Hook into the 'wp_dashboard_setup' action to register our function
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

Source: Hankis

Add custom login logo

Although it is unimportant for the blog performance or usability, most clients will appreciate their own logo on the dashboard login page,.
The 
Custom admin branding plugin can do that for you, as well as the following hack that you just have to paste in your functions.php file.

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
    </style>';
}

add_action('login_head', 'my_custom_login_logo');

Source: WPRecipes

Add custom widgets to WordPress dashboard

With the previous example, I showed you how easy it is to remove unwanted dashboard widgets. The good news is that creating your own widgets isn’t hard either.
The well-commented code below should be self-explanatory. Just insert it in your 
functions.php, as usual.

function example_dashboard_widget_function() {
        // Display whatever it is you want to show
        echo "Hello World, I'm a great Dashboard Widget";
} 

// Create the function use in the action hook
function example_add_dashboard_widgets() {
        wp_add_dashboard_widget('example_dashboard_widget', 'Example Dashboard Widget', 'example_dashboard_widget_function');
}
// Hook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

Source: Source

Change WordPress dashboard colors

If you ever wanted to be able to change WordPress dashboard colors (as well as font or even display) without having to edit WordPress core files, you’ll like this hack for sure.
The following example features a basic style change (grey header is replaced by a blue one) but you can easily add as many styles as you wish within the 
<style> and </style> tags.

function custom_colors() {
   echo '<style type="text/css">#wphead{background:#069}</style>';
}

add_action('admin_head', 'custom_colors');

Provide custom help messages

When Wordpress developers build a site for a client and they have problems with some parts of the dashboard, a good idea is to provide contextual help to the client.
The following hack will allow you to add a custom help messages for the blog admin. As usual, you only have to paste the code into your 
functions.php file.

function my_admin_help($text, $screen) {
        // Check we're only on my Settings page
        if (strcmp($screen, MY_PAGEHOOK) == 0 ) {

                $text = 'Here is some very useful information to help you use this plugin...';
                return $text;
        }
        // Let the default WP Dashboard help stuff through on other Admin pages
        return $text;
}

add_action( 'contextual_help', 'my_admin_help' );

Source: Studio Grasshopper

Remove dashboard widgets for specific user roles

If you’re owning a multi-user blog, it may be useful to know how to hide some dashboard widgets to keep confidential information in a safe place.
The following code will remove the 
postcustom meta box for “author” (role 2). To apply the hack on your own blog, just copy the code below and paste it in your functions.php file.

function customize_meta_boxes() {
     //retrieve current user info
     global $current_user;
     get_currentuserinfo();

     //if current user level is less than 3, remove the postcustom meta box
     if ($current_user->user_level < 3)
          remove_meta_box('postcustom','post','normal');
}

add_action('admin_init','customize_meta_boxes');

Source: Smashing Magazine

Reduce amount of post revisions

Post revisions are very useful, but they also clutter your database. In order to save  space, you can consider limiting the amount of post revisions automatically saved by WordPress.
This code has to be pasted in your 
wp-config.php file, located at the root of your WordPress install.

define( 'WP_POST_REVISIONS', 3 );

Source: WordPress Codex

Disable WordPress Login Hints

When you (or someone else) fails to login on your WordPress dashboard, an error message is displayed. While this can be useful to legit users, it can also give precious information to a potential hijacker.
Paste the code below into your 
functions.php file to prevent login error messages to be displayed.

function no_wordpress_errors(){
  return 'GET OFF MY LAWN !! RIGHT NOW !!';
}
add_filter( 'login_errors', 'no_wordpress_errors' );

Source: Labnol

The post 10 useful tips for WordPress dashboard customization appeared first on Web Developer / Front End Developer / JavaScript.

]]>
First steps with Gulp.js https://jacekjeznach.com/first-steps-with-gulp-js/ Sun, 22 Jan 2017 13:26:16 +0000 https://jacekjeznach.com/?p=1326 Front end front end developers spend little time coding. Even if we ignore meetings, much of the job involves basic tasks your working day: Tasks must be repeated every time you make a change. You begin with good intentions but the infallible front end developer will forget to compress an image or two. Over time, […]

The post First steps with Gulp.js appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Front end front end developers spend little time coding. Even if we ignore meetings, much of the job involves basic tasks your working day:

Tasks must be repeated every time you make a change. You begin with good intentions but the infallible front end developer will forget to compress an image or two. Over time, tasks become increasingly arduous and time-consuming; you’ll dread the inevitable content and template changes. It’s mind-numbing, repetitive work. Would it be better to spend your time on more profitable jobs?

If so, you need a task runner.

That Sounds Complicated!

Creating a build process will take time. It’s more complex than performing each task manually but, in long-term, you will save hours of effort, reduce human error and save your sanity. Adopt a pragmatic approach:

  • automate the most irritating tasks first
  • try not to over-complicate your build process; an hour or two is more than enough for the initial set-up
  • choose task runner software and stick with it for a while.

Part of the tools may be new to you but take a deep breath and concentrate on one thing at a time.

Task Runners: Gulp

Many issues were addressed in later editions but Gulp had already arrived and offered a number of improvements:

  1. Features such as file watching were built-in.
  2. Gulp plug-ins were (mostly) designed to do a single job.
  3. Gulp used JavaScript configuration code which was less verbose, easier to read, simpler to modify, and provided better flexibility.
  4. Gulp was faster because it uses Node.js streams to pass data through a series of piped plug-ins. Files were only written at the end of the task.

Of course, Gulp itself isn’t perfect and new task runners such as Broccoli.js, Brunch and webpack have also been competing for front end developer attention. More recently, npm itself has been touted as a simpler option. All have their pros and cons, but Gulp remains the favorite and is currently used by more than 40% of web developers.

Gulp needs Node.js but, while Part JavaScript knowledge is beneficial, front end developers from all web programming faiths will find it useful.

This guidedescribes how to use Gulp 3 – the most recent release version at the time of writing. Gulp 4 has been in development for Part time but remains a beta product. It’s possible to use or switch to Gulp 4 but I recommend sticking with version 3 until the final release.

Step 1: Node.js

Node.js can be downloaded for Windows, Mac and Linux from nodejs.org/download/. There are different options for installing from binaries, package managers and docker images – full instructions are available.

Note for Windows users: Node.js and Gulp run on Windows but some plug-ins may not install or run if they depend on native Linux binaries such as image compression libraries. One option for Windows 10 users is the new bash command-line; this solves many issues but is a beta product and could introduce alternative problems.

Once installed, open a command prompt and enter:

node -v

to reveal the version number. You’re about to make heavy use of npm – the Node.js package manager which is used to install modules. Examine its version number:

npm -v

Note for Linux users: Node.js modules can be installed globally so they are available throughout your system. However, most users will not have permission to write to the global directories unless npm commands are prefixed with sudo. There are a number of options to fix npm permissions and tools such as nvm can help but I often change the default directory, e.g. on Ubuntu/Debian-based platforms:

cd ~
mkdir .node_modules_global
npm config set prefix=$HOME/.node_modules_global
npm install npm -g

Then add the following line to the end of ~/.bashrc:

export PATH="$HOME/.node_modules_global/bin:$PATH"

and update with:

source ~/.bashrc

Step 2: Install Gulp Globally

Install Gulp command-line interface globally so the gulp command can be run from any project folder:

npm install gulp-cli -g

Verify Gulp has installed with:

gulp -v

Step 3: Configure Your Bulid

Note for Node.js projects: you can skip this step if you already have a package.json configuration file.

Presume you have a new or pre-existing project in the folder project1. Navigate to this folder and initialize it with npm:

cd project1
npm init

You will be asked a series of questions – enter a value or hit Return to accept defaults. A package.json file will be created on completion which stores your npm configuration settings.

For the remainder of this article we’ll presume your project folder contains the following sub-folders:

src folder: pre-processed source files

This contains further sub-folders:

  • html – HTML source files
  • images — the original uncompressed images
  • js — multiple pre-processed script files
  • scss — multiple pre-processed Sass .scss files

build folder: compiled/processed files

Gulp will create files and create sub-folders as necessary:

  • html – compiled static HTML files
  • images — compressed images
  • js — a single concatenated and minified JavaScript file
  • css — a single compiled and minified CSS file

Your project will almost certainly be different but this structure is used for the examples below.

Tip: If you’re on a Unix-based system and you just want to follow along with the tutorial, you can recreate the folder structure with the following command:

mkdir -p src/{html,images,js,scss} build/{html,images,js,css}

Step 3a: Install Gulp

You can now install Gulp in your project folder using the command:

npm install gulp --save-dev

This installs Gulp as a development dependency and the "devDependencies" section of package.json is updated accordingly.

Step 4: Create a Gulpfile.js

Create a new gulpfile.js configuration file in the root of your project folder. Add some basic code to get begined:

// Gulp.js configuration
var
  // modules
  gulp = require('gulp'),

  // development mode?
  devBuild = (process.env.NODE_ENV !== 'production'),

  // folders
  folder = {
    src: 'src/',
    build: 'build/'
  }
;

This references the Gulp module, sets a devBuild variable to true when running in development (or non-production mode) and defines the source and build folder locations.

 

Step 5: Create new Gulp Tasks

On it’s own, Gulp does nothing. You must:

  1. install Gulp plug-ins, and
  2. write tasks which utilize those plug-ins to do something useful.

It’s possible to write your own plug-ins but, since almost 3,000 are available, it’s unlikely you’ll ever need to. You can search using Gulp’s own directory at gulpjs.com/plugins/, on npmjs.com, or search “gulp something” to harness the mighty power of Google.

Gulp provides three primary task methods:

  • gulp.task – defines a new task with a name, optional array of dependencies and a function.
  • gulp.src – sets the folder where source files are located.
  • gulp.dest – sets the destination folder where build files will be placed.

Any number of plug-in calls are set with pipe between the .src and .dest.

Image Task

This is best demonstrated with an example so let’s create a basic task which compresses images and copies them to the appropriate build folder. Since this process could take time, we’ll only compress new and modified files. Two plug-ins can help us: gulp-newer and gulp-imagemin. Install them from the command-line:

npm install gulp-newer gulp-imagemin --save-dev

We can now reference both modules the top of gulpfile.js:

// Gulp.js configuration

var
  // modules
  gulp = require('gulp'),
  newer = require('gulp-newer'),
  imagemin = require('gulp-imagemin'),

We can now define the image processing task itself as a function at the end of gulpfile.js:

// image processing
gulp.task('images', function() {
  var out = folder.build + 'images/';
  return gulp.src(folder.src + 'images/**/*')
    .pipe(newer(out))
    .pipe(imagemin({ optimizationLevel: 5 }))
    .pipe(gulp.dest(out));
});

All tasks are syntactically similar. This code:

  1. Creates a new task named images.
  2. Defines a function with a return value which…
  3. Defines an out folder where build files will be located.
  4. Sets the Gulp src source folder. The /**/* ensures that images in sub-folders are also processed.
  5. Pipes all files to the gulp-newer module. Source files that are newer than corresponding destination files are passed through. Everything else is removed.
  6. The remaining new or changed files are piped through gulp-imagemin which sets an optional optimizationLevelargument.
  7. The compressed images are output to the Gulp dest folder set by out.

Save gulpfile.js and place a few images in your project’s src/images folder before running the task from the command line:

gulp images

All images are compressed accordingly and you will see output such as:

Using file gulpfile.js
Running 'imagemin'...
Finished 'imagemin' in 5.71 ms
gulp-imagemin: image1.png (saved 48.7 kB)
gulp-imagemin: image2.jpg (saved 36.2 kB)
gulp-imagemin: image3.svg (saved 12.8 kB)

Try running gulpimages again and nothing should happen because no newer images exist.

HTML Task

We can now create a similar task which copies files from the source HTML folder. We can safely minify our HTML code to remove unnecessary whitespace and attributes using the gulp-htmlclean plug-in:

npm install gulp-htmlclean --save-dev

which is then referenced at the top of gulpfile.js:

var
  // modules
  gulp = require('gulp'),
  newer = require('gulp-newer'),
  imagemin = require('gulp-imagemin'),
  htmlclean = require('gulp-htmlclean'),

We can now create an html task at the end of gulpfile.js:

// HTML processing
gulp.task('html', ['images'], function() {
  var
    out = folder.build + 'html/',
    page = gulp.src(folder.src + 'html/**/*')
      .pipe(newer(out));

  // minify production code
  if (!devBuild) {
    page = page.pipe(htmlclean());
  }

  return page.pipe(gulp.dest(out));
});

This reuses gulp-newer and introduces a couple of concepts:

  1. The [images] argument states that our images task must be run before processing the HTML (the HTML is likely to reference images). Any number of dependent tasks can be listed in this array and all will complete before the task function runs.
  2. We only pipe the HTML through gulp-htmlclean if NODE_ENV is set to production. Therefore, the HTML remains uncompressed during development which may be useful for debugging.

Save gulpfile.js and run gulp html from the command line. Both the html and images tasks will run.

JavaScript Task

Too easy for you? Let’s process all our JavaScript files by building a basic module bundler. It will:

  1. ensure dependencies are loaded first using the gulp-deporder plug-in. This analyses comments at the top of each script to ensure correct ordering e.g. // needs: defaults.js lib.js.
  2. concatenate all script files into a single main.js file using gulp-concat, and
  3. remove all console and debugging statements with gulp-strip-debug and minimize code with gulp-uglify. This step will only occur when running in production mode.

Install the plug-ins:

npm install gulp-deporder gulp-concat gulp-strip-debug gulp-uglify --save-dev

Reference them at the top of gulpfile.js:

var
  ...
  concat = require('gulp-concat'),
  deporder = require('gulp-deporder'),
  stripdebug = require('gulp-strip-debug'),
  uglify = require('gulp-uglify'),

Then add a new js task:

// JavaScript processing
gulp.task('js', function() {

  var jsbuild = gulp.src(folder.src + 'js/**/*')
    .pipe(deporder())
    .pipe(concat('main.js'));

  if (!devBuild) {
    jsbuild = jsbuild
      .pipe(stripdebug())
      .pipe(uglify());
  }

  return jsbuild.pipe(gulp.dest(folder.build + 'js/'));

});

Save then run gulp js to watch the magic happen!

CSS Task

Finally, let’s create a CSS task which compiles Sass .scss files to a single .css file using gulp-sass. This is a Gulp plug-in for node-sass which binds to the super-fast LibSass C/C++ port of the Sass engine (you won’t need to install Ruby). We’ll presume your primary Sass file scss/main.scss is responsible for loading all partials.

Our task will also utilize the fabulous PostCSS via the gulp-postcss plug-in. PostCSS needs its own set of plug-ins and we’ll install:

  • postcss-assets to manage assets. This allows us to use properties such as background: resolve('image.png'); to resolve file paths or background: inline('image.png'); to inline data-encoded images.
  • autoprefixer to automatically add vendor prefixes to CSS properties.
  • css-mqpacker to pack multiple references to the same CSS media query into a single rule.
  • cssnano to minify the CSS code when running in production mode.

First, install all the modules:

npm install gulp-sass gulp-postcss postcss-assets autoprefixer css-mqpacker cssnano --save-dev

and reference them at the top of gulpfile.js:

var
  ...
  sass = require('gulp-sass'),
  postcss = require('gulp-postcss'),
  assets = require('postcss-assets'),
  autoprefixer = require('autoprefixer'),
  mqpacker = require('css-mqpacker'),
  cssnano = require('cssnano'),

We can now create a new css task at the end of gulpfile.js. Note the images task is set as a dependency because the postcss-assets plug-in can reference images during the build process. In addition, most plug-ins can be passed arguments – refer to their documentation for more information:

// CSS processing
gulp.task('css', ['images'], function() {

  var postCssOpts = [
  assets({ loadPaths: ['images/'] }),
  autoprefixer({ browsers: ['last 2 versions', '> 2%'] }),
  mqpacker
  ];

  if (!devBuild) {
    postCssOpts.push(cssnano);
  }

  return gulp.src(folder.src + 'scss/main.scss')
    .pipe(sass({
      outputStyle: 'nested',
      imagePath: 'images/',
      precision: 3,
      errLogToConsole: true
    }))
    .pipe(postcss(postCssOpts))
    .pipe(gulp.dest(folder.build + 'css/'));

});

Save the file and run the task from the command line:

gulp css

Step 6: Automate You Gulp Tasks

We’ve been running one task at a time. We can run them all in one command by adding a new run task to gulpfile.js:

// run all tasks
gulp.task('run', ['html', 'css', 'js']);

Save and enter gulp run at the command line to execute all tasks. Note I omitted the images task because it’s already set as a dependency for the html and css tasks.

Is this still too much hard work? Gulp offers another method – gulp.watch – which can monitor your source files and run an appropriate task whenever a file is changed. The method is passed a folder and a list of tasks to execute when a change occurs. Let’s create a new watch task at the end of gulpfile.js:

// watch for changes
gulp.task('watch', function() {

  // image changes
  gulp.watch(folder.src + 'images/**/*', ['images']);

  // html changes
  gulp.watch(folder.src + 'html/**/*', ['html']);

  // javascript changes
  gulp.watch(folder.src + 'js/**/*', ['js']);

  // css changes
  gulp.watch(folder.src + 'scss/**/*', ['css']);

});

Rather than running gulp watch immediately, let’s add a default task:

// default task
gulp.task('default', ['run', 'watch']);

Save gulpfile.js and enter gulp at the command line. Your images, HTML, CSS and JavaScript will all be processed then Gulp will remain active watching for updates and re-running tasks as necessary. Hit Ctrl/Cmd + C to abort monitoring and return to the command line.

Step 7: Yupi!

Other plug-ins you may find useful:

One useful method in gulp-util is .noop() which passes data straight through without performing any action. This could be used for cleaner development/production processing code, e.g.

var gutil = require('gulp-util');

// HTML processing
gulp.task('html', ['images'], function() {
  var out = folder.src + 'html/**/*';

  return gulp.src(folder.src + 'html/**/*')
    .pipe(newer(out))
    .pipe(devBuild ? gutil.noop() : htmlclean())
    .pipe(gulp.dest(out));

});

Gulp can also call other Node.js modules – they don’t necessarily need to be plug-ins, e.g.

  • browser-sync – automatically reload assets or refresh your browser when changes occur
  • del – delete files and folders (perhaps clean your build folder at the begin of every run).

Invest a little time and Gulp could save many hours of development frustration. The advantages:

  • plug-ins are plentiful
  • configuration using pipes is readable and easy to follow
  • gulpfile.js can be adapted and reused in other projects
  • your total page weight can be reduced to improve performance
  • you can simplify your deployment.

Useful links:

The post First steps with Gulp.js appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Even better font loading https://jacekjeznach.com/even-better-font-loading/ Thu, 12 Jan 2017 09:02:02 +0000 https://jacekjeznach.com/?p=1306 Web fonts are  increasingly popular. Using web fonts allows to include and use specific fonts along with the assets of their websites.  Unfortunately, not all web fonts download instantaneously, which means there is some time during the load where the browser must show the webpage without the font. Many web fonts are quite large, causing […]

The post Even better font loading appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Web fonts are  increasingly popular. Using web fonts allows to include and use specific fonts along with the assets of their websites.  Unfortunately, not all web fonts download instantaneously, which means there is some time during the load where the browser must show the webpage without the font. Many web fonts are quite large, causing a long delay until the browser can use them.

Font Loading Policy

The browser should attempt to show a web page in the best way possible despite not being able to use a font due to an ongoing download. WebKit will always end up using the downloaded font when it is available; however, some fonts may require quite some time to complete downloading. For these fonts, WebKit will show elements with invisible text during the delay. Older versions of WebKit would continue to show this invisible text until the font completes downloading. Instead, newer versions of WebKit will show this invisible text for a maximum of 3 seconds, at which point it will switch to a local font chosen from the element’s style before finally switching to the downloaded font when the download completes.

This new policy minimizes a flash of fallback text for fast-downloading fonts without making long-downloading fonts illegible indefinitely. The best part is that websites don’t have to do anything to adopt this new policy; all font loads will use it by default.

CSS Font Loading API

Different web authors may want different policies for headline fonts or for body fonts. With the CSS Font Loading API, new in WebKit, web authors have complete control over their own font loading policy.

This API exposes two main pieces to JavaScript: the FontFace interface and the FontFaceSet interface. FontFace represents the same concept as a CSS @font-face rule, so it contains information about a font like its url, weight, unicode-range, family, etc. The document’s FontFaceSet contains all the fonts the webpage can use for rendering. Each document has its own FontFaceSet, accessible via document.fonts.

Using these objects to implement a particular font loading policy is straightforward. Once a FontFace has been constructed, the load() method initiates asynchronous downloading of the font data. It returns a Promise that is fulfilled when the download succeeds or rejected when the download fails. By chaining a handler to the returned promise, JavaScript can take action when the download finishes. Therefore, a website could implement a policy of using a fallback font immediately with no timeout by using the following code:

<div id="target" style="font-family: MyFallbackFont;">hamburgefonstiv</div>
let fontFace = new FontFace("MyWebFont", "url('MyWebFont.woff2') format('woff2'),
    url('MyWebFont.woff') format('woff')");
fontFace.load().then(function(loadedFontFace) {
    document.fonts.add(loadedFontFace);
    document.getElementById("target").style.fontFamily = "MyWebFont";
});

In this example, the element is styled declaratively to use MyFallbackFont. Then, JavaScript runs and starts requesting MyWebFont. If the font download is successful, the newly downloaded font is added to the document’s FontFaceSet and the element’s style is modified to use this new font.

WOFF 2

No matter which font loading policy is used, the user’s experience will be best when fonts download quickly. WebKit on macOS Sierra, iOS 10, and GTK supports a new, smaller font file format named “WOFF 2.” The fonts are smaller because they use advanced Brotli compression, which means that WOFF 2 fonts can download significantly faster than the same font represented with other common formats like WOFF, OpenType, and TrueType. WebKit also recognizes the format("woff2") identifier in the src property inside the CSS @font-face rule. Because not all browsers support WOFF 2 yet, it is possible to elegantly fall back to another format if the browser doesn’t support WOFF 2, like so:

@font-face {
    font-family: MyWebFont;
    src: url("MyWebFont.woff2") format("woff2"),
         url("MyWebFont.woff") format("woff");
}

In this example, browsers will use the format CSS function to selectively download whichever fonts they support. Because browsers will prefer fonts appearing earlier in the list over fonts appearing later, browsers encountering this code will always prefer the WOFF 2 font over the WOFF font if they support it.

unicode-range

Bandwidth is expensive (especially to mobile devices), so minimizing or eliminating font downloads is incredibly valuable. WebKit will now honor the unicode-range CSS property for the purposes of font downloading. Consider the following content:

@font-face {
    font-family: MyWebFont;
    src: url("MyWebFont-extended.woff2") format("woff2"),
         url("MyWebFont-extended.woff") format("woff");
    unicode-range: U+110-24F;
}

@font-face {
    font-family: MyWebFont;
    src: url("MyWebFont.woff2") format("woff2"),
         url("MyWebFont.woff") format("woff");
    unicode-range: U+0-FF;
}
<div style="font-family: MyWebFont;">hamburgefonstiv</div>

In this content, none of the characters styled with MyWebFont fall within the unicode-rangeof the first CSS @font-face rule, which means that there is no reason to download it at all! It’s important to remember, however, that styling any character with a web font will always cause the last matching @font-face to be downloaded in order to correctly size the containing element according to the metrics of the font. Therefore, the most-common CSS @font-face rule should be listed last. Using unicode-range to partition fonts can eliminate font downloads entirely, thereby saving your users’ bandwidth and battery.

The post Even better font loading appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Responsive tables https://jacekjeznach.com/responsive-tables/ Thu, 12 Jan 2017 08:48:41 +0000 https://jacekjeznach.com/?p=1301 This is an awesome solution for responsive tables with complex data.

The post Responsive tables appeared first on Web Developer / Front End Developer / JavaScript.

]]>
This is an awesome solution for responsive tables with complex data.

The post Responsive tables appeared first on Web Developer / Front End Developer / JavaScript.

]]>
12 Front End Developer responsibilities https://jacekjeznach.com/front-end-developer-must/ Thu, 12 Jan 2017 08:38:52 +0000 https://jacekjeznach.com/?p=1292 Because the front end developer is this central position and he is dealing with lots of different people, the job can be done better if they are paying attention A front end developer must pay attention at design If they aren’t a designer themselves, they know how important design is. They have good taste in design. […]

The post 12 Front End Developer responsibilities appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Because the front end developer is this central position and he is dealing with lots of different people, the job can be done better if they are paying attention

A front end developer must pay attention at design

If they aren’t a designer themselves, they know how important design is. They have good taste in design. They know about the tools involved. They know where the design role fits into the process.

A front end developer must be aware of the back end.

If they aren’t a back end coder themselves, they know how important the back end is. They know what the back end is capable of delivering and what it isn’t. They know the responsibilities back end developers have. They know the languages involved. They know how to ask for what they need on the front end.

A front end developer must pay attention at the network.

They know that websites are delivered over the internet, a network, and that that network is a wild and sometimes unpredictable place. They know networks can be on or off, fast or slow, and reliable or unreliable.

A front end developer is aware of performance.

If they aren’t entirely performance focused themselves, they know that performance is vital to a website’s success. They know performance is a complex world onto itself. They know there are quick wins and long term struggles. They know that so long as the back end is fast, the other 80% of the time a website is loading is a front end concern.

A front end developer must pay attention at content strategy.

If they aren’t a content strategist themselves, they know that websites live and die by the content on them. They know that the lack of a content plan can cause problems that you may not be able to develop your way out of. They know that the people that use the website is what matters and those people need to find what they need and expect it to be in good shape.

A front end developer is aware of databases.

The content lives there. The content must be in good shape. The front end developer can only work with what comes out of those databases. The front end developer needs to combine what comes out of those databases with templates to make the website happen.

A front end developer must pay attention for testing.

So many kinds! Integration testing. Regression testing. User testing!

A front end developer must be aware of systems.

They might be responsible for implementing a design system, or an icon system, or a coding style guide. They might have to create those systems themselves. They might need to document those systems.

A front end developer must be aware of devops.

They are writing and committing code along with every other coder on the project, so they need to adhere to the same setup as everyone else. If they didn’t write the build system themselves, they know what it is, what it does, and what it is capable of. If they didn’t set up deployment themselves, they know how to use it.

A front end developer must be aware of servers.

Without them, there is no website.

A front end developer must be aware of accessibility.

If they aren’t well versed in building for accessibility themselves, they know that it’s important. They know how to test for it. They know who to talk to about it. They know there is quick wins and long term struggles regarding it.

A front end developer must be aware of the device landscape.

They know the web is everywhere these days and a good website needs to meet users there. Big screens, little screens, touch screens, far away screens, black and white screens. The front end developer is aware of the unknown.

The post 12 Front End Developer responsibilities appeared first on Web Developer / Front End Developer / JavaScript.

]]>
8 useful & tricky css techniques https://jacekjeznach.com/useful-css-techniques/ Sun, 08 Jan 2017 13:04:57 +0000 https://jacekjeznach.com/?p=1275 Gradually CSS is becoming more and more powerful and nowadays it allows a lot of possibilities for CSS developers. This article is a compilation of fresh, advanced tips and techniques to master your CSS skills. Warning: some techniques contained in this article are still considered as experimental. Make sure to check the browser compatibility before you […]

The post 8 useful & tricky css techniques appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Gradually CSS is becoming more and more powerful and nowadays it allows a lot of possibilities for CSS developers. This article is a compilation of fresh, advanced tips and techniques to master your CSS skills.


Warning: some techniques contained in this article are still considered as experimental. Make sure to check the browser compatibility before you implement them on a production site.

Using SVG for icons

SVG is supported by all modern browsers and scales well for all resolution types, so there’s no reason for CSS developers to continue using .jpg or .gif images for icons. Note the use of the background-size property to scale the background image on the on container size.

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

Source: CSS Tricks

Fixed table layouts

A widely supported but surprisingly little-known by CSS developers property which changes the way the tables are rendered and gives you a sturdier, more predictable layout.

table {
  table-layout: fixed;
}

Source: CSS Tricks

Curve text around a floated image

The shape-outside is a CSS property that allows geometric shapes to be set, in order to define an area for text to flow around.

.shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

Here’s the result of the .shape class applied to the image:
exaple
Source: WebDesigner Depot

Intrinsic Ratio Boxes

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;  
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Source: AllThingsSmitty

Color fade on hover

A very easy way to make your links (or any other element) look better.

a {
 color: #000;
 -webkit-transition: color 1s ease-in; /*safari and chrome */
 -moz-transition: color 1s ease-in; /* firefox */
 -o-transition: color 1s ease-in; /* opera */
}

a:hover { 
 color: #c00;
}

Source: Matt Lambert

Style broken images

Broken images never look good, but it happens every now and then that one or two images on your site are broken. Using some advanced techniques, a CSS developer style broken images and provide custom error messages to your visitors.

img {  
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

Look what can be achieved with that technique: way better than browsers’ default, right?
broken-image-css
Source: Bitsofco.de

Empty and not empty attribute selectors

CSS3 makes it easy to apply different styles to an element, depending on whether a data-* attribute is empty or not. Have a look at the HTML code below:

<div data-attr="">
</div>

<div data-attr="value">
</div>

And now, our CSS, with specific styling for any div element with an empty data-attr attribute:

div {
  border: 1px solid gray;
  height: 100px;
  margin: 10px;
  width: 100px;
}

/* Empty attribute selector */
div[data-attr=''] {
  background: red;
}

/* Not empty attribute selector */
div:not([data-attr='']) {
  background: green;
}

Source: Vacheslav Starikov

Comma-Separated Lists

A little snippet to display an unordered list as a comma-separated list. Note the use of :not(:last-child) to ensure that the last list element won’t be followed by a comma.

ul > li:not(:last-child)::after {
  content: ",";
}

Source: AllThingsSmitty

The post 8 useful & tricky css techniques appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Steps to make WordPress blog more secure https://jacekjeznach.com/steps-to-make-wordpress-blog-more-secure/ Sun, 08 Jan 2017 12:25:21 +0000 https://jacekjeznach.com/?p=1257 WordPress itself is a very secure platform. However, there’s a some mistakes that many WordPress users make and that can be exploited by potential attackers. In this article, I’m presenting you simple steps for maximum security. Stay updated As a rule of thumb, every time the WordPress core or a plugin you’re using has an available […]

The post Steps to make WordPress blog more secure appeared first on Web Developer / Front End Developer / JavaScript.

]]>
WordPress itself is a very secure platform. However, there’s a some mistakes that many WordPress users make and that can be exploited by potential attackers. In this article, I’m presenting you simple steps for maximum security.


Stay updated

As a rule of thumb, every time the WordPress core or a plugin you’re using has an available update, don’t forget to apply it. Updates bring new features, but also security fixes. Although WordPress has automatic background updates since version 3.7, you should always keep an eye on them, as automatic updates may sometimes fail to complete.

Plugins are also a sensitive part of your WordPress installation. Remember to update them as soon as an update is available.

Pick a random user name

Attackers know that most people are using usernames such as “admin” or the url of their website. By picking a random user name, you’re making their task much more difficult.

Always pick a strong password

It might seem like a obvious tip, but working with WordPress (and websites in general) every day, I can tell you that most people tend to use  weak passwords to protect something as important as their own website.

A strong password has:

  • at least 15 characters
  • uppercase letters
  • lowercase letters
  • numbers
  • symbols, such as ` ! " ? $ ? % ^ & * ( ) _ - + = { [ } ] :

A strong password is not:

  • your login or username
  • your name, your friend’s name, your family member’s name, or a common name
  • a dictionary word
  • like your previous passwords
  • your date of birth
  • a keyboard pattern, such as qwerty, asdfghjkl, or 12345678

Need help to pick a super strong password? Head over this simple but efficient web app.

Host your website on a reliable web host

Especially if you’re on a shared server (this is the case of most small websites such as a personal blog), attackers can use corrupted files on the server, even if they aren’t yours, to spread on other websites hosted on the server. This can’t be fully stopped by you alone, this is why you need to be sure that your web host is super serious about security and offers a strong customer support that will always be helpful in case of any problems.

 

Make regular backups

If a problem happens, it is essential for every developer to have a backup of both your database and files, so you can restore it to your server. Backups can be done manually or using a plugin such as WP Database Backup. Your web host can also make regular back-ups of your website and database.

Use .htaccess to protect wp-login

Password protecting your wp-login.php file can add an extra layer to your server. Because password protecting wp-admin can break any plugin that uses ajax on the front end, it’s usually sufficient to just protect wp-login.php.

To do this, you will need to create a .htpasswd file. To do so, go to htpasswd generator and follow the instructions. Once you have your file ready, upload it to your server.

Once done, you need to tell .htaccess where it’s at. Assuming you’ve put .htpasswd in your user’s home directory and your htpasswd username is mysecretuser, then you put this in your .htaccess file:

# Stop Apache from serving .ht* files
<Files ~ "^\.ht">
Order allow,deny
Deny from all
</Files>

# Protect wp-login
<Files wp-login.php>
AuthUserFile ~/.htpasswd
AuthName "Private access"
AuthType Basic
require user mysecretuser
</Files>

If you’re looking for a plugin instead of doing it by yourself, have a look at AskApache Password Protect. Please note though, that it hasn’t been updated in a year. I haven’t tried it myself so I can’t really neither recommend nor not recommend this plugin.

Remove unnecessary error messages

Login error messages are useful, but unfortunately, they can also provide information to attackers.

To get rid of login errors display on your wp-login.php page, open your functions.php file and append the code below to it:

add_filter('login_errors',create_function('$a', "return null;"));

Be careful with plugins and themes

Basically, everything a developer adds to your WordPress install (Themes and Plugins) potentially contains vulnerable code. In fact, anyone can write and offer a plugin or theme.

When choosing a plugin or a theme, make sure that:

  • You get it from a reliable source, such as the official WordPress.org repositories
  • The plugin/theme is well maintained and has been updated recently
  • The plugin has a significant number of installs and/or ratings

Premium themes and plugins that you can find available for free might often contain malicious code injected in them. Sure, a premium theme or a plugin is an investment, but the average $60 you’ll spend is a lot cheaper than the help of a developer or security expert to help you with a broken or a hijacked website. Established premium theme/plugin sellers as such as ElegantThemes, ThemeForest or Themify are very serious about security.

Rename your database tables

By default, WordPress uses wp_ to prefix your database tables. While it can be easily changed when installing WordPress, unfortunately most developers don’t modify the default prefix. It makes it easier for attackers to target your database.

Happily, there’s a handy plugin called DB Prefix Change which allows you to easily change your database prefix from the default wp_ to something unique and virtually impossible to guess.

Disable file editing

WordPress features a built-in file editor, which can be very useful to edit your theme on the fly. Unfortunately, if an attacker gains access to your WordPress dashboard as an administrator, he will be able to edit your files, and do much damage. For this reason, you might want to disable WordPress built-in file editor and use a regular FTP program to edit your theme files instead.

To do so, simply paste the code below into your wp-config.php file, which is located at the root of your WordPress install.

define('DISALLOW_FILE_EDIT', true);

Make use of the All In One WP Security & Firewall plugin

The All In One WordPress Security plugin will take your website security to a whole new level. Designed and written by expert developers, it reduces security risk by checking for vulnerabilities, and by implementing and enforcing the latest recommended WordPress security practices and techniques.

Install All In One WP Security from your WordPress dashboard or download it from here.

The post Steps to make WordPress blog more secure appeared first on Web Developer / Front End Developer / JavaScript.

]]>
WPfillme https://jacekjeznach.com/wpfillme/ Sat, 11 Jun 2016 08:47:00 +0000 https://jacekjeznach.com/?p=1174 Based on the capabilities of the WordPress TinyMCE editor, WPFill.Me creates filler content designed specifically for robust CSS testing in the WordPress environment.

The post WPfillme appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Based on the capabilities of the WordPress TinyMCE editor, WPFill.Me creates filler content designed specifically for robust CSS testing in the WordPress environment.

The post WPfillme appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Swiper https://jacekjeznach.com/swiper/ Thu, 02 Jun 2016 17:33:57 +0000 https://jacekjeznach.com/?p=1170 Most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

The post Swiper appeared first on Web Developer / Front End Developer / JavaScript.

]]>
Most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

The post Swiper appeared first on Web Developer / Front End Developer / JavaScript.

]]>