Small Exercise

0

In a recent project, I got a list of integers something similar to following.

1
12
123
1234
12345
….
123456789

and, I was asked to add zeros to the left or right of the list and make it as below.

List 1:
0000000001
0000000012
0000000123
…..
0123456789

List 2:
1000000000
1200000000
1230000000
….
1234567890

C# – PadLeft / PadRight

In C#, you can use PadLeft and PadRight functions to do this.
https://msdn.microsoft.com/en-us/library/system.string.padleft(v=vs.110).aspx

String.PadLeft Method (Int32, Char)
String.PadRight Method (Int32, Char)

int[] numbers = { 1, 12, 123, 1234, 12345, 123456, 1234567, 12345678, 123456789 };

Console.WriteLine("List 1");
foreach (var i in numbers)
{
Console.WriteLine(i.ToString().PadLeft(10, '0'));
}

Console.WriteLine();
Console.WriteLine("List 2");
foreach (var i in numbers)
{
Console.WriteLine(i.ToString().PadRight(10, '0'));
}

 

PadLeft and PadRight

PadLeft and PadRight

SQL

Here comes the interesting part, I had to do this using SQL. In SQL there are no inbuilt PadLeft or PadRight functions.  So, I have used the LEFT and RIGHT SQL functions with a small hack.

CREATE TABLE [dbo].[NumberPadding](
[Number] [int] NOT NULL
) ON [PRIMARY]
GO;

INSERT INTO dbo.NumberPadding
VALUES (1), (12), (123), (1234), (12345), (123456), (1234567), (12345678), (123456789)
GO;

SELECT LEFT (CAST([Number] AS VARCHAR) + '0000000000', 10) FROM dbo.NumberPadding;

SELECT RIGHT ('0000000000' + CAST([Number] AS VARCHAR) , 10) FROM dbo.NumberPadding;
SQL - LEFT, RIGHT FUNCTIONS

SQL – LEFT, RIGHT FUNCTIONS

 

 

Just Learned: Self-XSS

0

Have you ever tried chrome inspector with Facebook? If so, I am sure you have seen this. This warning message is to help prevent Self-XSS scams.

Facebook-Self-XSS-Warning

Self-XSS

Self-XSS is a social engineering attack that is designed to gain control of your social media account. In a self-XSS attack, an attacker convinces a user to runs malicious code on the address bar of his/her web browser.

Following video covers both share-baiting (a pure social engineering attack) and self-XSS (a combination of social engineering and a browser vulnerability).

 

Addition Reference:

How to create formatted console.log message

https://developer.chrome.com/devtools/docs/console

console.log ("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

Formatted Crome Console

How Facebook disabled Chrome developer console earlier

http://stackoverflow.com/questions/21692646/how-does-facebook-disable-the-browsers-integrated-developer-tools/21692733#21692733

Automate PNG & JPG Image Optimization

0

Download Source Code

Introduction

If you are a web developer, you already know how important to reduce the image size by compressing the image. When you are checking the page speed using the tool like “Google PageSpeed Insight” or “Yahoo YSlow”, you can see how many bytes we can save by compressing the image.

Google:Page Speed

Images saved from programs like Fireworks can contain kilobytes of extra comments, and use too many colors, even though a reduction in the color palette may not perceptibly reduce image quality. Improperly optimized images can take up more space than they need to; for users on slow connections, it is especially important to keep image sizes to a minimum.

You should perform both basic and advanced optimization on all images. Basic optimization includes cropping unnecessary space, reducing the color depth to the lowest acceptable level, removing image comments, and saving the image to an appropriate format. You can perform basic optimization with any image editing program, such as GIMP.  Advanced optimization involves further (lossless) compression of JPEG and PNG files. You should see a benefit for any image file that can reduced by 25 bytes or more (less than this may not result in any appreciable performance gain). Optimize images  https://developers.google.com/speed/docs/best-practices/payload#CompressImages >

There are some online tools like “Yahoo Smush.it” use lossless compression techniques and reduce file size by removing the unnecessary bytes from the image. However, if you want to make it automate, how do you do that? Several standalone tools are available that perform lossless compression on JPEG and PNG files.

For JPG Google recommended using,

  • Jpegtran – available for both Windows and Linux and Mac
  • Jpegoptim – available only on Linux

For PNG Google recommended using,

Using the code

Here I wrote a windows batch file that recursively search the given folder and optimized the JPEG and PNG files.

  1. Download jpegtran, OptPNG and PNGOUT executable files. (Or download attached zip file all the necessary files already included)
  2. Create a folder “ImageOptimization” in your C:\ Drive. (You can change those name and folder location by editing the batch file content) and put above downloaded utility files there.
  3. Create a batch file “optimize.bat” within the folder and copy following code into it
    @echo none
    REM Optimizing JPEG with jpegtran
    forfiles /p %1 /s /m "*.jpg" /c "cmd /c  echo processing @path && D:\ImageOptimization\jpegtran.exe -optimize -progressive -copy none -outfile @path @path"
    REM Optimizing PNG with pngout
    forfiles /p %1 /s /m "*.png" /c "cmd /c  echo processing @path && D:\ImageOptimization\pngout.exe @path"
    REM Optimizing PNG with optipng
    rem forfiles /p %1 /s /m "*.png" /c "cmd /c  echo processing @path && D:\ImageOptimization\optipng.exe -force -o7 @path"
    pause
    

    Although I included both PNGOUT and OPTPNG in the script you no need to use both.

  4. Finally, you can execute the bat file by passing the image folder you wish to optimize
    optimize.bat “D:\image”

How it works

  • forfiles command – Select a file (or set of files) and execute a command on each file (Batch processing) Refer: http://ss64.com/nt/forfiles.html
  • %1 – accept the folder as a parameter. In above example, this equals to “D:\Image”

forfiles command find all the images in the given directory (recursively) and execute the optimizing executable by passing the image as a parameter to them (@path).

Try

  1. You can further improve by adding this batch command as a context menu command
    http://msdn.microsoft.com/en-us/library/windows/desktop/cc144169(v=vs.85).aspx
  2. Alternatively, even you can use a scheduler (e.g. Windows scheduler) to find the daily updated file and optimize them by slightly modifying the forfiles command with “/d” option.

Online tools for troubleshooting web, SQL, XML and JSON

0

Have you ever wanted to troubleshoot someone else web page that contains the combination of JavaScript, CSS and HTML? Have you ever wanted to troubleshoot someone else SQL query without entering to the SQL server? Here are some useful online tools that make your life easier.

Following tools provide an online debugging environment for HTML, CSS and JavaScript.

1. jsFiddle

jsFiddle is the most popular JavaScript sandbox. It provides instantly ready coding environment for you to begin experimenting in as soon as the page loads.

http://jsfiddle.net/

JS Fiddle

2. JS Bin

JS Bin is another JavaScript sandbox. The design of this app is quite minimal and allows you to focus on the code. By default, the page only shows the HTML and lives preview panes, but you can easily add JavaScript to that as well.

http://jsbin.com/

JS Bin

3. CSSDesk

CSSDesk is a CSS sandbox that allows you to put your HTML and CSS codes there and view the preview instantly. It is very useful for testing out codes before implementing them in your website permanently.

http://cssdesk.com/

CSS Desk

4. CodePen

CodePen is an app for sharing and playing around with front end code. It’s a site for building stuff from HTML, CSS and JavaScript.

http://codepen.io/pen/

Code Pen

Following tool can use for easy online testing and sharing of database problems and solutions.

1. SQL Fiddle

SQL Fiddle is a tool for easy online testing and sharing of database problems and their solutions. If you do not know SQL or basic database concepts, this site is not going to be very useful to you. However, if you are a database developer, there are a few different use-cases of SQL Fiddle intended for you:

  • You want help with a tricky query, and you’d like to post a question to a Q/A site
  • You want to compare and contrast SQL statements in different database back-ends
  • You do not have a particular database platform readily available, but you would like to see what a given query would look like in that environment

http://sqlfiddle.com/

SQL Fiddle

Following tools act as sandbox environment for JSON,  XML development, including (E)XSLT, XML validation (DTD, schema, RelaxNG) and XQuery.

1. XMLPlayground

XMLPlayground is a sandbox environment for XML development, including (E)XSLT, XML validation (DTD, schema, RelaxNG) and XQuery. It has five development panels into which you can either insert or upload code:

  • XML – your source XML. You can render it as a node tree via the ‘tree’ tab.
  • (E)XSLT – transform your XML with XSLT (1.0). EXSLT an XSL includes are supported.
  • Validation – validate your XML with Schema, DTD or RelaxNG.
  • CSS – style your output
  • XQuery – query or transform your XML with XQuery code (via XQIB)

http://xmlplayground.com/

XML Playground

2. JSON Fiddle

With JSON Fiddle, simulating and posting JSON in Fiddler is just as easy.

http://jsonfiddle.net

json fiddle

Configure Entity Tags (ETags)

0

If you have ever used the YSlow (http://developer.yahoo.com/yslow/) to analyze the web page to improve the performance, you may have experienced with “Configure ETags” alert.

YSlow Analyse

What is Entity Tags (ETags)

Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser’s cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server. (http://developer.yahoo.com/performance/rules.html#etags)

“Configure ETags” is a recommended best practices for speeding up the website. If you are an ASP.NET developer, you can configure this by adding following code to the web.config file.

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <clear/>
      <add name="ETag" value=" "/>
    </customHeaders>
  </httpProtocol>
</system.webServer>