Well, in order to reduce the amount of work, you might be using quite a bit of 'ng-repeat' in your views/html files that uses angularJS. However, there might be a need to style the individual items differently. Therefore...
There might be situations that you might be opening up a png file that was created by someone else and you have to edit it. So here's the question, how can you workaround the problem?
 |
| You have a png like the above. |
 |
|
Outcome when you open it using Photoshop. There's a strange black border around the image. |
| So here's a workaround for it. First click here to open up 'Photo editor online - Pixlr.com'. Reopen and save the image as a new file. |
 |
| This would be the new file that I have created using "Pixlr.com". |
|
|
Now, when you open it using Photoshop, you won't be getting anymore unnecessary black color border. :D Case closed. Happy Days... |
Well, though you might not be doing this frequently, but there might be instance where you might need to scan through the whole network looking for the IP Address of a particular device.
|
I have tried entering the command 'arp -a' in command prompt, but the results ain't as good as the following... |
 |
|
(Logo taken from 'SoftPerfect Research' website.) 'SoftPerfect Network Scanner' As compared to the command 'arp -a', this produces a much more detail results and though there's the troublesome step that requires you to enter the range of ip that you are scanning, but the results are far more cleaner and better than the 'arp -a' command. :) |
 |  |
 |  |
| Screengrabs of the software 'SoftPerfect Network Scanner' | |
In case you are given an Angular JS based project and you are supposed to do some debugging work, here's a way to get you started with some simple message logging.
The Flex Spark Image component has this interesting property known as 'FillMode' and this should give you a rough idea what each individual type of 'FillMOde' represents.
Source Code for the main application - 'SimpleImageFillMode.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%"
height="100%"
backgroundColor="#CDCDCD">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Embed(source="assets/avatar.png")]
[Bindable]
public var imgClass:Class;
]]>
</fx:Script>
<s:VGroup width="100%"
height="100%"
horizontalAlign="center"
verticalAlign="middle">
<s:HGroup horizontalAlign="center"
verticalAlign="middle">
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Label text="Original Image"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="450">
<s:Image source="{imgClass}"
width="100"
height="100"/>
</s:HGroup>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle">
<s:HGroup width="150"/>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Label text="Fill Mode: clip"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Label text="Fill Mode: repeat"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Label text="Fill Mode: scale"/>
</s:HGroup>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle">
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Label text="Size (80 * 80)"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="80"
height="80"
fillMode="clip"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="80"
height="80"
fillMode="repeat"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="80"
height="80"
fillMode="scale"/>
</s:HGroup>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle">
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Label text="Size (100 * 150)"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="100"
height="150"
fillMode="clip"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="100"
height="150"
fillMode="repeat"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="100"
height="150"
fillMode="scale"/>
</s:HGroup>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle">
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Label text="Size (150 * 100)"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="150"
height="100"
fillMode="clip"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="150"
height="100"
fillMode="repeat"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="150"
height="100"
fillMode="scale"/>
</s:HGroup>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle">
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Label text="Size (150 * 150)"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="150"
height="150"
fillMode="clip"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="150"
height="150"
fillMode="repeat"/>
</s:HGroup>
<s:HGroup horizontalAlign="center"
verticalAlign="middle"
width="150">
<s:Image source="{imgClass}"
width="150"
height="150"
fillMode="scale"/>
</s:HGroup>
</s:HGroup>
</s:VGroup>
</s:Application>
* Click here for the demo shown in this post.In flex 4, the style 'boderSides' has been taken out, but there's another way to hide the border of a selected side of a box away. And here's a simple example to give you a rough idea on how to get it done. :)
Source Code for the main application - 'SimpleSelectedBorderExample.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="creationCompleteEvent(event)" xmlns:Container="Container.*">
<fx:Script>
<![CDATA[
import Container.SimpleGroup;
import mx.events.FlexEvent;
protected function creationCompleteEvent(e:FlexEvent):void
{
var tempBox:SimpleGroup;
for(var i:int = 0; i < 8; i ++){
for(var j:int = 0; j < 8; j ++){
tempBox = new SimpleGroup();
tempBox.x = i * 50 - 0.5;
tempBox.y = j * 50 - 0.5;
container.addElement(tempBox);
}
}
}
]]>
</fx:Script>
<s:BorderContainer width="100%"
height="100%"
borderVisible="false">
<s:layout>
<s:VerticalLayout verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<!-- All the boxes will appear inside this container -->
<s:BorderContainer width="400"
height="400"
id="container"
borderVisible="false"/>
</s:BorderContainer>
</s:Application>
Source Code for the Group Class that we are using to repeat the pattern - 'SimpleGroup.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="50"
height="50"
creationComplete="creationCompleteEvent(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
//Are we going to show the left border?
[Bindable]
private var _boolLeft:Boolean = false;
//Are we going to show the right border?
[Bindable]
private var _boolRight:Boolean = false;
//Are we going to show the top border?
[Bindable]
private var _boolTop:Boolean = false;
//Are we going to show the bottom border?
[Bindable]
private var _boolBottom:Boolean = false;
//-1 = border is outside the box
//-0.5 = border is in the middle
//0 = border is inside the box
[Bindable]
private var _typeValue:Number = 0;
//Thickness of the border
[Bindable]
private var _borderThickness:Number = 0;
//Color of the border
[Bindable]
private var _borderColor:uint = 0x333333;
protected function creationCompleteEvent(e:FlexEvent):void
{
//Randomized the showing and hiding of the borders
var rand:Number = Math.round(Math.random());
if(rand == 1){
_boolLeft = true;
}
rand = Math.round(Math.random());
if(rand == 1){
_boolRight = true;
}
rand = Math.round(Math.random());
if(rand == 1){
_boolTop = true;
}
rand = Math.round(Math.random());
if(rand == 1){
_boolBottom = true;
}
_typeValue = Math.round(Math.random() * 2);
if(_typeValue == 1){
_typeValue = -0.5;
}else if(_typeValue == 2){
_typeValue = -1;
}
_borderThickness = Math.round(Math.random() * 2) + 1;
_typeValue = _typeValue * _borderThickness;
}
]]>
</fx:Script>
<!-- Left -->
<s:Line left="{_typeValue}"
top="{_typeValue}"
bottom="{_typeValue}"
visible="{_boolLeft}">
<s:stroke>
<s:SolidColorStroke weight="{_borderThickness}"
color="{_borderColor}"/>
</s:stroke>
</s:Line>
<!-- Bottom -->
<s:Line left="{_typeValue}"
right="{_typeValue}"
bottom="{_typeValue}"
visible="{_boolBottom}">
<s:stroke>
<s:SolidColorStroke weight="{_borderThickness}"
color="{_borderColor}"/>
</s:stroke>
</s:Line>
<!-- Right -->
<s:Line right="{_typeValue}"
top="{_typeValue}"
bottom="{_typeValue}"
visible="{_boolRight}">
<s:stroke>
<s:SolidColorStroke weight="{_borderThickness}"
color="{_borderColor}"/>
</s:stroke>
</s:Line>
<!-- Top -->
<s:Line left="{_typeValue}"
right="{_typeValue}"
top="{_typeValue}"
visible="{_boolTop}">
<s:stroke>
<s:SolidColorStroke weight="{_borderThickness}"
color="{_borderColor}"/>
</s:stroke>
</s:Line>
</s:Group>
* Click here for the demo shown in this post.