Installing and Using This Chome Extension

All you need to do to use this extension is go to the Chrome Extension Store and search for “NextJS” or click on this URL.

You’ll now have a purple icon on your toolbar as shown above with the letter “N” in it. If you are on a page that is generated with Next.js (like my example page https://svcc.mobi, the next thing is to click on the “N” toolbar icon. Immediately, the size of the Next.js static window.__NEXT_DATA__ will be down (that’s the 384K shown in the above image). Just FYI, K means kilobytes, M means megabytes and b means bytes. If your page was not generated by a Next.js app, “n/a” will be shown for not applicable.

If you want to see the actual data, right mouse button on the toolbar icon and click the context menu choice “View NextJS Data”. That way, if your __NEXT_DATA__ is large, you can visually see where the problem is. Notice in my example, it’s 384K. That’s huge! What I need to do is go back to my application and reduce the size by downloading only the session data I need to display and not a lot of other data I don’t use.

First Page Download Problem With SPA’s

The Achilles heel of Single Page Apps (SPA’s) is that the first time a web page that is viewed, there is a long delay between when a the user lands on the page and the browser user sees any data. This problem is known as “the first page download problem”. You can read an authoritative post on this topic by Guillermo Raunch titled “7 Principles of Rich Web Applications – Server Rendered Pages Are Not Optional“.

To mitigate this problem in React, the most popular single page app (SPA) framework out there, written and used by Facebook, is to first run the app inside of the server before the response from the first request is made, and then download all that HTML on the first request. Since the JavaScript can all be run inside the server with Node.JS, and, React has built in support for doing that through a method named renderToString, this is easy, but with one caveat.

What happens if the web page you are rendering includes data that is asynchronously loaded on it such as data that is retrieved from an external service (like a REST service for example). Now, when the Node server figures out all your HTML to download, it must also complete those REST service calls synchronously before responding with the full HTML. Not only that, That REST data now represents the “State” of the SPA, and so that REST data must also be downloaded along with the the HTML so that after the page downloads, it can be “re-hydrated” with that State data to continue working like a normal web page.

How The Chrome Extension Works

Chrome extensions that do this kind of thing can be tricky to write because they don’t easily interact with the JavaScript execution context running on any give web page. They are good at reading the static HTML and running JavaScript in their own isolated execution context, but getting to the actual execution context of the page is tricky. Luckily (and hopefully), for you it will just work.

You can think of what this extension does is no more complex than opening up chrome debug tools and going to the console window on a page generated by an app written in Next.js. Then, typing at the command prompt: JSON.stringify(window.__NEXT_DATA__). This chrome extension just gives you a short cut to this as well as a nice way to see the actual data formatted in JSON.

What Could Go Wrong?

I’m writing this because even though I wrote this extension and use it heavily to keep my first page download size down to a reasonable size, over and over again, I make the same mistake.

I first browse to a page like https://svcc.mobi and then click on the “sessions” menu choice. Following that, I click on the Chrome Extension toolbar icon. I see 2K when I think I should be seeing a much large number (like 304K). The reason is I did a “client side” link to my sessions page and the original page downloaded was from the home page which indeed, only had a 2K __NEXT_DATA__ object.

What I need to do is reload that page I’m on by positioning my cursor to the URL bar, selecting the current URL (https://svcc.mobi/sessions), and then pressing enter to get a new request sent to the server. Now, pressing the Chrome extension icon will show the correct size of 304K that I expected.

Looking for Feedback

I’d love feedback on this extension as well as suggestions for how to enhance. Please post issues to the GitHub repo where this extension lives with that.

https://github.com/pkellner/nextjs-utils-chromium-extension

Want To Know More About Developing Apps with Next.js?

You can head over to the awesome getting started docs on the Next.js site or even better, you can watch my two hour course on Pluralsight titled “Building Server-side Rendered React Apps”. If you don’t have a Pluralsight account, you can click on this link and get a free trial and watch my full course before committing any money. You could also watch my other 8 courses and I would not complain about that

Thanks for reading.

Enjoy!  https://medium.com/@pkellner/when-you-should-comment-your-code-2fea26e7517a

TLDR; The new 2018 revision 3 MacBook Pro seems to be a winner.

A Little Background

Hidden behind my MacWinGuy.com alias, I wrote a few block posts about the “new” 2016 and 2017 MacBooks. Bottom line, I did not like them and returned them.  The main reason was the keyboard though I did have some other problems (which did get solved).  I abandoned because of the keyboard.  Without going into too many details, I switched to an awesome Dell XPS 15 (top of the line) and just could not love it.  Ultimately, I went back and got a used MacBook Pro 2015 with the previous and loved keyboard.

Typing Test, Head to Head, 2015 keyboard vs 2018 keyboard

I just received my new loaded MacBook Pro 15 2018 with the Core-i9 and the newest (revision 3) keyboard.  I read several reviews yesterday today that said things like “the new keyboard is not awful”, but nothing particularly good.  My results are that it is significantly better.  My biggest complaint was tactile feedback was horrible and I could not type consistently or reliably.  I just put that to the test with the typing test from https://www.quicktypingtest.com/.

Conclusion

I believe the new generation 3 MacBook 15 keyboard is a winner.  I’ll let you know after 2 weeks if I still like it.  You can see that my typing speed is about the same on the 2015 MacBook as it is on the 2018 MacBook.

HTH’s.

MacBook Pro 2018
MacBook Pro 2015

Other First Impressions

I have to say I’ve jumped straight to the keyboard. Just like my 2016 MacBook Pro, the screen seems much brighter (you can see that in the top picture).  Of course, 32Gig of memory has been a long standing want of mind and that’s pretty obvious how that will play out so I don’t need to review it.

I’ll also report on the graphics later after I’ve done some tests.  I typically run with two 4K monitors and previously, the 2015 or 2016 MacBook’s did not drive them very well (jumpy, jerky), etc.  I’m optomistic now with the graphic support here for two 5K monitors.  I’m figuring if Apple advertises two 5K’s, two 4K’s probably work pretty well. We’ll see.

Price

Same old same old (except if you want 4TB SSD then it’s crazy stupid pricing).

Subscribe to Pluralsight:  http://pluralsight.com

Course URL:  https://app.pluralsight.com/library/courses/aspdotnet-core-react-building-website/table-of-contents

[Start of Video Words…]

I continue to believe that for anyone building enterprise quality apps, the Single Page App (also known as SPA’s), are the way to go.  If you really think about it, it makes total sense. Why is that? It’s because you can write your code in a natural way. You don’t have a ridiculous HTML DOM backend server interaction around your UI events that makes programming a nightmare. Your user click a button, an event is attached the button, JavaScript executes and everything is running in one place.

No crazy postback semantics to manage and program around like in php or other, in my opinion, convoluted programming paradigms.

So why Facebooks React? Because simply, it’s the best JavaScript Single Page App library out there. Personally, I know I’ll get some flack for this, I love JavaScript and especially the new features including things like lambda’s, spread operators, and promises.

Unlike other SPA’s, react fits like a glove to these new features and it just feels second nature to programming JavaScript.  The learning curve is super friendly, refactoring is easy and productivity for me is high.

My course, React and ASP.NET Core, is just over 3 hours and is can be viewed with a Pluralsight subscription, but if you don’t have Pluralsight account, check out the next few minutes where I’ve included a couple clips teaching how to access REST Services, a little bit of debugging with Redux and integrating with ASP.NET Core and the create-react-app templating system.

Of course, don’t forget, that I’m an independent consultant also, and if you need help with projects or custom videos for your company that better serve your needs then a generic training course, I can help with that to.  Reach out to me at my web site http://peterkellner.net and click on the contact page.

In this post, I talk about how the SPA (Single Page App) technology is React from Facebook.  The library that does the REST data call is Axios, and of course the logic is mine.

Read about it all on this post on Medium and don’t forget to add some claps if you like it. It’s my first post on Medium and I’m trying to decide if that is a good place to write stuff.

Fetch Data in React With Spinner Only When Necessary

The full three hour course gives you everything you need to know to both work with all the Tag Helpers built in to ASP.NET Core as well as author your own simple and advanced Tag Helpers.

Check out the full course here:
https://www.pluralsight.com/courses/aspdotnet-core-tag-helpers

In addition, here is a link to the documentation on built-in tag helpers written written by Peter Kellner

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/image-tag-helper

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/cache-tag-helper

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/distributed-cache-tag-helper

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/anchor-tag-helper

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/environment-tag-helper

What Session Would You like Douglas Crockford to Open Silicon Valley Code Camp with October 7? (or reply from list https://t.co/FmDyA5dMZv

— SV Code Camp (@sv_code_camp) June 7, 2017

Douglas Crockford, the inventor of JSON and one of our top speakers at SV Code Camp is currently doing two talks, Numbers and Character Sets. I’ve asked Doug if he’d reprise one of his more JavaScript / JSON sessions and he graciously offered me his list to pick from.  So, I’m turning that responsibility over to all of you.

Head over to twitter on this URL and  VOTE  for what you want to see.  While you are at it, follow the @sv_code_camp twitter feed and you’ll hear about every session approved and other important SV Code Camp announcements.

I’m mostly complete on my Pluralsight course on ASP.NET Core Tag Helpers.  In this 1 hour presentation, I’ll talk about the highlights and what I love about Tag Helpers.

Hope to see you there!

https://www.meetup.com/BayNET/events/238822703/

German International School of Silicon Valley

310 Easy Street, Room 27, Mountain View, CA

For much of my career, I’ve worked at home as a team of one.  Many years ago, I learned that it takes a community.  I’ve always felt one of my strengths is to both reach out when I need help, and offer help when it’s needed.  In about 2005, I started doing a lot of work with the .Net stack and discovered the forums https://forums.asp.net/.

As I was learning ASP.NET, I found myself asking a lot of questions in that forum.  The group was unbelievably helpful and supportive.  Having done a lot of Unix work previously, I’d had a lot of reprimands for incorrect questions so it was very uplifting for me. As I became more proficient in the .Net stack I started answering questions also.  My personal goal was to answer one question for every one I asked.

Though I’ve not been active in that forum for a while, it’s still a great place, and I’m proud to ultimately have been asked to be a moderator as well as achieving All-Star status, which I’m sure is based on the my 15,384 points which included my answers being marked as correct 10,200 times.

Eleven years ago, the Microsoft MVP Program must have noticed my activity here, as well as an event I’ve been the primary organizer for the past 11 years called Silicon Valley Code Camp, where we have hundreds of speakers from the community, hundreds of volunteers, many corporate sponsors and thousands of attendees all coming together to learn and share.  I believe it’s been the biggest and longest running free technology focused community event in the world.

So, what motivated me to write this post today?

I’m in the midst of building my upcoming Pluralsight video course (my 5th) on ASP.NET Core Tag Helpers.  I’m trying to explain how the HtmlTargetElement’s query selector parameter works, and I needed an example of a car model name that is shared by two manufacturers.  I found a csv file that had 9000 car makes and models but could not (based on visual scanning) figure out a model that met what I needed.

I posted my question on StackOverflow

Literally within 5 minutes a user with the handle @SqlZim gave me almost the perfect answer.  After a short comment exchange, I got the perfect answer, learned something new, and had my problem solved.  Plymouth and Ford both made a model named Laser. (among about 80 other matches).

select make, model
from t
where exists (
  select 1
  from t as i
  where i.model=t.model
    and i.make<>t.make
)

Well, back to my Pluralsight course script writing.  Thanks for listening, and most of all, thanks for being part of my community this early Sunday morning in March.