DEV Community: Shubham Pandey

Setup different gitconfig based on Folder with SSH Config

Shubham Pandey — Sat, 07 Aug 2021 00:00:00 +0000

Recently, one of my PR got merged in React Core. I was over the moon to see it merged and I took a screenshot and shared it on social media. I was quite happy thinking my name would now show up in the contributors’ section in the GitHub repository of facebook/react. But here is the twist - it was not!

Normally the name shows up in GitHub if you have even one single PR. It got me thinking why wasn't my name on that list. I had configured the SSH correctly for work and private GitHub; then why would this happen?

I had to go back and figure out how GitHub shows the contribution chart.

My findings:

When you first install the git in your system, you have to provide two values to the local git - your name and your commit email. Then, when you commit anything in any git repository, it associates those two values with the commit. So, when I set up the git first time in the current system it was my work email. This meant all of the commits I did during the last six months were signed by my work email. And I thought I knew enough git to be dangerous!
Next thing I did was to search if we can use different emails for different projects. One solution was to setup an email for every folder, which is not practical if you clone git repos every now and then. Instead, I needed a generic workflow that could help me use different emails for different folders. I had already segregated folders for work and private so that would have been a more natural solution for the way I organize git repos in my system.
I have found a solution to this problem. Conditional Configuration was released to git back in 2017. For future me, I am writing this blog listing all the configurations I need when setting up git in a new machine.

Setting up SSH

Create a key from terminal

  ssh-keygen -t ed25519 -C "me@shubhampandey.in"

Add eval "$(ssh-agent -s)" to .zshrc
Adding Key to agent ssh-add -K ~/.ssh/id_ed25519
Create SSH config in ~/.ssh folder (example)

  Host *
      AddKeysToAgent yes
      UseKeychain yes
      IdentityFile ~/.ssh/personal
  Host bitbucket.org
      AddKeysToAgent yes
      UseKeychain yes
      IdentityFile ~/.ssh/workkey

Now add the keys to their respective git providers GitHub, bitbucket etc.

Setting up different git config based on Folder

In home folder you can add .gitconfig for different situations

  user]
      name = Shubham Pandey
      email = shubham.pandey@example.com       # default email if no config provided
      useConfigOnly = true
  [includeIf "gitdir:~/mysites/work/"]       # For Work folder
      path = ~/mysites/work/.gitconfig         # use this config file, you can define them in any folder
  [includeIf "gitdir:~/mysites/experiment/"] # For Personal folder
      path = ~/mysites/experiment/.gitconfig   # use this config file

Now create those two configs in their paths. (example for personal folder)

  [user]
      email = me@shubhampandey.in
      name = Shubham pandey

That's it. Now you have configured two different emails for two different folders, now I can commit in peace. Hopefully, my next PR to react comes sooner.

Google font and image performance

Shubham Pandey — Sat, 03 Oct 2020 00:00:00 +0000

I have recently revamped this blog. I was using Hugo earlier it is also a good framework for the blog but seeing all those "I'm using gatsby" tweets I also wanted to learn it and change my site too. Earlier I used a default theme available in gatsby theme store and started moving my content to it but I never succeded fully. After thinking and procrastinating on this for long finally I did it last Saturday(26 Sep).

I have customised the theme used by Sophia Li which is a variant of tania.dev's site. My gratitude to them for creating the theme and letting it used by anyone on the internet free of cost. I have also added some new flavours to it and will customize more in future.

Some changes I did today are related with some google perf issues. Last week my agenda was to push my blog to production as fast as I could, so I overlooked some aspects of performance which I am fixing this week.

Problems Identified

Large download size for a blog site
Render blocking issues by fonts

Solutions

Large Download size for a blog site

You can google page insights or lighthouse tool to check how fast your site loads in a slow network. When I checked it for this site it gave me a score of 96 with two warnings one of which was to reduce the size of the image which is about 437 KiB while the total size of the page was 564 KiB you can see it clearly in the image below.

Pagespeed

The image of mine on the landing page was 80% of the total size of all the assets. The solution was clear in my mind that was to convert the image to webP format(as was suggested by lighthouse and also by Surma in his various videos on youtube). So now the problem and its solution were in front of me, I had to just convert png image to webP but I did not knew how much I am going to save after changing the image to webP. I was hoping for at least a 50% reduction in file size.

I search on bing Convert png to webP. Clicked on the first result that came. Uploaded file and got the image output and the file size of the downloaded image file was 275 KiB, which was more than 40% reduction in size. I was not that impressed but yeah now I had the same file in almost half the size, I pushed it to production. I then remembered there is also a terminal command which converts images to webP which I guess that website was also be using in the background. So I just searched and got the command. I ran the command and I was surprised by the final size of the webP image after that for the same 400+ KiB png file. The new size was 21 KiB which is 5% of the size of the original image. That was an awe moment. I had heard a lot about the improvement on images by using webP but did not knew it is that good.

Anyway, If you are a web developer you must knew that compatibility between different browsers is still not that good. here the browser in question is Safari, after all these years it still doesn't have the webP support and will throw an error on webP images. I just used a hack there to use the old png image, which I reduced in size by changing the resolution. The hack I used here was to change back the src of the img tag back to the old image if there is an error. That way we not only can support safari but also the older IE browsers. Reference of the code below:

  const webpImage = useRef(null)

  const changeImageFromWebP = () => {
    const pngUrl = 'shubham9411.png'
    webpImage.current.src = pngUrl
  };
  render (
    <img
      src="shubham9411.webp"
      className={styles.headshot}
      alt="Photo of Shubham Pandey"
      ref={webpImage}
      onError={changeImageFromWebP}
    />
  )

Updated sizes:

Pagespeed

Render blocking issues by fonts

This was just a straight-up issue of fonts blocking the main thread and taking time to download fonts first and then loading the content after it. Render blocking for js is easier to fix as you just have to use async and defer according to the need. In the case of CSS, they are treated as render blocking resource by default.

But in my case the fonts are not that important to be loaded on the first view it can use swapping after loading at any time because there is no fancy font is being used. The hack I used here was to use the link attribute as preload and on onLoad change it back to stylesheet see below.

  const changePreload = event => {
    event.target.onload = null
    event.target.rel = 'stylesheet'
  }

  render (
    <>
      <link
        rel="preload"
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
        as="style"
        onLoad={changePreload}
      />
      <noscript>
        <link
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
          rel="stylesheet"
          type="text/css"
        />
      </noscript>
    </>
  )

You need that noscript tag to load normal font if javascript is not available.

So yeah that was it about the performance upgrades. After pushing new code to Github I checked the new score of the site from pagespeed insights. It was 99 this time with no extra warnings and the size of the site reduced to 116.6 KiB in total. So today's learning was to use webP wherever you can and if possible to automate using webP. The other was to watch out for the render blocking issues and try to fix them as much you can.

Need help in Integration testing ruby

Shubham Pandey — Wed, 01 Aug 2018 17:37:52 +0000

Hello DEV.to community!

I am a bit nervous to ask this question here. But I really need your help on this.
I am new to ruby and test driven development. I just wanted to know how you guys do Integration testing in your rails project. Integration test are too slow and sometime fails. I want to know how you guys do Integration testing in your projects and make them faster. Also how you manage to do testing for different screen sizes like mobile and tablets.

I am a beginner rubyist. If you can suggest any good platform/community to ask this ques please recommend that too. 😁

My experience on submitting First theme- Kafal to WordPress.org

Shubham Pandey — Fri, 01 Sep 2017 02:30:26 +0000

The post My experience on submitting First theme- Kafal to WordPress.org appeared first on Shubham Pandey' Blog.

In February I wrote a blog on Open Source and WordPress theme and decided that I will submit a theme to WordPress.org. And now I am back with another blog on my WordPress theme Kafal. It's a pleasure to inform you all the readers that my theme passed the review process and accepted in the WordPress.org repository. Theme 'Kafal' is now live and have been downloaded 1500+ times and currently active on 200+ blogs/websites. I am that much happy about it that every day at least 5 times I check the theme details in WP.org.

It was all started in February when I don't have much work besides my academics. At that time I was craving for the work. Then after a lot of research, I published the blog on Open Source and making a theme. At that time I was already a member of WordPress slack. I think slack is the best place to start your journey. In this blog, I'm going to share my experience, what I've learned during this period.

Coding Improvements

I started my HTML career with <!Doctype html>, which means started with HTML5 but never understand what the difference between the HTML 4 and HTML5. In this theme, I've used new semantic elements from HTML5 like header, header, footer, article, main, aside etc.

WordPress provides many APIs and I've used many of them. This time what was new for me is the Theme Customization API. Added live preview option for custom options like 'Header Color' and 'Blog Title & Tagline' etc. That's a cool API for designing good UX for theme users.

Previously while developing a theme I've never bothered on using escaping and sanitizing functions. If you check my first theme 'Makes me Wonder' that I've created in my second year, I've never used any escaping function. Or if I've used it then it must be a code that I've copied from SO or codex. But now whenever a code that involves DB or User inputs, the first thing that comes to my mind is escaping and sanitization of the data. Writing a poor code with less security can lead to an XSS attack to the site.

I have learnt much more things about the coding style, that I can't recall at this time but I will surely share them in future.

Theme Customization API and Bootswatch themes

Created theme repository named 'Solitude' and started working on it. I wanted it to be like the best of its type. And started designing the theme. I am a great fan of Bootswatch, as they provide cool themes for the Bootstrap. I wanted to create a theme that you can change the theme variant with these Bootswatch themes. So I downloaded different Bootswatch themes and integrated them into the theme with the Theme Customization API. You can change your bootstrap theme with the different variant of Bootstrap. But due to lack of design skills and other works, I stopped working on the theme 'Solitude'. This theme has more options but it lags in design and has a poor coding style. I will work in this theme maybe in future.

Using _s (underscores)

After 'Solitude' it was a leap of 2 months when I started again working on the theme. This time with more enthusiasm, more energy. But when it comes to writing the same code again just for scaffolding it's kind of a heavy task for me. So now this time what I did was, I forked '_s(underscores)' the starter theme created by Automattic for hacking. Created my own branch and started hacking the theme.

By the way, I'll not prefer using _s if you are just starting out in WordPress and don't know the basics.

Using basic testing methods & build tools

I wrote a blog on Integrating Travis CI with WordPress Theme. Using build tools and CI(continuous Integration) is must for the projects because a single human error can be a huge problem. So we teach machines to check our code and warn us about our mistakes. I've used Travis CI to test my theme, if it is passing the WordPress coding standards or not. There are also some plugins that can test your themes with the WordPress coding standards like 'Theme Check'. These tools will help is making a good theme with Coding Standards.

Various Open Source Licenses

When I first submitted my theme on 19th June(Trac ticket), the ticket closed 2 days after that on 21st June. That was a quick review by one of the theme reviewer team lead @poena. The theme got rejected because of having more than 5 different errors. The first and most important error was declaring the license of the theme.

I was aware that for uploading to WordPress.org the theme should have an open source license GPLv3 or compatible. But I haven't declared it. By saying theme I also mean the assets used in the theme like images, libraries etc. You can check the conversation over the ticket and check all the links she provided about theme development.

For learning about the licenses choosealicense.com is a good source.

Setting Realistic Deadlines

Without a deadline, a side project may become garbage because it will never be completed. What I learned is that setting a realistic deadline increases the productivity. Be it our assignments, project reports etc. Even we start studying just before the exams. Moving out from the comfort zone, doing the projects that you love & stop procrastination. I have also set a deadline for the theme and yes because of that I have a commit in git with 'Hackathon' (check the dates) !😛

Hackathon for Kafal

Everybody wants to help you just ask

I am not an active member in WordPress Slack but I often open it and read the conversation happened. I always learn something new every time I open it. The volunteers always try to give you the right piece of information even if you ask silly questions.

WordPress is a community that has lots of nice peoples always willing to share their knowledge. If you have any question just ask it and you will definitely get an answer. Want a demo, check the trac tickets 44111 and 44006. !😉

Patience

Yes, you read it right Patience. Patience after submitting my theme for the second time, a new ticket was assigned to me. Silence for 2 months. Nothing happened until my theme got on the top of the review. It needs a lot of patience to see your theme on the review queue.

On 8 August finally, @kafleg as a reviewer is assigned to my theme. This time it(theme) was having 3-4 small issues. So I finished working on them and updated new changes. After that, I was waiting for the reviewer's another reply on the theme. This time I the reply was this:

Theme set to live

That was an 'Aha' moment, I was like telling everybody that my theme got selected and check out the link and email. I am very happy to see my theme on WP.org.

Rivers know this: there is no hurry. We shall get there some day.”

–A.A. Milne, Winnie-the-Pooh

It sounds awesome when you think that lots of users are using your theme. The piece of code we have written is worth something. Giving back to the community, is it what is Open Source is all about?

Now the happiness is, seeing the badge of Theme Developer in My Profile.

Profile Shubham Pandey WordPress

Have any views about this, please let me know in the comment section.

Thanks!

First, solve problem Then, write code

Shubham Pandey — Tue, 28 Jun 2016 14:17:33 +0000

At starting of my developing journey when I used to code the HTML and CSS and create some static pages that look awesome (if you don’t compare them with other online websites). I used to experiment on the divisions and the architecture first without applying any style on it so that I just simply add the classes and id’s to it, it is like creating a frame that is just without any style just a normal frame.

So that I can create as many designs from it by just changing or adding the color in the class that I assigned to it. So that I can change the pages by only changing the CSS file. In the Tech Fest of my college “Kaivalya” I worked on my very first project for web. The task is just to make a front end for the website for the college Computer Science Club after making the front end you have to make a backend for it.

When I first see that task I was thinking about how I start building the website. So i just searched many of the websites and choose a website that is very simple in design. At that time I did not know any software principles and the designing aspects. I see the websites and if I like a feature so I added it to my website.

Without proper planning and design I created that website because it is a small project and if there any problem occur I can recreate it from scratch also, but what if I am going to work on bigger project and use this type of approach that I used to create my website then what’s gonna happen. Then the website is not manageable one of the example that when I am working on the WordPress theme creation for the first time I faced the problem in the sidebar that every time I change a bit CSS of main content the sidebar get exploded.

It is because I did not settled the width of the divisions of main and sidebar content but then I first created a diagram for that and defined that how much part of the screen it is going to be covered by the different containers. The theme has many other flaws but it is just the starting of my WordPress Journey.

Design is the creation of the plan, the solution to the problem, that it be like how one will see the problem in his aspect, everyone have a different solution. We just have to think in every direction. I am reading a book named Code Complete and in it an example is given with a topic “Design Is a Wicked Problem” it is about design of a Bridge named “Tacoma Narrows bridge“.

At that time when the Bridge was built the main focus of engineers is to give it a strength that it is strong enough to support the load. But due to the Aeroelastic Flutter of the wind and the bridge is not ready to handle the air of speed 68km/h so it get collapsed. A nearby photographer recorded a footage of it when this happened. This footage is still shown to engineering, architecture, and physics students as a cautionary tale.

But what is the moral of the story. In my opinion the moral is about the seeing the problem in every direction and generate your own test cases as if they were aware of the Aerodynamics thing they will make a design that the bridge can withstand in the high-speed of air also. And it be like Trial and error method that they created a bridge and it get collapsed only in 4 months of creation so that they find out about the aerodynamics of the bridge and created a new design for the next bridges so that it will never happen in future.

We have to learn from our previous errors and have to try new things. Cause design is not an algorithmic process it is heuristic in nature. One of the problem like this occurred with us that we three Nitin, Dhiraj and Me are working on a plugin for Hiring System for ColoredCow. The problem is that when we are said to create the plugin that displays the Vacancies available we think about in a way that it will be like a widget for the site that will show the vacancies in a carousel way.

So we created a widget but then after delivery we find out that what they want is other than this Widget thing they just wants a shortcode method that wherever they want to put that carousel they just have to add the shortcode. This is not a big deal but it will be like an example of not seeing the problem in different way or may be not seeing in the clients way of using the Software. Now we added that feature too.

For our college group for Web Development we created a task that is just to check the designing skills of the students. It is more like an experiment that how they react on the task and derive their answers.

The task is to create a website for a firm with a basic functionalities eg. Home page, About Page etc.. Everyone come up with different designs and some of them added the exact pages that we mentioned some used their creativity and added other features and pages to the website. It relates me to the topic of Managing complexity in the “Code Complete” that the webpages we mentioned are the basic requirement and are essential for a website. But the other accidental features are also demanded by any firm that he does not mention like in above example client may be think that we add the event and notice bar our self or anything.

It is depends on person to person how they design and the time factor or may be other factors also. First Solving the problem then starting the design phase will help more in coding phase then directly starting the code without the plan or Design. As the John Johnson said

First, solve the problem. Then, write the code.