June 28, 2017

Auto version your JavaScript or Stylesheet files using .htaccess

Usually, developers can maintain the cache they maintain themselves at the backend but cannot control the cache held by the browser as freely as they want unless there is proper version control. Here is a quick drop in solution in `.htaccess` file until you have proper versioning.

Most of the applications have one or many layers of cache for their system. The cache that application developer can maintain is at the backend (the server) level. However, you cannot control the cache held by the browser as freely as you want unless you version the files as well.

Versioning the files is definitely the best way to solve this problem because it is a very efficient solution which guarantees that browser will fetch the new resource when you want it to. But there are cases where this is not an easy step to be taken, for example, in a legacy app which resources are included in line the page.

So, is there a quick way to fix the problem until you go to proper versioning?

Yes! there is.

Using .htaccess we can auto version the files and force the browser to fetch files down to every second if we need to.

Here is how:

We can use server variables such as TIME_YEAR, TIME_MONTH to create an automatic version of your resource. These are variables that the web server provide to be used where suitable. And now, let’s see how to do this.

RewriteCond %{QUERY_STRING} !(v=(.<em>))
Rewriterule ^(js|scripts|css|styles)(.</em>)$ /$1$2?v=%{TIME_YEAR}%{TIME_MON}%{TIME_DAY}%{TIME_HOUR} [r=302,nc]`

Open your .htaccess files and paste those two lines in. What these are doing is:

  • If a request comes to the server that starts with js, scripts, css or styles then rewrite the request by appending an auto-created version at the end.
  • IF a request comes with the version already in the request then don’t do anything because we don’t want it to keep rewriting the request.

Simple as that. So for example: if the request comes to https://abc.com/js/main.js it gets served as https://abc.com/js/main.js?v=2017062811. Same goes for any request coming to other paths as well. This example ensures that browser will fetch the resource again every hour. But if you add variables like TIME_MINUTE or TIME_SECOND or TIME browser will keep fetching the content more frequently.

To see what other server variables can be used visit https://httpd.apache.org/docs/trunk/expr.html#vars

March 22, 2017

Why doesn't &quot;knife upload roles&quot; upload any roles?

Josh Gagnon’s Question:

I followed the OpsCode quickstart guide and things went fairly smoothly, but now I’m running into issues experimenting with roles. I have a “starter” role in my repo that was provided by OpsCode. When I follow the first official documentation I could find and run the following from the top of my chef repo:

knife upload roles

it simply returns and nothing happens. I get no role (new or updated) on my chef server. The following line does work for creation and updating:

knife role from file .rolesstarter.rb

but I find it overly cumbersome and I would prefer something that just pushes my entire repo up to the server (or at least all of the roles) to make me more confident that everything is up to date.

Yeah, in this case Chef is a little bit inconsistent. I use the next 3 lines to push by whole repo to chef-server (of course after the tests have passed):

knife cookbook upload --all
knife role from file roles/*.rb
knife data bag from file --all

Suggested solution from Draco, didn’t work for me to upload the data_bags. Here is what I did.

knife cookbook upload --all
knife role from file roles/*.rb
knife upload data_bags/
March 4, 2017

MAX in PHP returning wrong value

Krish’s Question:

I have an array with key and value pair. I’m building this array dynamically and below is the code.

$x[] = array('type_name' => $value->name,
            'percentage'=> intval($percentage));

My intention is to get the maximum value and for that I do

max($x);

However it is returning the wrong value actually the lowest value. Following is my array. Any help would be awesome.

Thanks is advance.

You need to read how the max compares against different types of data. In your case, you are trying to compare against one of the array item i.e. percentage inside one of the item so the function max does not know to do this.

There is an example by Revo in the manual which shows you how to do this.

October 24, 2016

MySQL about constraint

J.Doe’s Question:

Good afternoon,

Can anyone tell me what’s wrong with my code on PHP MY ADMIN, I’m trying to write a CONSTRAINT and create values for the car color in the beginning ( with table creation)

CREATE TABLE T_CAR
(CAR_ID                INTEGER       NOT NULL PRIMARY KEY,
 CAR_MARK            CHAR(32)      NOT NULL,
 CAR_MODEL            VARCHAR(16),
 CAR_NUMBER   CHAR(10)      NOT NULL,
 CAR_COLOR           CHAR(16)      CHECK (VALUE IN ('white', 'black', 'red', 'green', 'blue')))

The problem is with the last line (error message syntax not known).
Thanks in advance.

MySQL ignores check expression.

Manual: Create Table

The CHECK clause is parsed but ignored by all storage engines.

Try Enum:

CREATE TABLE T_CAR (
    CAR_ID INTEGER NOT NULL PRIMARY KEY,
    CAR_MARK CHAR(32) NOT NULL,
    CAR_MODEL VARCHAR(16),
    CAR_NUMBER CHAR(10) NOT NULL,
    CAR_COLOR ENUM('white', 'black', 'red', 'green', 'blue') NOT NULL
)
October 20, 2016

How can I let a table cell take in the full width of the table with css?

Jim Peeters’s Question:

For some reason the cells in my second row in my table are changing the width of the cells in the row above. I have no idea why this is the cause. I don’t want the width of the first cell in the first row to be changed. I have reproduced the problem in jsfiddle to make it clear what I mean.

FiddleJS link:

https://jsfiddle.net/bpyrgsvc/1/

HTML:

<div class="table">
  <div class="row">
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
  </div>
  <div class="row">
    <div class="cell">this changes the width of the cell above</div>
  </div>
</div>

CSS:

.table {
  display:table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

I don’t see anything wrong with the results. In a div set to be displayed as table and table-row, it is behaving as tables.

To get the result you want, close the first table and start another.

<div class="table">
  <div class="row">
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
  </div>
</div>
<div class="table">
  <div class="row">
    <div class="cell cell-full">this changes the width of the cell above</div>
  </div>
</div>

https://jsfiddle.net/bpyrgsvc/4/

October 17, 2016

Change width of child div element using JQuery

Bodzilla’s Question:

I have an element in my html with this markup:

<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="width: 98px; display: block;">

I would like to know how to remove the width attribute using jQuery

You can set the width to be auto

$("selector").css('width', 'auto);
September 20, 2016

How do I know when my docker mysql container is up and mysql is ready for taking queries?

Haren’s Question:

I am deploying a few different docker containers, mysql being the first one. I want to run scripts as soon as database is up and proceed to building other containers. The script has been failing because it was trying to run when the entrypoint script, which sets up mysql (from this official mysql container), was still running.


sudo docker run --name mysql -e MYSQL_ROOT_PASSWORD=MY_ROOT_PASS -p 3306:3306 -d mysql
[..] wait for mysql to be ready [..]
mysql -h 127.0.0.1 -P 3306 -u root --password=MY_ROOT_PASS < MY_SQL_SCRIPT.sql

Is there a way to wait for a signal of an entrypoiny mysql setup script finishing inside the docker container? Bash sleep seems like a suboptimal solution.

EDIT: Went for a bash script like this. Not the most elegant and kinda brute force but works like a charm. Maybe someone will find that useful.


OUTPUT="Can't connect"
while [[ $OUTPUT == *"Can't connect"* ]]
do
OUTPUT=$(mysql -h $APP_IP -P :$APP_PORT -u yyy --password=xxx < ./my_script.sql 2>&1)
done

On your ENTRYPOINT script, you have to check if you have a valid MySQL connection or not.

This solution does not require you to install a MySQL Client on the container and while running the container with php:7.0-fpm running nc was not an option, because it had to be installed as well. Also, checking if the port is open does not necessarily mean that the service is running and exposed correctly. [more of this]

So in this solution, I will show you how to run a PHP script to check if a MySQL Container is able to take connection. If you want to know why I think this is a better approach check my comment here.

File entrypoint.sh

#!/bin/bash
cat << EOF > /tmp/wait_for_mysql.php
<?php
$connected = false;
while(!$connected) {
    try{
        $dbh = new pdo( 
            'mysql:host=mysql:3306;dbname=db_name', 'db_user', 'db_pass',
            array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)
        );
        $connected = true;
    }
    catch(PDOException $ex){
        error_log("Could not connect to MySQL");
        error_log($ex->getMessage());
        error_log("Waiting for MySQL Connection.");
        sleep(5);
    }
}
EOF
php /tmp/wait_for_mysql.php
# Rest of entry point bootstrapping

By running this, you are essentially blocking any bootstrapping logic of your container UNTIL you have a valid MySQL Connection.

September 14, 2016

relative position and left and right property together not working, only left is working

Ua_boaz’s Question:

I am using this tree grid directive github.com, and below css is taken directly from this library.

.tree-grid .level-2 .indented {
    position : relative;
    left     : 20px;
}

<td><a ng-click="user_clicks_branch(row.branch)"><i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon"></i></a><span class="indented tree-label tree-grid-row level-2>
             Citi Corporate and Investment Banking</span>
            </td>

The problem i am having is that span inside td is overflow and showing in the next column, for that purpose i need to add right:20px, but it is not working.

Is there any solution to this problem
plnkr.co

Just adding padding-right: 20px; gives what you are asking.

I selected the targeted span from CSS like

<!DOCTYPE html>
<html ng-app="abas-web">
  ...
  <body>
  ...
  <style>
    span.indented.tree-label {
      padding-right: 20px;
    }
  </style>
  </body>

</html>

Demo

June 30, 2016

How to run Witter app from Udacity “Offline Web Applications” course using docker?

This blog post shows how you can run the Wittr application from a Udacity course called ‘Offline Web Applications’ using docker. This is helpful if your development stack does not run on localhost and you want to overcome `insecure origin` issue of the browsers.

Note: This is blog post, so I have written a bit back story as well. If you don’t want to read about that clone https://github.com/starx/wittr.git run docker-compose up -d Done!

I was trying a course from udacity called “Offline Web Applications” and I got stuck in the point where I was trying to register the service worker. That was because the request to register the service worker was coming form an insecure origin. Nowadays, modern browser browswer have started to deprecate powerful web feature on insecure origin (more here)) and the course fails to address this issue because the developer’s stack can vary. So the question is What is secure origin?

In chrome “Secure origins” are origins that match at least one of the following (scheme, host, port) patterns: more here

(https, *, *)
(wss, *, *)
(*, localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —) 

So it still supports developer in a way that is does not restrict request from localhost 127... or ::1. Which was another thing to fix because my development stack is not be the most common one as I don’t use localhost to test my work. I do these through vms, vagrant and nowadays from docker as well. This means that most of the time the test url is anything but localhost. So stuck on this for a while I tries several things, like trying to turn off insecure origin flag on flag, proxy, trying to point localhost to another ip is windows 10 bunch of bullshit which is just lost time. So I created a docker configuration to run the witter project.

file: Dockerfile

FROM node:latest

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY ./* /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app

EXPOSE 8888 8889
CMD [ "npm run serve" ]

Simple enough for those who know docker basics. It binds with the ports in the host, so the project will run as localhost:8888 and localhost:8889 as the course wants. But if you want to know what it does, I am happy to explain it.

I have forked the course repo and have added this (with a docker-compose.yml as well) to the project itself at:

https://github.com/starx/wittr

Clone https://github.com/starx/wittr.git rather than the one provided in the course and run docker-compose up -d and continue with the course. I have also have created a pull request to help others but there is already 2 previous pull request pending without any comments, So I doubt it will be pulled.

Comments appreciated.

...

Please fill the form - I will response as fast as I can!