out parameter improvements in C# 7

Taswar Bhatti June 11, 2020 No Comments

In C#7 there is an improvement on using out parameter. Some of you may remember writing code like below.

string hourString = "5";

int hour;
if (int.TryParse(hourString, out hour))
{
  Console.WriteLine($"The hour is {hour}");
}

1

2

3

4

5

6

7

string hourString = "5";

int hour;

if (int.TryParse(hourString, out hour))

{

Console.WriteLine($"The hour is {hour}");

}

The improvement that C#7 brings is you can now declare out variables in the argument list of a method call, rather than writing a separate declaration statement like below:

string hourString = "5";

if (int.TryParse(hourString, out int hour))
{
  Console.WriteLine($"The hour is {hour}");
}

1

2

3

4

5

6

string hourString = "5";

if (int.TryParse(hourString, out int hour))

{

Console.WriteLine($"The hour is {hour}");

}

And it doesn’t end there we can also use the var keyword if we choose to.

string hourString = "5";

if (int.TryParse(hourString, out var hour))
{
  Console.WriteLine($"The hour is {hour}");
}

1

2

3

4

5

6

string hourString = "5";

if (int.TryParse(hourString, out var hour))

{

Console.WriteLine($"The hour is {hour}");

}

Summary

What are the benefits of this out parameter, well it does make the code is easier to read. You are not declaring it where you use it. Not to mention you don’t need to initialize the variable either.

.NET, C#

csharp, dotnet

Local functions in C#

Taswar Bhatti June 4, 2020 No Comments

In C# 7 there the new feature called Local functions in C#. Basically Local functions allow one to write a function within the body of another method or function. It comes in handly in the case lets say you are creating a helper function that are mostly just used in one class or where the declaration makes the code clear of the intention. Local functions also come in handly to write recursive functions rather than using a Lambda for it.

Here are some places where you can use local functions.

Methods, especially iterator methods and async methods
Constructors
Property accessors
Event accessors
Anonymous methods
Lambda expressions
Finalizers
Other local functions

Below is an example where I Anonymize a string of emails, you can see that I am actually calling the local function below the return statement. Therefore where you can declare a local function below a return statement and also the Pattern variable is available inside the local function, since it is within its scope.

using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;

namespace Mask
{
    class Program
    {
        static void Main(string[] args)
        {         
            Console.WriteLine(string.Join(",", AnonymizeEmail()));
            //output will look like this
            //p***r@a**.com,t****r@g****.com

        }

        private static IEnumerable<string> AnonymizeEmail()
        {
            var emails = new List<string> { "peter@abc.com", "taswar@gmail.com"};

            const string PATTERN = @"(?<=[\w]{1})[\w-\._\+%\\]*(?=[\w]{1}@)|(?<=@[\w]{1})[\w-_\+%]*(?=\.)";

            var result = new List<string>();
            foreach(var email in emails)
            {
                result.Add(MaskEmail(email));
            }

            return result;

            string MaskEmail(string s)
            {
                if (!s.Contains("@"))
                    return new String('*', s.Length);
                if (s.Split('@')[0].Length < 4)
                    return @"*@*.*";
                return Regex.Replace(s, PATTERN, m => new string('*', m.Length));
            }                    
        }
    }    
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

using System;

using System.Collections.Generic;

using System.Text.RegularExpressions;

namespace Mask

{

class Program

{

static void Main(string[] args)

{

Console.WriteLine(string.Join(",", AnonymizeEmail()));

//output will look like this

//p***r@a**.com,t****r@g****.com

}

private static IEnumerable<string> AnonymizeEmail()

{

var emails = new List<string> { "peter@abc.com", "taswar@gmail.com"};

const string PATTERN = @"(?<=[\w]{1})[\w-\._\+%\\]*(?=[\w]{1}@)|(?<=@[\w]{1})[\w-_\+%]*(?=\.)";

var result = new List<string>();

foreach(var email in emails)

{

result.Add(MaskEmail(email));

}

return result;

string MaskEmail(string s)

{

if (!s.Contains("@"))

return new String('*', s.Length);

if (s.Split('@')[0].Length < 4)

return @"*@*.*";

return Regex.Replace(s, PATTERN, m => new string('*', m.Length));

}

If you wish to read more on local functions take a look at the Microsoft documentation of local functions.

.NET, C#

csharp, dotnet

Expression Bodied Accessors in C#

Taswar Bhatti May 28, 2020 No Comments

In C# 7 there are Expression Bodied Accessors which allows you to write getter and setters somewhat more functional way, somewhat lambda’ish. Let me show you an example. You may remember the old way of writing getter and setters like below.

Pre Expression Bodied Accessors Getter and Setter

public class Automobile 
{
  private string _brand;
  public string Brand 
  {
    get { return _brand; }
    set { _brand = value; }
  }
}

1

2

3

4

5

6

7

8

9

public class Automobile

{

private string _brand;

public string Brand

{

get { return _brand; }

set { _brand = value; }

}

Expression Bodied Accessors in C# 7

When using C# 7 you can use Expression Bodied Accessors like below which makes the code wayyyyy cleaner in my opinion. As you can see below, I have also added the null exception into the setter.

public class Automobile 
{
  private string _brand;
  public string Brand 
  {
    get => _brand;
    set => _brand = value ?? throw new ArgumentNullException("value")
  }
}

1

2

3

4

5

6

7

8

9

public class Automobile

{

private string _brand;

public string Brand

{

get => _brand;

set => _brand = value ?? throw new ArgumentNullException("value")

}

Summary

I hope I have explained how Expression Bodied Accessors can make your code way cleaner and easier to understand, not to mention that you can include exception into the setter since Exceptions are also Expression now. If you wish to learn more you can also visit Microsoft Learn Site on Express Bodied Accessors. Btw you can also use the Expression Accessors for Constructors and Destructors.

.NET, C#

csharp, dotnet

Digit Separators and Binary Literals in C#

Taswar Bhatti May 20, 2020 No Comments

In C#7 there are Digit Separators and Binary Literals which were added. One may wonder what these are? Basically you can replace long number values with underscore (_) such that code readability is improved.

Let me give you couple of examples of it to make it clear.

//old way of 
var myBigNumber = 12345678901234567890;

//new way with digital separators
var myBigNumberNewWay = 123_456_789_012_345_678_90;

1

2

3

4

5

//old way of

var myBigNumber = 12345678901234567890;

//new way with digital separators

var myBigNumberNewWay = 123_456_789_012_345_678_90;

Neat but it doesn’t end there you can also use it for Binary literals and Hex also, like the examples below, where they all are 2020 the year we all despise 🙂

var myInt = 2020;

var myBinary = 0b11_11_11_00_100;

var myHex = 0x7_E4;

1

2

3

4

5

var myInt = 2020;

var myBinary = 0b11_11_11_00_100;

var myHex = 0x7_E4;

Summary

I hope the C#7 Digital Separators and Binary Literals will give you a hand in writing more clear code 🙂

.NET, C#

csharp, dotnet

What is the advantage of using discards in C#?

Taswar Bhatti May 14, 2020 No Comments

So one may ask “What is the advantage of using discards in C#?”, and if you don’t know what discards are you can check out the MS C#7 Documentation about it.

Basically discards are variables in simple terms, and the declaration of the variable as a discard is by assigning it the underscore (_) as its name. Let’s look at an example of it using tuples. And if you want to know more about tuples look at my older post on tuples.

Example discard in C#

//GetUserName returns a tuple of firstname, lastname
var (firstname, _) = GetUserName(5);

1 2	//GetUserName returns a tuple of firstname, lastname var (firstname, _) = GetUserName(5);

As you can see above I have declare lastname as a discard, the advantage is that the lastname variable may not even be allocated any storage. Thus in a sense discards can reduce memory allocations, that is one of the main advantage of discards. Not to mention that it the intent of the code above clearer, readability wise and maintainability wise. There are other places you can use discards also.

Out parameters methods

The code below shows using discard in a TryParse method like below, where we use the out method for getting the value, but if we don’t really care about the value discards comes in handy here.

if(Int32.TryParse("1234", out _)) 
{
 //do something
}

1

2

3

4

if(Int32.TryParse("1234", out _))

{

//do something

}

Pattern Matching

One can also use discards in pattern matching in C#. In the below example I am using pattern matching to process a user where a user can be a student or partime student, and they both are process the same way for example.

switch (user)
{
    case Student _:
    case PartTimeStudent _:
        ProcessStudent(user);
        break;
}

1

2

3

4

5

6

7

switch (user)

{

case Student _:

case PartTimeStudent _:

ProcessStudent(user);

break;

}

Deconstruct method

In C# you can also use discards for deconstruct methods, where you use a method name Deconstruct with out parameters, let’s look at an example of it. It is another handy way to get data out of class, structures and get them into tuples.

public class Match 
{
    public string HomeTeamName { get; set; }
    public string AwayTeamName { get; set; }
    public int HomeTeamScore { get; set; }
    public int AwayTeamScore { get; set; }

    public void Deconstruct(out string homeTeamName, out string awayTeamName) 
    {
        homeTeamName = HomeTeamName;
        awayTeamName = HomeTeamName;
    }

    public void Deconstruct(out string homeTeamName, out string awayTeamName, out int homeTeamScore, out in awayTeamScore)
    {
        homeTeamName = HomeTeamName;
        awayTeamName = HomeTeamName;
        homeTeamScore = HomeTeamScore;
        awayTeamScore = AwayTeamScore;
    }
}

var match = new Match { HomeTeamName = "Ravens", AwayTeamName ="Bulls", HomeTeamScore = 0, AwayTeamScore = 1 };

//get the home and away team name only
var (home, away) = match;

//using discards
var (homeName, _, homeScore, _) = match;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

public class Match

{

public string HomeTeamName { get; set; }

public string AwayTeamName { get; set; }

public int HomeTeamScore { get; set; }

public int AwayTeamScore { get; set; }

public void Deconstruct(out string homeTeamName, out string awayTeamName)

{

homeTeamName = HomeTeamName;

awayTeamName = HomeTeamName;

}

public void Deconstruct(out string homeTeamName, out string awayTeamName, out int homeTeamScore, out in awayTeamScore)

{

homeTeamName = HomeTeamName;

awayTeamName = HomeTeamName;

homeTeamScore = HomeTeamScore;

awayTeamScore = AwayTeamScore;

}

var match = new Match { HomeTeamName = "Ravens", AwayTeamName ="Bulls", HomeTeamScore = 0, AwayTeamScore = 1 };

//get the home and away team name only

var (home, away) = match;

//using discards

var (homeName, _, homeScore, _) = match;

Summary

I hope this helps in explaining where you can see potentials of using discards in C#, it is a way of intentionally not wanting a variable, the plus side of it, allows one to read the code more clearly.

.NET, C#

C#, csharp, dotnet

C# what is the difference between ValueTuple and Tuple

Taswar Bhatti May 6, 2020 No Comments

Some may wonder what is the difference between ValueTuple and Tuple that was released in C# 7, and you might say I have been using Tuples for a while now. Whats the difference? Some of you will remember with code like below that showcase the use of ValueTuple since .NET Framework 4.7

public Tuple<string, string> GetUserName(int userid)
{
    var firstname = db.GetFirstname(userid);
    var lastname = db.GetLastname(userid);

    return new Tuple(firstname, lastname);
}

1

2

3

4

5

6

7

public Tuple<string, string> GetUserName(int userid)

{

var firstname = db.GetFirstname(userid);

var lastname = db.GetLastname(userid);

return new Tuple(firstname, lastname);

}

In order to use this, you will use the data members, such as Item1, Item2, etc., which are fields rather than properties. So in your code it will look something like below. As you can see it pretty ugly and which one is firstname and which one is lastname? You will have to guess was it Item1 or Item2?

var username = GetUserName(5);

Console.WriteLine($"{username.Item1} {username.Item2}");

1

2

3

var username = GetUserName(5);

Console.WriteLine($"{username.Item1} {username.Item2}");

Main differences

The main difference between Tuple and ValueTuple are:

System.ValueTuple are structures (value types) rather than classes (reference types). This is meaningful when talking about allocations and Garbage Collection pressure.
System.ValueTuple are mutable rather than read-only. That is, the value of tuple components can change.
System.ValueTuple exposes data members, such as Item1, Item2, etc., are fields rather than properties.

Lets try to use the same example and use System.Tuple rather and see how our code changes.

public (string firstname, string lastname) GetUserName(int userid)
{
    return (firstname: db.GetFirstname(userid), lastname: db.GetLastname(userid););
}

1

2

3

4

public (string firstname, string lastname) GetUserName(int userid)

{

return (firstname: db.GetFirstname(userid), lastname: db.GetLastname(userid););

}

In the above code you can see it’s shorter and clearer of the intention of the code and when we try to consume this code like below we can use the labels rather.

var username = GetUserName(5);

Console.WriteLine($"{username.Firstname} {username.Lastname}");

//Alternatively 
var (firstname, lastname) = GetUserName(5);
Console.WriteLine($"{firstname} {lastname}");

1

2

3

4

5

6

7

var username = GetUserName(5);

Console.WriteLine($"{username.Firstname} {username.Lastname}");

//Alternatively

var (firstname, lastname) = GetUserName(5);

Console.WriteLine($"{firstname} {lastname}");

Summary

Hope you learned something new today and start using the new syntactic sugar that C# 7 provides, and if you are doing machine learning you will also feel the benefit of C# Tuples. More on machine learning in later blog post 🙂

.NET, C#

.net, csharp, tuples

How to ask Gatsby to request data from GraphQL

Taswar Bhatti May 4, 2020 No Comments

As we have got to know that Gatsby has built in GraphQL, we will learn this time how to ask Gatsby to request data from GraphQL. We will ask for the data that we wish to populate into our blog. For simplicity sake we will only target on the title and tagline. Eventually we will dive deep into into it later when we talk about plugins.

First we need to modify our gatsby-config.js file and add sitemap information into it. Below you will see that I have added a tag called SiteMetadata and inside the json object it contains title and tagline.

module.exports = {  
  siteMetadata: {
      title: 'Taswar Bhatti',
      tagline: 'The synonyms of software simplicity'
  },
  /* Your site config here */
  plugins: [],
}

1

2

3

4

5

6

7

8

module.exports = {

siteMetadata: {

title: 'Taswar Bhatti',

tagline: 'The synonyms of software simplicity'

},

/* Your site config here */

plugins: [],

}

If we wish to view this data we can go to our trusty graphql site that Gatsby has created for us (http://localhost:8000/___graphql). We can query the data in the query field like below and we will get back a json object with the information.

gatsby-graphq-query

How to get the data into our page

You are like great we have graphql but how do I get this data into my page? That is where graphql query inside our code comes in handy. Let open up our index.js that we have been working on and modify it to include graphql and we can also query it like the code below.

NOTE: Query only works in pages

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"


export default function Home({data}) {
  
  return (
    <Layout>
      <div className="content">Content goes here {data.site.siteMetadata.title}</div>
      <div className="sidebar">Sidebar goes here {data.site.siteMetadata.tagline}</div>
    </Layout>    
  )
}

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        tagline
      }
    }
  }
`

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

import React from "react"

import Layout from "../components/layout"

import { graphql } from "gatsby"

export default function Home({data}) {

return (

<div className="content">Content goes here {data.site.siteMetadata.title}</div>

<div className="sidebar">Sidebar goes here {data.site.siteMetadata.tagline}</div>

</Layout>

)

}

export const query = graphql`

query {

site {

siteMetadata {

title

tagline

}

`

NOTE: The single right tick quotes that encapsulates the query

We have also passed in {data} as a parameter into the Home function, we are able to print the data with the {} brackets. e.g {data.site.siteMetadata.title}, it is basically the same way we see the data in graphql UI.

How to share the data to components then?

One way to share data to component is to pass it down but then it becomes ugly quite soon, therefore there is actually another way to query data with components that is to use staticQuery, since page query are not supported in components. Let’s see that in action for our Layout component we made. Open the file components/layout.js

import React from "react"
import Header from "./header"
import Footer from "./footer"
import { useStaticQuery, graphql } from "gatsby"

const Layout = ({children}) => {
    const data = useStaticQuery(
        graphql`
          query {
            site {
              siteMetadata {
                title
                tagline
              }
            }
          }
        `
      )
return (
<div>
    <Header title={data.site.siteMetadata.title} tagline={data.site.siteMetadata.tagline} /> 
    {children}
    <Footer title={data.site.siteMetadata.title} tagline={data.site.siteMetadata.tagline} />   
</div>
)
}

export default Layout

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

import React from "react"

import Header from "./header"

import Footer from "./footer"

import { useStaticQuery, graphql } from "gatsby"

const Layout = ({children}) => {

const data = useStaticQuery(

graphql`

query {

site {

siteMetadata {

title

tagline

}

`

)

return (

<div>

{children}

</div>

)

}

export default Layout

As you have noticed I have imported useStaticQuery and graphql into my javascript. I have also declared a const variable called data and have used it to pass the data to my header component and footer component. Again you can use the same query inside of component the only difference is that you can see above is I have wrapped it around useStaticQuery.

Summary

We talked about using Query to get data from GraphQL for our Gatsby site, where Query are only allowed in pages. We also talked about how we can use staticQuery to get data inside our components. In our next section we will talk about using source plugin with GraphQL power to get data from local filesystems, such that we can eventually read our blog post.

Gatsby, VSCode

gatsby, vscode

Creating a layout in Gatsby with VSCode

Taswar Bhatti April 29, 2020 No Comments

We have our footer and header together and it’s time to talk about Layout. We can create a layout component in Gatsby such that our header and footer can be embedded/nested into any page you wish to have later on. Example our about, contact pages. This will allow us to clean up some of our page code.

Creating a layout in Gatsby with VSCode

We will create a component called component/layout.js inside the component folder. The code for layout is as below.

import React from "react"
import Header from "./header"
import Footer from "./footer"

const Layout = ({children}) => (
<div>
    <Header title="Taswar Bhatti" tagline="The synonyms of software simplicity" /> 
    {children}
    <Footer title="Taswar Bhatti" tagline="The synonyms of software simplicity" />   
</div>
)

export default Layout

1

2

3

4

5

6

7

8

9

10

11

12

13

import React from "react"

import Header from "./header"

import Footer from "./footer"

const Layout = ({children}) => (

<div>

{children}

</div>

)

export default Layout

Couple of things you may notice, we are taking something called children into the parameter of the Layout component. This is a way for us to embed/nest more html components inside the layout. If we look at our example pages/index.js page we will see everything that is declared inside out page will be translated into children for the layout page. Thus having a header and footer page for them also. We have embedded content and sidebar div into the layout, which will result in Header and Footer to wrap them around, with the code below.

import React from "react"
import Layout from "../components/layout"

export default function Home() {
  
  return (
    <Layout>
      <div className="content">Content goes here</div>
      <div className="sidebar">Sidebar goes here</div>
    </Layout>    
  )
}

1

2

3

4

5

6

7

8

9

10

11

12

import React from "react"

import Layout from "../components/layout"

export default function Home() {

return (

<div className="content">Content goes here</div>

<div className="sidebar">Sidebar goes here</div>

</Layout>

)

}

Now our page will look like the image below.

Header Footer with sidebar and content page

There are still couple of things to fix but we are getting there, and you may have notice that the data is being repeated in our layout. I think we can do better and Gatsby does allow us to do better with StaticQuery which we will cover next.

Summary

We talked about using layout component for our content so that we can use nested components for other pages. We have used the children parameter to pass in nested html components into our layout component so that we can embed other content into our page.

Gatsby, VSCode

gatsby, vscode

Creating a footer component in Gatsby with VSCode

Taswar Bhatti April 25, 2020 No Comments

Now that we have the header of the page, let’s try to focus on our footer. We will be creating a footer component in Gatsby with VSCode, we will skip the content and sidebar for the time being and get back to it later. Just like the header page we will create a new file called component > footer.js inside our component folder. We will again use css modules for our style called component > footer.module.css. Below is the code for the component > footer.js, as you can see it has clean html and I have removed a lot of redundant styles from wordpress.

import React from "react"
import { Link } from "gatsby"
import footerStyles from "./footer.module.css"

const Footer = (props) => (
    <div className={[footerStyles.footer, footerStyles.clearfix].join(" ")}>
		<div className={footerStyles.footerCopy}>
			<div className={footerStyles.menuFooterWrapper}>
				<div>
                    <ul className={footerStyles.menuFooter}>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/contact">Contact</Link></li>
                        <li><Link to="/about">About</Link></li>
                    </ul>
                </div>					
            </div>					
			<div className={footerStyles.clear}></div>
			<p className={footerStyles.copyright}>&copy; {(new Date().getFullYear())} <Link to="/">{props.title}</Link> | {props.tagline}</p>
		</div>				
		<div className={footerStyles.socialIcons}></div>
	</div>
)

export default Footer

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

import React from "react"

import { Link } from "gatsby"

import footerStyles from "./footer.module.css"

const Footer = (props) => (

<div>

<li><Link to="/contact">Contact</Link></li>

<li><Link to="/about">About</Link></li>

</ul>

</div>

<p className={footerStyles.copyright}>© {(new Date().getFullYear())} <Link to="/">{props.title}</Link> | {props.tagline}</p>

</div>

</div>

)

export default Footer

Something you may note above is I am just using plain vanilla Javascript for the year where I have used {(new Date().getFullYear())} to get the current year. One can embed Javascript objects with JSX also.

Below you will find my footer.module.css also included, I have changed some of the styles, they were using id in my wordpress blog and I have changed them to use class.

.clearfix {
    *display: inline-block;
    height: 1%;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.footer {
    width: 100%;
    margin: 0 -999px;
    padding: 30px 999px;
    display: block;
    overflow: hidden;
    background: #2f353e;
    box-shadow: rgba(0,0,0,.15) 0px 0px 5px;
    -moz-box-shadow: rgba(0,0,0,.15) 0px 0px 5px;
    -webkit-box-shadow: rgba(0,0,0,.15) 0px 0px 5px;
}
.footer-copy {
    float: left;
}
.menu-footer-wrapper {
    float: left;
}
.menu-footer {
    float: left;
    margin: 0;
}
.menu-footer li {
    float: left;
    margin: 0 20px 5px 0;
    display: inline;
}
.menu-footer-wrapper {
    float: left;
}
.copyright {
    float: left;
    margin: 0;
    position: relative;
    font-size: 12px;
    color: #a7b5c1;
}
.social-icons {
    float: right;
    margin-top: 5px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

.clearfix {

*display: inline-block;

height: 1%;

}

.clearfix:after {

content: "";

display: block;

clear: both;

visibility: hidden;

font-size: 0;

height: 0;

}

.clear {

clear: both;

display: block;

overflow: hidden;

visibility: hidden;

width: 0;

height: 0;

}

.footer {

width: 100%;

margin: 0 -999px;

padding: 30px 999px;

display: block;

overflow: hidden;

background: #2f353e;

box-shadow: rgba(0,0,0,.15) 0px 0px 5px;

-moz-box-shadow: rgba(0,0,0,.15) 0px 0px 5px;

-webkit-box-shadow: rgba(0,0,0,.15) 0px 0px 5px;

}

.footer-copy {

float: left;

}

.menu-footer-wrapper {

float: left;

}

.menu-footer {

float: left;

margin: 0;

}

.menu-footer li {

float: left;

margin: 0 20px 5px 0;

display: inline;

}

.menu-footer-wrapper {

float: left;

}

.copyright {

float: left;

margin: 0;

position: relative;

font-size: 12px;

color: #a7b5c1;

}

.social-icons {

float: right;

margin-top: 5px;

}

Now let’s try to edit our index.js file and include the footer in there also, when we try to just add the footer below Header tag we will see an error. Adjacent JSX elements must be wrapped in an enclosing tag.

import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"

export default function Home() {
  
  return (
    <Header title="Taswar Bhatti" tagline="The synonyms of software simplicity" /> 
    <Footer title="Taswar Bhatti" tagline="The synonyms of software simplicity" />    
  )
}

1

2

3

4

5

6

7

8

9

10

11

import React from "react"

import Header from "../components/header"

import Footer from "../components/footer"

export default function Home() {

return (

)

}

In order to mitigate the error we need to add empty tag <> and < / > which makes it pretty ugly, I think a better design will be to use a layout, so in the next section we will talk about how to use Layout and add our content and sidebar. See I told you we will get back to content and sidebar, just a bit later 🙂

Below you will find the fixed index.js file and also the screen shot of what we have so far, still far from done but at least we are getting there.

import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"

export default function Home() {
  
  return (
    <>
    <Header title="Taswar Bhatti" tagline="The synonyms of software simplicity" /> 
    <Footer title="Taswar Bhatti" tagline="The synonyms of software simplicity" />    
    </>
  )
}

1

2

3

4

5

6

7

8

9

10

11

12

13

import React from "react"

import Header from "../components/header"

import Footer from "../components/footer"

export default function Home() {

return (

<>

</>

)

}

header-footer-gatsby

Summary

We created our footer style by using the css module, our styling still requires some more work padding etc but we are slowly progressing and getting there. We will tackle the layout in our next section to make thing clean such that we can use the layout for about, contact etc pages and not repeat the tags everywhere.

Gatsby, VSCode

gatsby, vscode

Styling in Gatsby with VSCode

Taswar Bhatti April 16, 2020 No Comments

When it comes to styling in Gatsby, it allows one to style with css, less, scss, etc. I wanted to keep things simple for the time being and will use css and just copy what I have for the header in my blog to see how it will look like in Gatsby. It will be a way to find out the amount of work it will require for me to just create the header layout of my blog.

Getting started

Let’s choose a clean template of Gatsby without any pages etc. Gatsby provides us with the hello-world template which is the minimal template. We will start the template by executing the command below.

$gatsby new myblog https://github.com/gatsbyjs/gatsby-starter-hello-world
$cd myblog

1 2	$gatsby new myblog https://github.com/gatsbyjs/gatsby-starter-hello-world $cd myblog

Gatsby provides us with a way to create global styling by adding the style reference file into gatsby-broswer.js. Lets create a global.css file and add the html and body css styles. We will create a folder in src/styles and also create a file called global.css inside of it.

mkdir src/styles
touch src/styles/global.css

1 2	mkdir src/styles touch src/styles/global.css

Your folder will look like below in vscode.

gatsby-styles-global

Below is the content of global.css, I copied the html and body styles into this file from my blog.

html {
    margin-top: 32px !important;
    overflow-x: hidden;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
}

body {
    margin: 0 auto;
    color: #666;
    font: 14px/22px 'Open Sans',Georgia,serif;
    background: #f0f3f4;
    overflow-x: hidden;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

html {

margin-top: 32px !important;

overflow-x: hidden;

}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: 0 0;

}

body {

margin: 0 auto;

color: #666;

font: 14px/22px 'Open Sans',Georgia,serif;

background: #f0f3f4;

overflow-x: hidden;

}

Now we will need to add gatsby-browser.js file so that it can apply this style globally to our site. The file resides on the root folder where you will also find gatsby-config.js

touch gatsby-browser.js

1	touch gatsby-browser.js

We also need to edit the file to tell it where our global.css file is residing.

import "./src/styles/global.css"

1	import "./src/styles/global.css"

Now we will have the global style that we have applied to our site.

Gatsby component module styling

Gatsby allows us to use css modules out of the box. We will be using css modules for our header, we will create a header.js file inside of the src/components folder.

mkdir src/components
touch src/components/header.js

1 2	mkdir src/components touch src/components/header.js

I will now copy and paste my header source into the header.js file. Below I have replaced with Link and I am also passing in a prop into my function, so that I can use the data that will be passed in. I have also replaced the css class to use className rather.

import React from "react"
import { Link } from "gatsby"


const Header = (props) => (
    <div className="header-wrapper clearfix">
        <div className="logo-default">
            <div className="logo-text">
               <Link to="/">{props.title}</Link>                
		        <br />
		            <span>{props.tagline}</span>
		            </div>
	            </div>
		            				
				<div className="top-bar">			
		        	<div className="menu-wrap">
		            	<div className="menu-top-menu-container">
                            <ul id="menu-top-menu" className="main-nav">
                                <li id="menu-item-1565" className="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1565">
                                    <Link to="/">Home</Link>
                                </li>
                                <li id="menu-item-1563" className="menu-item menu-item-type-post_type menu-item-object-page menu-item-1563">
                                    <Link to="/contact">Contact</Link>
                                </li>
                                <li id="menu-item-1564" className="menu-item menu-item-type-post_type menu-item-object-page menu-item-1564">
                                    <Link to="/about">About</Link>
                                </li>
                            </ul>
                        </div>	
		            </div>
				</div>
			</div>
)

export default Header

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

import React from "react"

import { Link } from "gatsby"

const Header = (props) => (

<Link to="/">{props.title}</Link>

<br />

<span>{props.tagline}</span>

</div>

</li>

<Link to="/contact">Contact</Link>

</li>

<Link to="/about">About</Link>

</li>

</ul>

</div>

)

export default Header

As you can see there are a lot of css elements here and wordpress generates a lot of stuff by default. Not necessary clean html I guess.

Now let’s create our style for our header.js file, we will create a file called header.module.css inside the components folder.

.header-wrapper {
    width: 100%;
    margin: 0 -999px;
    padding: 25px 999px 30px;
    z-index: 100;
    background: #2f353e;
    position: relative;
    box-shadow: rgba(0,0,0,.15) 0px 0px 5px;
    -moz-box-shadow: rgba(0,0,0,.15) 0px 0px 5px;
    -webkit-box-shadow: rgba(0,0,0,.15) 0px 0px 5px;
}
.clearfix {
    *display: inline-block;
    height: 1%;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

.logo-default {
    float: left;
}

.logo-text {
    font-size: 28px;
    font-weight: 200;
    line-height: 30px;
    padding: 6px 0 0 15px;
}

.logo-text a {
    color: #5f5e5c;
    font-weight: 700;
    letter-spacing: -1px;
}

.logo-text span {
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    color: #888;
}

.main-nav .current-menu-item a {
    font-weight: 900;
    color: #b4c9dc;
}
.main-nav a:first-child {
    padding-left: 0;
}
.main-nav a {
    color: #8695a2;
    float: left;
    padding: 5px 25px;
    display: block;
    font-family: 'Open Sans',Georgia,serif;
    font-weight: 700;
    font-size: 13px;
}

.top-bar {
    float: right;
    margin: 13px 0 0;
}

.menu-wrap {
    float: right;
    position: relative;
}

.main-nav, .main-nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
}

.main-nav {
    float: left;
    position: relative;
    z-index: 999;
}
ol, ul {
    list-style: none;
}

.main-nav li {
    float: left;
    position: relative;
}

.main-nav>li {
    float: left;
    padding: 0;
    margin: 0;
    display: inline;
}
.main-nav .current-menu-item a {
    font-weight: 900;
    color: #b4c9dc;
}
.main-nav a:first-child {
    padding-left: 0;
}
.main-nav a {
    color: #8695a2;
    float: left;
    padding: 5px 25px;
    display: block;
    font-family: 'Open Sans',Georgia,serif;
    font-weight: 700;
    font-size: 13px;
}
a {
    color: #68aecf;
}
a {
    text-decoration: none;
    color: #68aecf;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

.header-wrapper {

width: 100%;

margin: 0 -999px;

padding: 25px 999px 30px;

z-index: 100;

background: #2f353e;

position: relative;

box-shadow: rgba(0,0,0,.15) 0px 0px 5px;

-moz-box-shadow: rgba(0,0,0,.15) 0px 0px 5px;

-webkit-box-shadow: rgba(0,0,0,.15) 0px 0px 5px;

}

.clearfix {

*display: inline-block;

height: 1%;

}

.clearfix:after {

content: "";

display: block;

clear: both;

visibility: hidden;

font-size: 0;

height: 0;

}

.logo-default {

float: left;

}

.logo-text {

font-size: 28px;

font-weight: 200;

line-height: 30px;

padding: 6px 0 0 15px;

}

.logo-text a {

color: #5f5e5c;

font-weight: 700;

letter-spacing: -1px;

}

.logo-text span {

font-size: 11px;

line-height: 16px;

font-weight: 400;

color: #888;

}

.main-nav .current-menu-item a {

font-weight: 900;

color: #b4c9dc;

}

.main-nav a:first-child {

padding-left: 0;

}

.main-nav a {

color: #8695a2;

float: left;

padding: 5px 25px;

display: block;

font-family: 'Open Sans',Georgia,serif;

font-weight: 700;

font-size: 13px;

}

.top-bar {

float: right;

margin: 13px 0 0;

}

.menu-wrap {

float: right;

position: relative;

}

.main-nav, .main-nav ul {

margin: 0;

padding: 0;

list-style-type: none;

list-style-position: outside;

position: relative;

}

.main-nav {

float: left;

position: relative;

z-index: 999;

}

ol, ul {

list-style: none;

}

.main-nav li {

float: left;

position: relative;

}

.main-nav>li {

float: left;

padding: 0;

margin: 0;

display: inline;

}

.main-nav .current-menu-item a {

font-weight: 900;

color: #b4c9dc;

}

.main-nav a:first-child {

padding-left: 0;

}

.main-nav a {

color: #8695a2;

float: left;

padding: 5px 25px;

display: block;

font-family: 'Open Sans',Georgia,serif;

font-weight: 700;

font-size: 13px;

}

a {

color: #68aecf;

}

a {

text-decoration: none;

color: #68aecf;

}

Now we need to modify our header.js file to use these css styles. By default I am using kebab-case for my css, and in our javacript code I can refer to the style by camel casing e.g main-nav becomes mainNav.

Below you will see the clean version of the header.js file where I imported the style and used it in the component.

import React from "react"
import { Link } from "gatsby"
import headerStyles from "./header.module.css"


const Header = (props) => (
    <div className={[headerStyles.headerWrapper, headerStyles.clearfix].join(" ")}>
        <div className={headerStyles.logoDefault}>
            <div className={headerStyles.logoText}>
               <Link to="/">{props.title}</Link>                
		        <br />
		            <span>{props.tagline}</span>
		            </div>
	            </div>
		            				
				<div className={headerStyles.topBar}>			
		        	<div className={headerStyles.menuWrap}>
		            	<div>
                            <ul className={headerStyles.mainNav}>
                                <li><Link to="/">Home</Link></li>
                                <li><Link to="/contact">Contact</Link></li>
                                <li><Link to="/about">About</Link></li>
                            </ul>
                        </div>
		            </div>
				</div>
			</div>
)

export default Header

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

import React from "react"

import { Link } from "gatsby"

import headerStyles from "./header.module.css"

const Header = (props) => (

<Link to="/">{props.title}</Link>

<br />

<span>{props.tagline}</span>

</div>

<div>

<li><Link to="/contact">Contact</Link></li>

<li><Link to="/about">About</Link></li>

</ul>

</div>

)

export default Header

You may see something funky above where I use join for two styles. In React you need to use an array and join it with two styles in order for it to have two styles in one component. One of the nice thing about using modules is that all the css styles will be unique to the site, so no conflict at all. e.g headerStyles.logoDefault will be converted by Gatsby to header-module–logo-default–1YbkP.

Launching the site

Finally we need to modify our src/pages/index.js and use our Header file inside of it. We will also pass in 2 properties into Header, the title and tagline of our blog.

import React from "react"
import Header from "../components/header"

export default function Home() {
  
  return (
    <Header title="Taswar Bhatti" tagline="The synonyms of software simplicity" />    
  )
}

1

2

3

4

5

6

7

8

9

import React from "react"

import Header from "../components/header"

export default function Home() {

return (

)

}

Finally lets launch the develop server and view how it looks like.

headerpage-from-gatsby

Summary

We covered styling using global styles and also how to use components modules css to style a component. How Gatsby will auto generate css unique code so that there are no conflicts between other components and styles. I hope you see that by default your code will be quite clean by gatsby. Next up we will try to cover more the body and footer for the blog.

Gatsby, VSCode

gatsby, vscode

out parameter improvements in C# 7

Summary

Local functions in C#

Expression Bodied Accessors in C#

Pre Expression Bodied Accessors Getter and Setter

Expression Bodied Accessors in C# 7

Summary

Digit Separators and Binary Literals in C#

Summary

What is the advantage of using discards in C#?

Example discard in C#

Out parameters methods

Pattern Matching

Deconstruct method

Summary

C# what is the difference between ValueTuple and Tuple

Main differences

Summary

How to ask Gatsby to request data from GraphQL

How to get the data into our page

How to share the data to components then?

Summary

Creating a layout in Gatsby with VSCode

Creating a layout in Gatsby with VSCode

Summary

Creating a footer component in Gatsby with VSCode

Summary

Styling in Gatsby with VSCode

Getting started

Gatsby component module styling

Launching the site

Summary

Opinions are my own and not the views of my employer

My Book

LinkedIn

Archives