Gorgo.Live.ToString()

Mariusz, Gorzoch tech Blog

Archive for the ‘Bez kategorii’ Category

Expression Tree Visualizer for Visual Studio 2013

leave a comment »

If you start digging into Linq and Expression Trees then to make your life easier you should use ExpressionTreeVisualizer tool. First it was released as part of samples to Visual Studio 2008. Lucky there is upgraded version of it available on github with works with Visual Studio 2013. You can reach it under below link: https://github.com/Feddas/ExpressionTreeVisualizer

Once you get it to your station, then grab “ExpressionTreeVisualizer.dll” and place it under the folder “C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Packages\Debugger\Visualizers”. Next restart your visual studio and if you start debugging your app you should get:

2014-10-22 21-23-54

Now you can analyze your expression tool in more easy way.

Advertisements

Written by Mariusz Gorzoch

22 October 2014 at 21:27

Posted in Bez kategorii

Tagged with ,

Injection in Jasmine with anuglar-mock.js

leave a comment »

So, you’ve build your angular app service and now you would like to test it. Testing simple service without dependencies is not big deal, but when it goes to test services with have some dependencies then it is quite easy to get lost.

Let’s start with basic example, where our service is not depended on others:

http://jsfiddle.net/MariuszGorzoch/81o74pwq/2/

2014-10-06 11-41-00

above service didn’t have any dependencies, so let’s upgrade it:

http://jsfiddle.net/MariuszGorzoch/81o74pwq/5/

2014-10-06 11-40-23

as you can see above in order to inject dependency in our service we need to use $provide.value(‘{serviceWithAreTryingToMock}’, {MockImplementation}); Thanks to that we can mock whatever service we want.

Written by Mariusz Gorzoch

6 October 2014 at 11:49

Posted in Bez kategorii

Tagged with , ,

C# extensions method by JavaScript

leave a comment »

Not so many people are aware that extensions method are possible to implemented also on JavaScript code. Here you have quick example how to achieve that:

1. Let’s create class definition

function MyClass(imput){
this.myProperty = input;
}

2. Let’s create object of our class

var myObject = new MyClass('test');

3. Now, we are ready to add first extension method to our MyClass definition

MyClass.prototype.PrintMe = function() { console.log(this.myProperty); }
myObject.PrintMe() //Prints "test"

4. That was easy, but we can go even further and add additional method to all existing objects, by simply extending “Object” class

Object.prototype.PrintMeSuper = function() { console.log("super print!"); }
myObject.PrintMeSuper(); //Print "super print!"

JavaScript can be fun, 😉

Written by Mariusz Gorzoch

23 August 2014 at 15:06

Posted in Bez kategorii

Chrome Omnibox -> how to show URL

leave a comment »

In recent release of chrome Google introduce hiding of URL from OmniBox (URL address bar).

Google Chrome Canary Omnibox

If you annoyed by this like me then there is simple solution for that. Simply go to that page:

chrome://flags/#origin-chip-in-omnibox

and disable it.

More details can be found under fallowing post from Google forum

Written by Mariusz Gorzoch

21 August 2014 at 11:19

Posted in Bez kategorii

React.js

leave a comment »

React.js is a Facebook client-side engine to build custom components for your web site application. It is meant to be a declarative framework, so it focuses on transforming data into interface components.

React’s top features:

  • speed
  • declarative binding
  • composability.

Hello World
When working with new framework, then there is no better way to start then by trying simple hello world example. Before start please ensure that you reference react library inside your HTML page (you can download it from the project site or directly link that url: http://fb.me/react-0.11.1.js)

1: /** @jsx React.DOM */
2: var Hello = React.createClass({
3: render: function() {
4: return <div>Hello <b>{this.props.name}</b></div>;
5: }
6: });
7: React.renderComponent(<Hello name=”World” />, document.body);

line 1: this tells the browser that we will use jsx features
line 2: we declare our react component
line 3: minimum requirements for new react component is to implement “render” function
line 4: jsx statment. It get compiled before run time.
line 7: call react engine to render “Hello” component into DOM element pointed by second argument.

Rendering a component means linking it to a DOM element and populating that DOM element. Current content of the DOM element get replaced.

Components can inherit other components.
Below you can see our above example modified to explain that scenario:

1 : /** @jsx React.DOM */
2 : var Inner = React.createClass({
3 : render : function() {
4 : return <div>Message from inner commponent</div>
5 : }
6 : });
7 : var Hello = React.createClass({
8 : render: function() {
9 : return <div>Hello <b>{this.props.name}</b><br/><Inner/></div>;
10: }
11: });
12: React.renderComponent(<Hello name=”World” />, document.body);

Output:

Hello World
Message from inner commponent

Working with arrays.
Below you can find simple example how to use “map” function, with quite usefully when it comes to nesting components:

1 : /** @jsx React.DOM */
2 : var Post = React.createClass({
3 : render : function() {
4 : return <p><i>{this.props.post}</i></p>
5 : }
6 : });
7 : var Blog = React.createClass({
8 : render: function() {
9 : return <div>
10: Blog name = <b>{this.props.name}</b><br/>
11: {this.props.posts.map(function(p) {
12: return <Post post={p}/>
13: })}
14: </div>;
15: }
16: });
17: React.renderComponent(<Blog name=”Gorgo.Live.ToString()” posts={[‘post1-1’, ‘post1-2’, ‘post1-3’]} />, document.body);

In response we get:

Blog name = Gorgo.Live.ToString()
post1-1
post1-2
post1-3

State

Each component can have his own state. Once state of component change then it generated DOM is updated by regenerating it again.
Here is simple example of it usage:

1 : /** @jsx React.DOM */
2 : var Counter = React.createClass({
3 : getInitialState: function () {
4 : var state = {c : 1};
5 : setInterval(function() {
6 : this.setState({c : this.state.c +1});
7 : }.bind(this),1000);
8 : return state;
9 : },
10: render: function() {
11: return <div>Counter = {this.state.c}</div>;
12: }
13: });
14: React.renderComponent(<Counter/>, document.body);

That give us output as below:

Counter = 1

and that is updated every 1 second.

Above are the basics of React.js, but I believe it is good start or at least it can speed you up if you would like to try it quickly in your project.

More about React.js can be found on their offical web site: http://facebook.github.io/react . I’ve also recomend good course on Pluralsight : React-fundamentals

Written by Mariusz Gorzoch

28 July 2014 at 14:19

Posted in Bez kategorii

Tagged with

Code review lesson learned

leave a comment »

So, you’ve been coding for a while and now someone ask you to review his code. In that post I would like to share few tips what I believe the code review is about. Let’s get started:

  1. Code review is about small incremental improvements
    When doing code review we should not perform detail analyze of everything we got, but instead we should focus on one area (200-400 lines) and just post 1, max 2 improvements to the existing code. The idea is to improve someone else code by small incremental steps. Better to focus on one think, discuss that and workout the best approach then spend a lot of time verifying entire change and trying to discuss number of improvements. Code review should be done ideally before each check-in of the code and shouldn’t be time consuming. The power of it lays in repeating that process over and over again and improving our coding standards slowly.
  2. This is not about blaming, showing you are better
    Code review process is about improvement and learning from each other. What team has to heavily avoid is trying to show up, point someone else mistakes or use it as kind of verification process how good developers are. If you go that path then you can be sure that this is the shortest way to kill all goodness around code review process.
  3. It is not only about skills
    Some people tend to assign only skilled developers to do code review and do not let all junior developers to be a reviewer. I would say this is really bad practice. Code review should be done by all team members and I believe that junior developers can also bring a lot of good ideas. Junior developers do not have years of practice of coding and by this they can find bright and simple solution to complex problems and by this simplify our code.
  4. What about communication
    Doing code reviews I found that it also improve communication as it give opportunities for team members to discuss different approaches they use to solve problems. On the daily bases developers tend to stick to their computers and do not talk too much. They rather get assigned to tasks and once they figure out how they want to code it then they start and do the typing part. Code review process force them to start talking with other team members about how they solve particular problems and why they did that this way. That is a great opportunity to improve communication in the team and that in my opinion is one of the critical factors in successful projects.
  5. Share and promote good solution
    When reviewing someone code we often find brilliant solution and I believe we shouldn’t just go by, but instead we should let the author know about that or even share this with rest of the team. We all want to be seen and shy – let’s promote that and the good will come back to us at some point too. That improve team morale and make us all eager to improve even more.
  6. Meet from time to time and sum-up all findings 
    When doing that ensure that things you will discuss will not be personal and will not insult any particular team member. Remember code review is about improving and not blaming. There is thin line between two and you don’t want to cross it. What to pick-up for those meetings : best things are common mistakes share by all team members or you can just have a discussion how to improve your code readability. Make a note from that meeting, share with everyone and this could be a good starting point for your next review.
  7. Simplicity is the key
    Often people ask me : how should I decide if something is a good solution to a problem or not. My answer is : maintenance/simplicity. The solution you are building is going to last for a while and for sure you as a team will have to maintain it for a while. In that case good readability and simplicity are key factors to ensure you have easily maintainable code. So, next time you are not sure then ask yourself a question: will I understand that code 6 months from now ?
  8. Never go too emotional
    Never become to emotional about the code you are reviewing. Everyone of us make mistakes or have bad practices. That is something we get as humans by default. When looking at someone code we should focus on how we can help that particular person to be better, to improve. If we switch to blame mode, then you can be sure that author of the code will go deference and will not take any lesson from you. This will make your time wasted and come on = we have just one life to live
  9. Don’t focus on how you will design it 
    You need to keep in mind that you are reviewer of the code and not someone who solve that problem from the scratches. That in particular is really hard to learn. Focus on design of the code, not particular solution and the way you will do it.

Those above points in my believe are key factors to ensure that code review process can work for you and your team. If you find some time then I strongly recommend to watch “Lessons from Real World .NET Code Reviews” course done by @Shawn Wildermuth on @Pluralsight.

Written by Mariusz Gorzoch

25 July 2014 at 12:27

Posted in Bez kategorii

Metro UI Multibinding

leave a comment »

Recently I came to a problem when I had to pass more then one parameter to the command (textbox control and two string configuration values). That can be achieve in WPF quite easily thru “MultiBinding” (more about that can be found under below URL: http://stackoverflow.com/questions/1350598/passing-two-command-parameters-using-a-wpf-binding). Unfortunately that approach is not available in Metro.

As I need that quite much, then I start trying with different options and found below one working quite fine. The idea is to use “Converter” and “ConverterParameter” attribute and pass thru it additional parameters in form of a string. Doing that and merging those two string parameters with original parameter pass thru CommandParameter into one array I manage to pack all parameters and pass them to OnExecute method of the command.

Below you can find example of button declaration with use that approach:

<Button Command="{Binding ShowWindow}"
        CommandParameter="{Binding ElementName=TextControl01,
            Converter={StaticResource InjectParametersConverter},
            ConverterParameter=’Param1Value|Param2Value’}"
        Content="Show phrases"></
Button>

<TextBox x:Name="TextControl01"/>

To make above work we need converter “InjectParametersConverter”:

public class InjectDefintion
{
    public TextBox TextControl { get; set; }
    public string Parameter1 { get; set; }
    public string Parameter2 { get; set; }
}

public class InjectParametersConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var parameters = ((string) parameter).Split(‘|’);
        return new InjectDefintion()
               {
                   TextControl = (TextBox) value,
                   Parameter1 = parameters[0],
                   Parameter2 = parameters[1]
               };
    }

}

and then in the OnExecute for command “ShowWindow” use paramters “InjectDefinition” to extract all parameters:

public RelayCommand<InjectDefintion> ShowWindow { get; private set; }
private void OnShowWindow(InjectDefintion paraemters)
{

                   TextControl = (TextBox) value,
                   Parameter1 = parameters[0],
                   Parameter2 = parameters[1]

}

that should give you option to pass additional parameters.

Written by Mariusz Gorzoch

21 July 2014 at 11:57

Posted in Bez kategorii