Keith D Commiskey

Blog Relocated from Blogspot/Blogger

2023-08-20T02:24:00.002-07:00

It was a long time coming, as I forever hoped Google would revive Blogger, but it's time to move it along. The straw was the inability to share a post to LinkedIn. That aside, I'm curious to see if another platform might offer more blog post views. Will see how it goes.

The new blog location is now self-hosted using WordPress.org:

https://kdcinfo.com/blog

Cheers!

- Keith | https://keithdc.com

ChatGPT gets Expressive with Emojis

2023-08-19T15:42:00.001-07:00

My first time seeing ChatGPT respond with emojis, and I'm still . . . speechless.

- Keith | https://keithdc.com

Flutter: The perfect take!

2023-08-19T15:26:00.004-07:00

Flutter FTW!

When asked by a non-technical stranger on LinkedIn to explain what Flutter is, being I'm not in sales or marketing, and knowing I'd get too technical, I turned to ChatGPT to help out.

The Prompt:

As succinctly as possible (maybe just a few paragraphs), what advantages does Flutter offer for cross-platform mobile app development, and how might it compare to others such as React Native?

The Perfect Take:

Flutter stands out as a leading choice for cross-platform mobile app development due to its ability to produce natively compiled applications for both mobile and web from a single codebase.

This reduces development time, improves maintainability, and provides consistency across platforms.

Using Dart, Flutter compiles directly into native code, without the need for a bridge, allowing for more efficient communication with the platform and superior performance. Its widget-based architecture enables the creation of complex and responsive UIs that closely mimic native interfaces. These features, combined with hot-reloading, enable a smoother development process.

When compared to other cross-platform solutions like React Native, Flutter offers faster performance, a more consistent user experience across platforms, and an arguably better toolset for UI creation. Despite the wider adoption of JavaScript in React Native, the benefits of Dart in Flutter and its direct compilation into native code can often provide an edge, especially for projects where performance and UI expressiveness are paramount.

- ChatGPT4

P.S. And all that was without even knowing about all Flutter and Dart 3's new features!! (Its knowledge cut-off was Flutter 2.5.)

- Keith | https://keithdc.com

A Tour of some of Dart 3's Impactful New Features

2023-06-21T01:17:00.005-07:00

I created a public Gist of my experience touring Dart 3's new features via their Dart Codelab.

Gist files from Dart's codelab: Dive into Dart 3's new OO language enhancements including patterns, records, enhanced switch and case, and sealed classes.

It was intriguing and educational!! 💡

A couple of the features I recall learning or using from either previous JavaScript enhancements,
or definitely from when I worked with React (e.g. destructuring 'records'). Still others were quite new, with one or two that definitely took some time to sink in (e.g. object-destructuring a Duration object with guards).

When learning of Dart 3 records — which help to pass type-safe maps (of a sort) without the need to create a class for them — I couldn't help but think of a Flutter Bloc analogy, "cubits for classes".

All-in-all it was a fun and eye-opening experience, and I highly recommend taking the time to go through it. Many of the features will likely prove confusing should you begin happening across them in the wild.

The following course overview and links are also provided in the [main.dart] gist file.

Codelab: https://codelabs.developers.google.com/codelabs/dart-patterns-records

flutter create --empty patterns_codelab

"In this course you will experiment with patterns, records, enhanced switch and case, and sealed classes. You will cover a lot of information --- yet only barely scratch the surface of these features."
"Dart 3 introduces patterns to the language, a major new category of grammar. Beyond this new way to write Dart code, there are several other language enhancements, including:"

Records for bundling data of different types,
class modifiers for controlling access, and
new switch expressions and if-case statements.

For more information on patterns, see the feature specification.
For even more specific information, see the individual feature specifications:

- Keith | https://keithdc.com

Dart and OO: Design Patterns, Refactoring, and Code Smells

2023-06-20T01:33:00.001-07:00

I would like to thank Refactoring.guru for their insightful course on, well, refactoring (and code smells) at an Object-Oriented (OO) level. The course helped to set me on the right track for being more cognizant of my coding practices in Flutter and Dart. While some refactoring concepts might appear self-explanatory, the dissection of the refactoring processes in the course was quite detailed and thorough.

Halfway through the course, I sought out additional resources and was ecstatic to discover a few talks by Sandi Metz. Her complementary presentations addressed such like-minded subjects as code smells (which, to confirm, are not necessarily a 'bad' thing), and Object-Oriented Programming (OOP) specifically. Sandi's insights resonated greatly, and have really helped certain OO topics make a lot of sense.

RailsConf 2014 - All the Little Things by Sandi Metz

"Make Smaller Things" - Sandi Metz [00:54]
"Inheritance is fine when the hierarchy is kept shallow and narrow, where subclasses are at the leaf nodes that use all the behavior in the superclass." [29:36]

RailsConf 2016 - Get a Whiff of This by Sandi Metz

"A Code Smell doesn't mean I don't like your code, and I can't tell you why." [2:45]
"The definition of a code smell is that it might indicate a problem." [3:33]

Sandi Metz - Talk Session: Polly Want a Message

"Factories are where conditionals go to die." [29:55]

And for the icing on the proverbial cake, after watching Sandi's talks, I discovered another video by none other than Flutterly, that then brought it all home by explaining the underpinnings between abstraction, inheritance, and Dart's own mixin classes. Having previously benefited from Flutterly's training videos on Flutter Bloc and the Repository Pattern, I found his insights on how these three types of classes operate to be equally enlightening and memorable.

Dart Classes Explained II - Inheritance(extends) vs. Abstraction(implements) vs. Mixins(with) - Flutterly (letsgetwckd)

- Keith | https://keithdc.com

TIL — `.nonNulls`

2023-06-02T13:11:00.000-07:00

From the source code:

\flutter\bin\cache\dart-sdk\lib\collection\iterable.dart

/// Operations on iterables with nullable elements.
@Since("3.0")
extension NullableIterableExtensions<T extends Object> on Iterable<T?> {
/// [Returns] The same elements as this iterable,
/// except that `null` values are omitted.
Iterable<T> get nonNulls => NonNullsIterable<T>(this);
}

dart:collection

Source — changelog:

https://github.com/dart-lang/sdk/blob/5d30f18892f1f825943a74e81ab02f27c2c6c26f/CHANGELOG.md#dartcollection

Added extension members:

nonNulls
firstOrNull
lastOrNull
singleOrNull
elementAtOrNull

Obtained by way of:

https://www.reddit.com/r/FlutterDev/comments/1387579/comment/jixogo4/

The pieces I’m most excited about: | Vennom, u/Vennom

Sealed classes (so good for relaying state, especially in MVVM/MVI)
Records (tuples)
Class modifiers (lock your sub-classing down / support for proper interfaces!!)
Pattern matching (Destructing)
Added extension members on lists: nonNulls, firstOrNull, lastOrNull, singleOrNull, elementAtOrNull and indexed on Iterables.

Obtained by way of:

Dart 3.0: Best New Features & Why You Should Care | Kyle Venn

https://medium.com/@kvenn/dart-3-0-best-new-features-why-you-should-care-429e739f2690#a102

Obtained by way of:

All of the references above were due to research stemming from my initial spotting of the `nonNulls` helper method available in the intelliSense dropdown from within a DartPad inside the Dart cheatsheet codelab, where I ended up with the following solution — thanks to that intelliSense suggestion:

https://dart.dev/codelabs/dart-cheatsheet#optional-positional-parameters

String joinWithCommas(int a, [int? b, int? c, int? d, int? e]) {
// Add all params to List.
// Remove nulls.
// Join List with comma.
return <int?>[a, b, c, d, e].nonNulls.join(',');
}

Migrating to Dart's Null Safety

2021-09-16T01:23:00.002-07:00

Prior to starting on my 4th Flutter mobile app, and because it seems that every plugin now supports it, I decided to give migrating to Dart's null safety a go.

Sound null safety is available in Dart 2.12 and Flutter 2.

In reading through the migration documentation, it appears the migration tool may pose as much time and effort as migrating by hand. And being I'm in this to learn the code, migrating by hand is the path I've opted for. I'm currently on Step 2.4 of the Migration Guide.

Because each of my reminder apps is setup with a similar code base, I also decided to migrate all three apps at the same time. Thus far I've got one app down to 500 critical errors, while the other two are down to 396 and 393.

Mobile Apps	Critical	Warn	Info
B4-I-Go	500	10	64
Hungry-on_Hand	396	8	56
Xpired To Be	393	10	58

Having started at over 600 critical errors on the B4-I-Go app, the migration thus far has been tedious, but informative and enlightening—to both Dart, and my app's own code.

I'm sure a pattern of migrating will emerge, but currently the most time-consuming aspect comes in having to analyze the context of each error to determine if a variable can be null, or if it will never be null. It seems a small distinction between the two when reading about them, but in context, the decision seems quite important for each case.

?	\|=>	Indicates an object member's leftmost operand can be null; example: foo?.bar selects property bar from expression foo unless foo is null (in which case the value of foo?.bar is null).
		You can make a variable nullable by putting a question mark (?) at the end of its type. For example, a variable of type int? might be an integer, or it might be null.
!	\|=>	If you know that an expression never evaluates to null but Dart disagrees.
		`Map<String, List<String>> _dataMap = {}; _dataMap.putIfAbsent('message', () => []); _dataMap['message']!.add('Welcome!');`
		// ^^^ '!' means we know the message key will never be null because we added it on the line above.

The other two prominent null safe keywords are required and late. While required was introduced before I began learning Flutter via the @required annotation, which is easily remedied by removing the `@`, I've come across ample variables that have made good of the new late modifier, which simply indicates the variable will be initialized later.

⚠ If you fail to initialize a late variable, a runtime error occurs when the variable is used.

Fortunately, should errors prevail when the migration is complete, I should also get a good look at Flutter's new debugging updates.

Happy migrating!

- Keith | https://keithdc.com

Converting nullable dynamic Lists inside Maps

As a last-minute add, below is a null-safe approach used to convert a dynamic List inside a Map, such as when using json.decode, into a List of Strings.

If anyone knows if anything is incorrect or can be done better, please comment. Always looking to learn proper methodologies and better approaches.

Two scenarios: A key exists in a Map, or it doesn't (is null).

Map<String, List<dynamic>> _statusObj = {'message': ['Hello!']};

Map<String, List<dynamic>> _statusObj = {};

A null-safe solution:

List<String> _alertMsgs = List<String>.from(_statusObj["message"]?.toList() ?? <String>[]);

Reference notes with comments and some approaches that didn't work:

Gist: https://gist.github.com/KDCinfo/f329655032b7b189dfdd9e82e97010e3

DartPad (runs the ^^^ Gist): https://dartpad.dev/f329655032b7b189dfdd9e82e97010e3

The Appreciation of a Framework

2021-09-13T01:30:00.002-07:00

. . . that inspires productivity.

The tl;dr is that, thanks to Flutter, my third app is now live in both Google's Play Store (for Android) and Apple's App Store (for iPhones and iPads).

The appreciation comes in the form of the Flutter framework providing a solid base from which to learn mobile app development, without getting lost in the intricate details of every minute facet of the mobile app engine underpinnings. This allows you to learn as you go, and to still be productive as you continue learning more, and more (and more).

I also enjoyed working with the Laravel framework (circa 2017). Once familiar with a framework, and in learning some of its nuances, app development time becomes more and more about the app than the tool. I've been enjoying seeing that transition with Flutter, and it's inspiring.

Also thanks to the Flutter framework, and in setting up a shared theme and coding structure, this third app

only took five weeks to complete!

And—that development time was shared with learning how to implement new features such as push and local notifications, and for some devices (primarily iOS), how to give the app's icon a "badge" indicating the app has an update waiting.

So, a big thank you to the Flutter team — and to Academind for getting us developers started off in the right direction early on.

- Keith | https://keithdc.com

KD-reCall Details

An account is required to use any app in the KD-reCall reminder app collection, however, accounts are free, and only one account/email is needed for any KD-reCall reminder app.

KD-reCall.com — An alternate interface that allows for web-based user registration and general account settings for all KD-reCall mobile apps.

Xpired To Be - Released: Sep 2021

B4-I-Go - Released: Aug 2021

Hungry on Hand (pilot project) - Released: Mar 2021

Google Play Store

Research References

Plugins:

Flutter Local Notifications

Flutter App Badger

Two articles I scrutinized and aggregated to learn the fundamentals for implementing Local Notifications.

How to Set Up Local Notifications in Flutter - [Code] - Tomer Ben Rachel. "How to Set Up Local Notifications in Flutter." freeCodeCamp. April 26, 2021.
LogRocket: Implementing local notifications in Flutter - [Code] - Nelson Michael. "Implementing local notifications in Flutter." LogRocket. August 31, 2021.

#Flutter — putting the focus back on app development.

Wrote an App; Got a Mac; Wrote another App

2021-08-04T03:03:00.002-07:00

Or more specifically, "Wrote an app for Android; Bought my first Mac; Wrote another app for iOS and Android."

App development is a time-consuming, minutely detailed process, and there is little time for pause.

Mar 29	First Flutter mobile app approved for Closed Testing in the Google Play Store.
Apr 22	First interview for a Flutter Developer position (knowingly premature—but a part of learning). Walked through an hour-long presentation of my app development. In the end, they asked twice about iOS development, but I've never owned a Mac.
May 14	My first Mac arrives—a refurbished 16" MBP direct from Apple.
Jul 30	Second reminder app approved and marked as "Ready for Sale" in the Apple App Store (although it's free).
Aug 1	Second reminder app approved for Closed Testing in the Google Play Store.
Aug 4	First app released to Google Play Store. Second app released to both app stores (store links provided below).

Simple Reminders

As referenced in my Hello Suite and Architectural Challenges posts, I began work on what I hope to be a collection of simple reminder apps (free, and ad-free).

As a part of that collection, each reminder app has its own reminder purpose. However, the purpose of the apps themselves was not the point of creating the apps. Although they may well prove useful to someone, the selection of the reminder topics were for simplicity, so time could be spent focused more on the continued learnings of Flutter, and the design of the overall 'shared app' strategy.

Pilot App

The pilot app for the collection is named Hungry on Hand. Its primary 'reminder purpose' is to help folks keep track of snacks or beverages they have on hand. The simplicity of this app's purpose served to get me through the architectural hurdles I faced, while at the same time tying it to my own custom-built back-end API.

This first app was also designed and built with the concept of it housing a shell that would be used as a core for the other apps in the collection (e.g., no hard-coding, and everything should be modular).

Second Pilot

The second reminder app took me to whole new levels of learning with Flutter, as I faced many more challenges and a lot of lightbulbs. For example, this app added a 3rd-level screen, which required a new approach to a variety of design considerations such as better navigation control.

I learned a variety of iOS styles, Cupertino-specific widgets, and lessons. One such lesson is to not use Drawers. Another is to not use the CupertinoPageScaffold if you plan on using a SnackBar (as the bounty I put up on Stack Overflow helped me to understand).

First Mac

I currently have no opinions as of yet between my career-long relationship with Windows, and my newfound knowledge of the Mac.

I can say that relearning keystrokes was not at the top of my list of things to be learning, which I resolved with the help of two different software setups (I can elaborate if anyone is curious). With those in place, I've gotten into a good flow in working between my dated MSI and my new MBP, and so far they've worked fairly well together. Currently, the Mac does everything WRT coding and builds, and the MSI is used for everything else.

App Availability

Hungry on Hand: Google Play Store

B4-I-Go: Google Play Store | Apple App Store

Next Up!

The third app in the reminder collection will be used as a base for me to learn more about Firebase, and maybe BLoC (if applicable). I aim for it to be complete within two months, and although I will be pushing for less than one, I suppose it could take three—I have no idea how many more learning challenges I may encounter.

My aim and hope is to eventually be able to help find solutions and create productive apps for a small to medium-sized company.

Until then, another app awaits creation, and I've got a database to design and more methodologies to learn!

Happy coding!

- Keith | https://keithdc.com

Architectural Challenges: My Flutter Frankenstein

2021-07-30T19:17:00.003-07:00

The Bottom line: I really like Flutter.
It has been extremely challenging at times, but the lessons learned from those challenges have been mostly fundamental and insightful.

My first major challenge with Flutter came in October when I found I could not update multiple Flutter widgets from various 'reactive' sources using Flutter's Provider package.

I got to a point in my app development where I just couldn't get the code to do what I needed it to do.

Thus began an architectural journey...

Scouring the web, I tried dozens of variations with every aspect of Flutter's Provider package I could find information on. I came close to succeeding a couple times, but always, always hit a solid road block towards the end of each implementation.

In the end, my entire codebase felt really... procedural (read, cluttered). I felt claustrophobic in my own code, and could not make heads or tails of all the different flows (and I've got plenty of Draw.io diagrams to show for it).

Pressing pause on development, I ventured through an insightful Coursera series on Computer and Object Oriented Systems Design. That course helped me to open my views on what other approaches could be out there to help with my architectural woes.

? ? ? Options ? ? ?

I knew I was still too new to Flutter to try BLoC just yet, and fortunately a search revealed a couple "clean architecture" approaches that were more 'Provider-like'.

The first of the two architectures I ventured to learn was FilledStacks.

Filled Stacks provides in-depth tutorials showing both their clean architecture, as well as a transition into using their own FilledStacks library package. Their package aims to do most of the clean architectural heavy lifting, and helps with boilerplate. The Filled Stacks courses were insightful and informative, and I loved the Clean Architecture approach, but he lost me on TDD.

After deliberating, I resolved that I didn't want to become reliant on a 3rd party library. With my being so new to Flutter, if something broke in their package, I wouldn't know that it wasn't me doing something wrong. A package such as this is highly beneficial to developers who have the years of experience who can simply know when something isn't working "as expected."

The final architectural approach left to put to the test—Ray Wenderlich.

Coincidentally, it turns out that Ray's architectural approach is based on the FilledStacks architecture, but it doesn't rely on the Stacked package library. Upon review, I found the essence of Ray's architectural structure and tutorial walkthrough insightful, as it is essentially a pragmatic lesson in how to use the get_it package; also used by others such as Reso Coder.

Unfortunately, however, despite it's insights into the architecture outside of the Stacked package, it didn't detail any reactiveness as FilledStacks provides.

So at that point, I had two paths to my goal of a cleaner architecture—both with their own limitations.

After further deliberation, I decided to attempt to merge the get_it facets of Rays tutorial with the reactiveness of the FilledStacks architecture. I double checked the licensing on the code for FilledStacks (MIT), and I proceeded to create my own little architectural Frankenstein, which, when done, did not work.

Slightly baffled, I created a simple, pared down skeleton version of the code I had just attempted to compound into my own app, and lo and behold, it worked! That was Dec 19. After months of failure in finding a good architectural approach that solved my app's needs, I was too tired to be excited.

I then applied that skeleton setup to my own app, making all the pertinent adjustments across files, and when done, it also worked!

! ! ! WOOT ! ! !

Since that breakthrough, I continued refactoring the rest of the app to leverage the new reactive architectural design. It was tedious, but I can now diagram my app's architectural flow without it becoming a game of Twister.

References

Coursera Object Oriented Design
https://www.coursera.org/specializations/software-design-architecture
Filled Stacks
https://filledstacks.com/post/flutter-and-provider-architecture-using-stacked
Ray Wenderlich
https://raywenderlich.com/6373413-state-management-with-provider
Pilot App: Hungry on Hand - A detailed development history
https://bitbucket.org/kcommiskey/kdrecall-apps/wiki/History

-Keith | https://keithdc.com

"Hello Suite"

2021-07-25T02:57:00.000-07:00

When completing a lengthy course on an interesting topic such as mobile app development via Flutter, the satisfaction of the certification at the end can be short-lived, as the real joy comes in the form of creating your own actual apps.

Recommended course of action:

"Just start building something . . . anything!"

But what?!

My First Flutter —and mobile— App (...Suite)

In considering this was my first mobile app, chances were pretty good its code wouldn't be looking too spit-n-polished in the end, so I decided against going with my prized project.

I craved to create something unique, and with dozens of smaller project ideas to choose from, I eventually determined to break from the flock of "Hello World" first-timer apps, and opted to face the challenge of creating a suite of apps, . . . as my first app. 😁

The suite's theme: Simple Reminders

The suite actually began with the name 'KDC App Suite,' but it was soon changed to KD-reCall in an effort to better tie the suite's title into the 'reminder' theme. The initials are for branding, and because it was only ever really meant as a personal-use project, and for the experience; but if others might benefit, then all the better.

The goal has been for there to be 10 reminder apps in the suite. I use the term "suite" loosely, as I've recently begun referring to them more as a "collection of apps" in the unfortunate event that I can only complete a couple of them, which just doesn't feel very "suite-ish."

Project Immensity: Confirmed

Quite simply, it was determined that each app would share the authentication system, and a common shell, with each having its own unique core purpose. Moreover, the entire KD-reCall collection would be complemented with a web-based interface to assist with authentication and user account settings.

That was as far as the "simply" part went. After the logo and theme design, the first few months were dedicated to the creation of the back-end API and the web-based version of the suite—with absolutely no hands-on with Flutter during this development time. 😢 This became fairly extensive as the authentication system I designed includes an array of features.

Once the web-based "authentication and preferences" interface was coupled with the back-end API, the authentication portion of the mobile app was created, and the mobile and web versions were then fine-tuned to work side by side.

The final authentication feature, DND, was completed in October, which is when I was met with my first major Flutter challenge—setting and sharing values between `Provider`s.

Thus began quite the challenging architectural journey through various Flutter state paradigms and packages, which I look forward to sharing soon.

How it started	How it's going

-Keith | https://keithdc.com

I got a Flutter Full Course Certification—Now what?!

2021-07-21T02:53:00.002-07:00

The Goal: Find a mutually-accommodating position working on productive solutions involving mobile apps built with Flutter or JavaScript-based web interfaces before the end of the year.

The Plan:

→ Phase I:
- Begin learning mobile app development via Flutter.
- - Complete. Yay! 🥈
→ Phase II:
- Focus on a solid project to continue to broaden and strengthen Flutter knowledge.
- - 98% complete. This is what my next few posts will cover. ✍
→ Phase III:
- Interview prep and job search.
- - Although I am one of those developers who is more comfortable discussing code while coding, I aim to learn how to discuss code without context as well (i.e., "Define the 'spread operator'"). 🧐
→ Phase IV:
- Upon finding a mutually-accommodating position, go above and beyond to help make my new job a success. 🤝

The Bottom line: I really like Flutter. It has been extremely challenging at times, but the lessons learned from those challenges have been mostly fundamental and insightful.

I'm looking forward to sharing some of those insights.

-Keith | https://keithdc.com

New Browser Extension: Too-Much-Time

2020-07-06T01:40:00.000-07:00

Browser Extension: Too-Much-Time

This blog entry is to simply document the creation and publishing of my third browser extension now available in the Chrome Web Store. The extension was relatively light and more of a personal project to accomplish something during—and break the monotony of—my mobile app development learning curve (which is coming along nicely).

Too-Much-Time Browser Extension Popup

Too-Much-Time is a simple browser extension that allows you to 'time' the time you spend on certain websites.

When the time you specify is up, you'll get an alert offering you the opportunity to stop or snooze.

As with my other two browser extensions, Too-Much-Time is not only free, it's open source.

Although I was really hoping to have this quite simplistic concept developed within a day, in the end, even two days would have been surreal. But also in the end, I'm pleased with what the simple concept of trying to limit my time on [enter addicting online web service here] became.

Situational Examples:

If you find you've been spending a little more time than you would prefer on your favorite social networking site.
Or perhaps you'd like to time your shopping on your favorite eCommerce site.
Perhaps you'd like to time your efforts spent researching through an informational site.
Or put in 'just enough' reading on a particular reading site before bed.

The intent of this extension was to be an annoyance to help get you (okay, me) off websites that you (*I) spend a tad too much time on.

Installation

From within your favorite browser, navigate to the Chrome Web Store and click the "Add to Browser" button.

Instructions and FAQ

As mentioned, as with my first two Chrome extensions, the code for this extension is open source and available on GitHub. The readme on GitHub provides additional insights for installation and usage, along with a host of other edge-of-your-seat informational items.

Always open to feedback! If you come across a bug, you can also feel free to look at the code, and see if you can find a fix. I'm also open to Pull Requests and possibly even contributors.

Keith D Commiskey @ 2020-07-06

Lifetime Web Developer

https://keithdc.com

Learning Mobile App Development via Flutter

2020-04-03T00:40:00.001-07:00

Learning: Mobile App Development - via Flutter

What is … Flutter? Flutter is a mobile—and web—app development framework powered by the Dart programming language. It is akin to React Native or Ionic, and is built by Google. Dart is akin to JavaScript—but not.

Since coming out of beta in December 2018, trends from Stack Overflow and LinkedIn have indicated Flutter has become—and is currently—a well-developed, easy-to-use, community-driven framework for developing natively compiled apps. It is currently used by a variety of vendors including Square, Sonos, eBay, and of course, Google also uses Flutter to develop some of its own products such as Google Ads.

Flutter 101: The Course

Academind (Udemy; Online Education) provides over 150 high-quality courses across near two dozen topics, and is devoted to real-life success via online learning. Tagline aside, their Flutter course in point is a fine-tuned 36-hour course, and is the most detailed study program I have ever had the pleasure of going through.

Max, the instructor, goes through the course with an ever-encouraging tone, dropping tips and tricks and hints between every instruction. In fact, these tips and tricks are dropped so often, if you skip thirty seconds of instruction, you could potentially lose out on a handful of intrinsic insights that could save you hours of developmental headaches later on. Notes abound.

Due to the vast depths of shared knowledge throughout the lectures, many students have signaled their need—and desire—for going through the course multiple times. I, on the other hand, went through every minute of the course an equivalent of seven times—in one pass. Between taking copious notes on every single detail of instruction, reading through every comment in the majority of lectures—and contributing my own comments throughout, all in addition to typing through all the code—and testing—every detail, you are assured to come out the other side with at least three fully featured apps.

In the end you will have the opportunity to take one of your apps, say the "Meals" app, for instance, and upload it to either the Google Store, the Apple Store (if you have a Mac), or both.

Icing on the Cake

Two key things this course does above and beyond:

It runs you through not-so-happy paths, ("incidentally" on purpose) and
it helps you to understand why and how things broke.

Max provides concrete decisions on coding styles, but is also adamant and direct when a particular approach is simply "one way of doing things." He provides a heavy emphasis on detailing how to approach any given situation in a variety of ways—providing insightful input on the pros and cons of each.

In honor of doing what you love in life and in sharing your knowledge with others, it is with pride I am able to share the Flutter course completion certificate provided by Max of Academind. I look forward to my travels down the road they helped begin to pave.

Course Completion Certificate

Title: "Learn Flutter & Dart to Build iOS & Android Apps [2020]"
Certificate: https://ude.my/UC-aaa10e86-9311-4dd7-8a24-3e9531777591
Platform: Udemy: Completed: March 25, 2020; 36 hours
Instructor: Academind by Maximilian Schwarzmuller

Flutter Learning Path Logistics

I initially went through the following two courses which ultimately led me to the course on Udemy (as they were intended to do—thankfully so).

Flutter Tutorial for Beginners → Udemy course prequel—this is basically the first section of the Udemy course, ergo, I would suggest just doing the course version, as it is likely more up to date.

Academind | YouTube: 03:22:18 (3 days; Jan 6 - 8; 29)
Build iOS and Android Apps with Google's Flutter & Dart

Flutter Crash Course for Beginners 2020 → A really good intro course

Academind | YouTube: 05:44:31 (3 days; Feb 5 - 7)
Build a Flutter App with Google's Flutter & Dart

Next Phase

Building [Pragmatic] Mobile Apps

Keith D Commiskey @ 2020-04-03

Lifetime Web Developer

https://keithdc.com

React Component Marries Chrome Browser Extension

2020-01-27T14:51:00.001-08:00

Less than two years later, Chrome browser extension requests opportunity to see other code.

Ever wondered how to wrap a Chrome browser extension inside a React component to allow the extension to run as a SPA? The Expired To Be: SPA version does just that. It is a React alarm component I wrote that wraps and queues alarms in conjunction with the Chrome browser API.

Having React stand in as Chrome's storage, queue, and notification platform worked out really well. Although obviously there is the maintenance and understanding of the integral relationship between the two technologies, the same can be said for Redux or any technology that is tightly integrated.

SPA History: The Marriage

Visual Overview: A detailed schematic outlining the integration between the React 'Alarms' component and Chrome browser extension can be found on GitHub: Expired To Be Page Load Architecture Diagram.

As noted in the Expired To Be: SPA article on Sunday, April 2018, "Both apps share the same source code, which is all open source on GitHub."

Also noted in the same article, "Alarms API—For my React-based Alarms API," I borrowed the `TimerBox` component from my previous 'Done (for now)' SPA. (Done (for now) is a multi-timer; it was my 3rd React app, and my 1st TypeScript project.)

SPA Integration Caveats

The SPA and Chrome extension do not share alarms. The extension uses Chrome's own internal storage and alarm system, which is not accessible from a normal web page.
- Could this be done? Certainly! Given proper T&E and if there were a demand for it, I have a theory or two on how to make this work.

The SPA web page (tab) must stay open to allow the alarms to run. The Chrome extension runs in the browser's background.

The Chronus of it All

> 2018-02-06 - Tuesday

Began project: Copied over folders and files from 'Character Counts' (my first Chrome extension) and began editing.

@2:05 PM

Got "Expired To Be" stripped down to essentials.
- Ready for development.
- Then notifications.
- and localState.

> 2018-02-23 - Friday

@12:30 AM

Got x2bStorage setup for get and halfway with set (and clearItem).
Feels like I made a lot of progress, and it feels like I haven't 'cause I've been working on this for the last 2-3 hours or so. Need to finish this part up so I can do the export, so I can then do the SPA page (React is doubtful; more likely just plain HTML/CSS/JS).

> 2018-03-01 - Thursday

@5:29 PM

Figured out solution to my problem.

Wrap popup.html in an index.php. popup.html is read from manifest.json by the Chrome Extension. index.php is read from travis.yml by GitHub Pages.
- Will be wrapped with library loads.
- React can load via <script>.
- Alarms API can load via <script>.

So; 'Expired To Be' is going to be introduced to React, and React's build process. Gonna do a CRA install.

> 2020-01-26 - Sunday

Chrome browser extension files for separation of code space. GitHub clone proceedings commenced. Expired To Be: SPA repo now resides in its own space, and is available from it's own URL.
Chrome browser extension turns focus to family ties and is now poised to assist with a couple new sibling ventures. More to come...

Keith D Commiskey
https://keithdc.com

Introducing: The Book Length Classification and Word Count Tool

2020-01-19T14:20:00.001-08:00

Where does your story fit? Novel, Novella, Novellette, Modern Short Story, Short Story, Short-Short Prose, Flash Fiction?

Introducing: The Book Length Classification and Word Count Tool — Providing aggregated insights distinguishing the differences between a Short Story, Novella, Novel, etc.

Comments and suggestions always welcome. Disqus comments are provided at the bottom of the article page.

https://kdcinfo.com/wordcount

Thanks,
Keith D Commiskey
https://keithdc.com

JavaScript Informational: Best of the Basics

2020-01-18T22:00:00.000-08:00

Best of the Basics: JavaScript Informational

JavaScript Informational: Best of the Basics: A full run through for entry- and mid-level developers looking for some solid fundamentals. Comments and suggestions always welcome.

For those new to the language, this is my own personal introduction to the topic garnered from over 17 years of experience: I'm throwing it out into the informational nexus. -Keith D Commiskey

So you wanna control your browser, ehhh...?

Start with a Solid Base

Variables are the crux of most programming languages, and a good place to start. You have to be able to ask for, handle, save, and recall various tidbits of information.

Q: Why would you want to create a variable?
A: Variables are a part of what allows us to control “app”lications—such as your web browser.

Everyone reading this informational on a web browser has the ability to create a variable in less than 30 seconds. For instance, most browsers allow you to open their “developer tools” using the F12 key. If you click the “Console” tab at the top of those tools, and type the following at the > prompt: var myvar = “hello”; and press enter.

Congratulations!

Here, myvar is the name of your variable (var is you telling the computer that you are about to create a variable). Once you assign information to a variable, you can then access that information—by referring to your variable's name—with other code. For instance, you can assign numbers to two different variable names, and then add those two variables together. In doing that, you will have basically just created the 'addition' function on a calculator. Bet you didn't know you'd be doing that today.

Q: What kind of information can you put in a variable?
A: These are called data types, and they refer to things like strings and numbers. Previously you added a string, “hello”. Then just now you mentally added a number, which you could do by typing var myvar = 34; and pressing enter.

You can check what data type a variable is holding by using: typeof myvar; which will return either “string” or “number” (or a few others).

In JavaScript, just like string and number, there are seven of these data types, and they're referred to as “primitive data types” which just means the base objects themselves cannot be altered (for instance, the number 3 will always be the number 3, although your myvar reference to the number 3 may change).

Alongside these seven primitive data types, there is the “object” data type, which is the primary way that we—as developers—work with data. These objects can also be based on the seven primitive data types, and as a reference (variable assignment) to those primitive data types, their values can be changed.

An Important Note

When assigning a type of data to a variable—be it a string, number, or other—it should never be changed to a different data type. If you initially assign var myvar = 3; you should not try to set it later in the code to be myvar = “3”; (which is a string—not a number).

The Base

Data is one of the underlying fundamentals consistent across every application.
Variables allow us to handle that data.
Data Types allow us to keep things organized.

It's All About the Data

Understanding Data Types

The basis for most things you do with data in JavaScript.

typeof => Data Types => The types of data that are stored in variables.

As your program grows, it will grow harder to keep track of all your variables. When you get code from other developers, it will grow harder to keep track of all your variables. With every new feature you add to your web app, it will grow harder to keep track of all your variables.

To keep track of your variables, you need to be able to check them.
You'll need to see what type of data is in them (if any), or if they even exist (i.e. if they've been created).
Checking data types helps us control the flow of our data.

Important Note: There are two ways a variable comes into being, and we can check for those states. If the variable hasn't been created and doesn't exist at all, it is undeclared (and will throw a Reference error in the browser). If the variable has been created but hasn't been assigned anything, it is undefined (which you can—and will—check for regularly).

Declared: var myVar; // But 'NOT defined'.
Defined: myVar = ''; // The = assignment operator will assign a value and define the variable.

This really is important stuff, I promise! If you're bored ... it will pass (or try accounting (j/k!!)). This really is just the basics. You can't build the house until you learn to swing the hammer (and other cool sayings...) :)

And without further ado...

Introducing... Your Data Types!

The typeof operator (or, "command") will return lowercase strings for each of the data types listed below. As noted on MDN, these typeof return strings can be one of the following:

typeof	Result
String	"string"
Number	"number"
Boolean	"boolean"
Undefined	"undefined"
Null	"object"
Function object	"function"
Symbol (new in ECMAScript 2015)	"symbol"
BigInt (new in ECMAScript 2020)	"bigint"
Any other object	"object"

Some Clarity

Number, String, Boolean, Object
	var = “string”; // 3, “3”, true\|false, {}

Undefined
	The check for `undefined` will check both the 'undeclared' and 'undefined' states (these two states were noted earlier). The `(typeof yourReference !== 'undefined')` condition is used quite a bit. Note: `typeof` returns a lowercase 'string' ^^^ for comparison. Example: if (typeof myVar !== 'undefined') { console.log('Nice! Variable is set.'); }

Null
	Value of var set to nothingness (some methods return null). To check for null, instead of typeof, use if (myVar === null) { ... }. Due to legacy reasons, typeof null === "object". Remember, null is not the same as undefined or empty (“”).

Symbol, BigInt
	Advanced topics; Relatively new to JavaScript.

Don't change data types !!!
	In other words, don't change a variable's data type by placing a new type of value in the variable. If a variable is a "string", it should always be a string! Coding Examples: // This will work (in JavaScript), but is considered poor practice. var myNumber = "3"; // Should instead set to just the Number 3 myNumber = 4; // Best practice! var myNumber = 3; // Look ma', no quotes! myNumber = 4; // A "Number" is a type of object like "String".

To the Code!

Comparing ... Stuff

Comparators < === > simply compare two data items. For example, 3 == 3 compares two 3s.

The biggest thing here to learn and remember is that there are two ways to compare data items.

Compare the Values (between two variables) == and !=
Use 2 character signs to just compare the values.
3 == '3' === true.
Compare the Values AND the Data Types === and !==
Use 3 character signs to compare the values AND the data types.
3 === '3' === false because one is a number and one is a string.
Best practice is to always use === (especially being that variables should never change what 'type' of values they hold).

Common algebra comparison operators.	<	<=	>	>=
Check for value only	==	!=
Check value and data type	===	!==

Coding Styles; Standards vs. Preferences

As you learn to code, you will quickly find there are many ways to do things. These 'options' can at times lead to industry standards, while others lead more to personal preferences. Additionally, different industries may have different coding styles.

Best practices can at times be subjective; choose your preference. But! Be able to code in the style of the project you're working in.

Optional: Curly Braces (grouping bits of code)

When using various features of JavaScript, many times you will be provided an option to wrap your code with { curly braces }. When you come across these optional braces... Best practice is to "always" wrap your statements with curly braces.

For example, not using them for statements that only have one line (one ... "event to run") is optional. However, consistency would dictate—because you have to use them when you have two or more lines of code to run—they should always be used.

Coding Examples:
// This will work, and some developers prefer this.
if (alwaysWrapWithBraces === true)
console.log("One-liners should be wrapped up for consistency.");
// Best practice (subjective)
if (alwaysWrapWithBraces === true) {
console.log("Consistency is a valued trait in web development.");
}

Optional: Semicolons

Same holds true for semicolonsat the end of a line;

They are optional, but because there are some gotchas you have to watch out for, and for which merely introduce more potential entry points for bugs, as with the argument for curly braces, it's best to just always include them.

Parentheses Matter!

In programming, when you need a couple things to happen at the same time—just like with algebra priorities of Addition, Subtration, Multiplication, etc. (PE(MD(AS)))— there are times when you need to tell the browser in which order things need to be done.

Such a time in development would be when performing actual math calculations, or sometimes when performing other operations as well.

For these examples, understand that Math.random() returns a floating-point, pseudo-random number in the range 0–1 (inclusive of 0, but not 1). Ergo,

Math.random() <= 0.999999999999999999 and
Math.random()*2 <= 1.9999999999999999

Parentheses Placement	Possible Values
Math.floor(Math.random() * 2 - 1)	// -1 – 0
Math.floor(Math.random() * (2 - 1))	// 1
Math.floor(Math.random() * (3 - 1))	// 0 – 1
Math.floor(Math.random() * (3 - 1) + 1)	// 1 – 2
Math.floor(Math.random() * 3)	// 0 – 2

Your best approach when coding things of this nature is to know what your expected output should be. Then you can perform testing based on your expected output.

For breaking down more complex math problems, you can also try an online calculator such as the "Equation Calculator" I shared in Oct 2019, "Solve for 'x' with the Equation Calculator".

Miscellaneous Tidbits

As you progress in your early learning, the following tidbits of advice should help advance your fundamental understanding of certain things that often go unsaid.

Naming Conventions

HTML <tags></tags>: The general concensus is that <html> tags are "almost always" lowercase. However—technically—it doesn't matter. But! I look at my code from 2005 and it's <YELLING AT ME>! I've preferred lowercase ever since that JUMPED out at me one day. <!DOCTYPE html> is a good exception to this rule.
HTML ID attributes should simply avoid using kebab-case, and instead use either camelCase or PascalCase. After many years of seeing differently, this took some major thought adjustment, but my IDs from here-on-out will be PascalCase (aka, TitleCase).
CSS .class-names should be written and named using kebab-case (all-lowercase-with-hyphens).
JavaScript variable and function names should be written and named using camelCase (not to be confused with TitleCase (or PascalCase)).

Comments are Public

HTML, CSS, and JavaScript code comments can be seen by anyone who can view your web page. Comments are hidden from the browser's "viewing" page, but the comments are still accessible if you view the page source (Ctrl|Cmd-U) or explore in your browser's Developer Tools.

Do NOT put sensitive or similar information in comments.

<u>

The <u> tag is fine to use in some cases; especially if the site's <a> link styles are emphasized in some manner so as not be confused with the standard <u> underline. Understand the context in which you're working in. Be aware of your development environment and a site's own coding styles.

Copy/Paste

Pasting into Notepad is a nice trick for removing certain hidden characters that hitch a ride when copying sections of data from the internet or various documents (especially with code). Unfortunately it will not "always" remove all hidden characters. If problems with a certain section of text in your code persists and is proving challenging, you can also try pasting into a Word Processor, most of which provide the option to "show hidden characters."

A couple approaches I use when I paste things into anywhere—and then begin experiencing issues— (indicating it was due to the paste):

Delete a chunk of the pasted information, test to see if the issue is still there, then 'undo' the delete. Repeat until the error goes away, and narrow it down.
When you use you left-right arrow keys to scroll through text, you'll see the cursor scroll happily along. Hidden characters, however, will cause the cursor to 'skip a beat' as it 'goes over' the hidden character. When you see this skip happen, you know there's something in there, and you can trim it out.

Block vs. Inline vs. Inline-Block Elements

DIVs and SPANs

Understanding "block" vs. "inline" vs. "inline-block" elements is crucial to front-end web development.

MDN has already done an excellent job of explaining these concepts.

Spending one to two days digging deep into these will allow you to better comprehend some even more powerful features such as Layout mode, Flexbox, and CSS Grid.

Padding, Margin

It is extremely crucial to learn these, and no one explains it like MDN!

Border; Outline

According to MDN,

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

Outlines never take up space, as they are drawn outside of an element's content.
According to the spec, outlines don't have to be rectangular, although they usually are.

A `border: 5px solid red;` will visibly move/shift adjacent content.
An `outline: 5px solid red;` is more of an overlay and will not affect the contents.

New HTML Element Types: YMMV (your miles may vary)

Check compatibility charts regularly for target audience browser support. The MDN docs should be required reading (or at least required skimming).

Every feature has its own chart. MDN especially includes notes on limitations of use, and all the charts usually include mobile browser support.

As you grow with JavaScript, MDN and StackOverflow will typically become your primary go-tos. Although MDN may appear to be more cryptic early on, you will become more comfortable with it as you progress.

Tools

HTML Validation | https://validator.w3.org
CSS Validation | http://jigsaw.w3.org/css-validator/

Cheat Sheets

HTML5 cheat sheet | https://websitesetup.org/html5-cheat-sheet/
Windows keyboard shortcuts | https://www.google.com/search?q=windows+keystrokes

A few common locations for project files

Local:		Location on Computer/Drive
	Windows	[Desktop, My Documents, etc.]
	Mac	[Desktop, Documents, etc.]
	Linux	[/var/www/html/]
Remote:
	GitHub	Provides free public repositories
		A "repository" is a virtual folder that stores your project's files. You can have multiple repositories; each with its own project files.
	GitHub Gists	More for code snippets
	BitBucket	Like GitHub, but isntead of free public repositories, BitBucket provides free private repositories
	CodePen	Free online text editor with live preview pane
	Others...

The #1 essential tip for progressing your skills

Little, Tiny, Side Projects

Familiarity through repetition is a big part of the initial learning curve.

Make yourself a list of "things" you can create... perhaps some that might benefit your own work or study habits. The more little projects you challenge yourself to do, the more 'life training badges' you'll garner.

If you can build yourself any little "thing" that does something with HTML, CSS, and JavaScript, you'll have created a miracle. Build on it from there.

Acronysms

You may come across the acronym a11y; which refers to the word "Accessibility," which begins with an A, followed by 11 characters and ending in a "y."

You will also come across this with i18n for internationalization (coding for other languages).

These types of "acronysms" are explained here: https://en.wikipedia.org/wiki/Acronym#Other_conventions

FYI: "acronysms" is a made-up word; although there are 17k Google results. I enjoy research. :D

Learning Resources

One of the best coding walkthrough and challenge sites for learning.

free Code Camp.org
Good simple, progressive, code exercises

Additional Learning Resources.

Good base for code style: W3School JavaScript Tutorial

Deeper base for code style: W3School JavaScript Style Guide and Coding Conventions

Brought to you by

Keith D Commiskey @ 2020-01-18
Lifetime Web Developer
https://keithdc.com/

2020-01-18 | KeithDC

Popular Development Tags: Starting 2020

2020-01-16T14:10:00.001-08:00

Popular Development Tags: Stack Overflow

Starting off the year 2020

Below are the results for the most popular tags on Stack Overflow beginning the year 2020.

javascript	1,931,524	845 asked today, 4835 this week
java	1,626,006	585 asked today, 3235 this week
c#	1,373,811	453 asked today, 2427 this week
php	1,327,017	324 asked today, 2107 this week
python	1,326,607	1073 asked today, 6290 this week
android	1,245,015	369 asked today, 2209 this week
jquery	974,371	136 asked today, 862 this week
html	961,389	331 asked today, 1954 this week
c++	650,668	210 asked today, 1251 this week
css	643,527	213 asked today, 1263 this week
ios	618,621	178 asked today, 897 this week
mysql	583,152	159 asked today, 999 this week

Posted: 2020-01-16 by: Keith D Commiskey

There's code in my ... code! A common experience?

2020-01-16T04:43:00.002-08:00

After writing about 500 initial lines of code in designing a database schema for a web app, I realized I'd gone and added 150 lines of JavaScript code—for handling 30 lines of JSON data I'd written above that—all directly in my `.sql` file.

I often create new 'untitled' documents for temporary storage, but was curious if others might find themselves writing something completely different smack in the middle of their source? Productive tangents?

I subsequently relocated the code into its own private `HTML` file, where it can now actually be tested to see if the code runs and all...

Keith D Commiskey
https://keithdc.com

--Update--

The code took a few adjustments, but was able to run as intended. I stripped it out six hours later and streamlined the entire approach, although I wouldn't have found that streamlined approach had I not gone through the pain of initially overthinking it. I will blog the resulting coding tool within a couple days (hint: it's on CodePen).

Instructing My First Tutoring Course [2019 Sep-Oct]

2020-01-14T04:34:00.001-08:00

The results of teaching my first tutoring course:

Background: I took on teaching this class less than two weeks prior to the class starting. I had never taken the course before. I had never formerly taught a class before. The only thing that caught me up was the second week in my correcting some misleading coding standards.

I believe the end results (and comments) sum up a lot about me. I start out good, I take a slump (a learning curve to thoroughness), and I come roaring back to finish out the last half of the project with zest, and a much better comprehension of the entire situation (...and accounting for curriculum adjustments).

All in all, I believe—and hope—the students learned something, and if they continue to pursue web development, I hope their learning experience has helped them in their efforts.

Keith D Commiskeyhttps://keithdc.com

COURSE DELIVERIES

HTML, CSS and JavaScript in Reno

From September 9th, 2019 to October 5th, 2019
Saturday workshops from 9am to 1pm
Reno Collective (1515 Plumas St)
You CONFIRMED teaching this course on September 3rd (change)

COURSE DETAILS

HTML, CSS and JavaScript | Monday Sep 9th to Saturday Oct 5th
Instructor: Keith Commiskey
Student Group: RENO-2019-08
Workshops: Reno Collective | 1515 Plumas St | Saturday from 9am to 1pm
Total number of students enrolled: 4
Weekly Completions: 4 (0 missing) 3 (1 missing) 3 (1 missing) 3 (1 missing)
Weekly Rating:

Wk 1: 4.25 (4 responses)

Wk 2: 3.8 (5 responses)

Wk 3: 5 (3 responses)

Wk 4: 4.67 (3 responses)

Average Rating: 4.43

INSTRUCTOR FEEDBACK

Week 0 Feedback

> Good so far!
> Positive
> More cohesive presentation of written material would help. 4-5 different apps were used to present 'written' course material. At least 3 different text editors were used.

Week 1 Feedback

> Nothing
> I would love a little bit more preparation with the assignment in advance so that troubleshooting is easier.
> I wish the instructor was more prepared for the class. It seems like he has a wealth of knowledge, but doesn't seem like he reviews the class material. It is a little frustrating having your instructor tell you to add tags around your labels to get your CSS to work - then your CSS still does not work. Only to find out after we briefly went over the 'answers' that I never needed to add tags to begin with. Instead I should have focused my time on correcting the HTML surrounding my labels...

I understand there are many ways to do things with web dev and I am by no means saying the instructor is bad. He is very knowledgeable and does answer many questions.
> More of a focused approach for the workshop assignment, so that we all proceed with solving issues with our code in the same direction. Otherwise it's hard to work with others to understand things better when we all diverge so far off course, this early in the game.

Week 2 Feedback

> Very satisfied. I felt the instructor did a great job explaining the JS topics that we were covering. He also did an excellent job in answering all of the questions that I had. He answered some more advanced questions for me that were not covered in the videos and it really helped me make some more connections.
>
> Keith has been magical in helping to explain some of the nuanced topics that the videos gloss over. He spent like three hours on the phone with me the other night explaining JavaScript syntax to me.

Week 3 Final Feedback

> Thank you! I appreciate how patient you were with me while I asked question after question.
> Keith was awesome - a lot of questions were thrown at him and I think he did a great job in answering them. He seemed like he warmed up and got more comfortable on classes 3 and 4.
The way he answered my questions were never really "here is the answer", they were more "here is some information, try this" which gave me an opportunity to figure out the bigger problem in smaller pieces - which I appreciated.
>

CSS3 3D Books on a Shelf

2019-11-03T15:50:00.000-08:00

In an attempt to spice up a navigation system I'm working on, I took to CodePen to experiment with some CSS-based 3D books on a shelf.

Although I believe the books turned out pretty good, I dashed the effort in lieu of a more simplistic approach. That aside, figured I would share the books I came up with, primarily because web development projects are fun to share.

Development Phases

Sources

The base for this development effort was in part thanks to Intro to CSS 3D Transforms by David DeSandro. Although I completely overhauled and applied all types of modifications, David's examples provided the initial insights.

Gradient lines for the edged faces on books is thanks to moz://a's MDN web docs.

I originally tried a pseudo :after class for the shelf, but due to perspective incompatibilities, I ended up only using this for the soft blur between books. The pseudo class approach I tried was based on this Stack Overflow: Answer by jme11 with a Demo on Bootply

See the Pen Shelves with Taller Books by Keith D Commiskey (@KeithDC) on CodePen.

-Keith D Commiskey
https://keithdc.com

Update [2019-11-07]

The more simplistic approach I took was with rotating just one plane, as opposed to animating 3, 4, 5, or 6 panes on each book as I was doing above. Yet as simplistic as they may be, I believe they turned out pretty good (for a non-designer).

Triple Web App Revival: Keep Track; Pick-a-Meal; Guess Right

2019-10-20T02:02:00.002-07:00

Triple Web App Revival: Keep Track; Pick-a-Meal; Guess Right

I develop web apps for continual daily training and as a way to stay productive---and because they can sometimes produce fun and useful tools to use in life. Sadly, two of those utilities, and one of my games took to the sidelines last year. Fortunately, however, I was finally able to devote some time to getting them all up and running once again.

Tech Details: tl;dr---The PHP EOL crept up on me, and in upgrading PHP, I also had to upgrade Laravel, which I knew was going to take some time (turned out two weeks' worth, but could've been worse). Unfortunately I don't recall much about all the controllers I wrote, and I likely understand less about traits and middleware than ever before. But alas, I am not a Laravel Developer; I know enough to get my apps working (usually).

It was a delight to see all three sites spin back up---the blue on KeepTrack was beautiful; the coffee cup on Pick-a-Meal gorgeous; and the depth the letter cubes project on Guess Right seduced me into playing a few games for fum.

I did cut out the Facebook login, but alas, I need to shift back to my job search. I did add in e-mail verification, which I believe was a major step up.

And without further ado... readers and eaters, I bring you, the revival of ...

Keep Track - https://kdcinfo.com/keeptrack
Keep Track is a free online personal inventory manager for keeping track of all types of 'stuff'... "Your stuff!"

Pick-a-Meal - https://kdcinfo.com/pickameal
Can't decide what to eat? Can't decide where to eat? Let Pick-a-Meal pick it for you!

Guess Right - https://kdcinfo.com/guessright
Guess Right and Be Happy! Instructions: 1) Pick the right letters and be happy. 2) Choose the wrong letters and try again. Life is simple! Stop thinking and just guess. It's fun, fun, fun!!!

I also added all three of these back to my web app showcase.

Always open to input.

-Keith D Commiskey
https://keithdc.com

P.S. On a side note, a couple days back I also devised a resume versioning system and wrote up a Version Conversion Utility. It's available (with tl;dr instructions) on CodePen. https://codepen.io/KeithDC/pen/pooNjbm

Solve for 'x' with the Equation Calculator

2019-10-17T14:58:00.000-07:00

Tweet Tweet !!:

The "Equation Calculator" is the best "solve for x" calculator I've come across: https://www.symbolab.com/solver/equation-calculator ... and it takes full URL calculations https://www.symbolab.com/solver/equation-calculator/%5Cleft(x-25000%5Cright)%5Ccdot0.05%3D0.25x complete with step-by-step solutions. (#Symbolab; #Eqsquest)

— Keith D Commiskey (@kdcinfo) October 17, 2019

Although learning the Solver on a TI-83 or -84 is just as helpful (especially being that's allowed during tests).

For the Solver, where (x-25000) * 0.05 = 0.25x
... just let Solver's 0= (x-25000) * 0.05 - 0.25x

-keithdc.com

Opera Browser Disables Keystrokes in other Apps [O-63 / W-1809]

2019-09-12T14:10:00.001-07:00

Recently I've been experiencing intermittent issues in trying to use certain keystrokes in a few of my more common Windows-based applications. The two primary shortcuts I found that I cannot use are Ctrl-Shift-Home and Ctrl-Shift-End. These two shortcuts should highlight from the current cursor position to either the top or bottom of the available selection set, respectively.

I checked all types of OS-level keyboard settings. After closing a few apps in an effort to reboot, I suddenly found I could use those keystrokes again! So I brought back up my apps . . . one at a time. The moment I reopened Opera, the keystrokes disabled.

I tried disabling a lot of the various settings in Opera, one of which required a restart. I could not find a setting that gave me back these keystrokes.

Strangely, Shift-Home and Shift-End both work. Ctrl-Home and Ctrl-End also both work. They just don't all work together. Additionally, all the Shift/Ctrl arrow keys also function fine.

I am in the dark as to why those keystrokes are disabled at the OS level affecting every application (including Opera itself) while Opera is open. Fortunately I only use the Opera browser for periodic web development testing and for playing WwF (via Facebook) with my mom. :D

System: Windows 10 Home 1809 17763.737
Opera: 63.0.3368.71
Test Apps: Notepad; Wordpad; Sublime Text 3; Browser input areas.

#NowIKnow #TechNuances

Pet Ref App: A Customizable Reference Tool

2019-08-23T18:45:00.001-07:00

Introducing the "Pet Ref App": A customizable reference tool.

The Pet Ref App is an all-in-one location for pet-related notes and meds.

Easy to use, the web app can be used in vet offices, by students in pet-related fields, or as personal notes or school references.

Now Open! As of Thursday, August 22, 2019, the Pet Ref App site officially launched and is ready for sign-ups.

Web App Background

The Pet Ref App resource tool was initially created to help with gaining an understanding of "what means what" when first starting to work with pets. There is so much information involved in caring for pets, and most times all of this information is strewn across books, binders, and websites, or worse, the information is only shared verbally amongst individuals.

This made learning about pet care challenging. This reference app was an attempt to centralize the information, while making it accessible via any computer or phone (#lovetheweb).

In demonstrating the reference tool, it appeared others could benefit from the information as well. An administrative tool with preset logins was then created to allow others the opportunity to update the information as well. This allowed those with even more knowledge to contribute, thus improving the quality of the information gathered.

In thinking broader, it became clear that one potential path for the app was in providing it to the general public—thus, petrefapp.com was born. A home page was created, and a demo site provided (which doubles as a 'new account' base).

One advertisement is shown on the "View Mode" page to try to help offset site operating costs. This ad can also be turned off by the account's Admin user by way of a very small paid subscription. But the information is available to those with ad blockers (and those running Opera) just as well. Why not block them? Because that's not what this app is about. The core kdcinfo.com policy (the parent of petrefapp.com) isn't about forcing ads on people—making money on sites comes second to providing a quality tool that others can benefit from. Additionally, even with ad blockers, people are encouraged to donate as well, which certainly helps to contribute to the site's longevity.

Being a brand new site, please use the Contact Form (upper-right corner and footer) should you discover any issues, or just for general feedback. Thanks for reading!!

- Keith D Commiskey, Creator
| https://petrefapp.com
| https://keithdc.com

Keith D Commiskey

Blog Relocated from Blogspot/Blogger

ChatGPT gets Expressive with Emojis

Flutter: The perfect take!

A Tour of some of Dart 3's Impactful New Features

Dart and OO: Design Patterns, Refactoring, and Code Smells

TIL — `.nonNulls`

From the source code:

dart:collection

Migrating to Dart's Null Safety

Converting nullable dynamic Lists inside Maps

The Appreciation of a Framework

. . . that inspires productivity.

Further Reading: Mobile App Details

KD-reCall Details

Related Blog Posts

Research References

Wrote an App; Got a Mac; Wrote another App

Simple Reminders

Pilot App

Second Pilot

First Mac

App Availability

Next Up!

Architectural Challenges: My Flutter Frankenstein

? ? ? Options ? ? ?

! ! ! WOOT ! ! !

References

"Hello Suite"

Recommended course of action:

"Just start building something . . . anything!"

My First Flutter —and mobile— App (...Suite)

The suite's theme: Simple Reminders

Project Immensity: Confirmed

I got a Flutter Full Course Certification—Now what?!

New Browser Extension: Too-Much-Time

Browser Extension: Too-Much-Time

Situational Examples:

Installation

Instructions and FAQ

Learning Mobile App Development via Flutter

Learning: Mobile App Development - via Flutter

Flutter 101: The Course

Icing on the Cake

Course Completion Certificate

Flutter Learning Path Logistics

Next Phase

React Component Marries Chrome Browser Extension

SPA History: The Marriage

SPA Integration Caveats

The Chronus of it All

Introducing: The Book Length Classification and Word Count Tool

JavaScript Informational: Best of the Basics

Best of the Basics: JavaScript Informational

Start with a Solid Base

An Important Note

The Base

It's All About the Data

Understanding Data Types

And without further ado...

Introducing... Your Data Types!

Some Clarity

Don't change data types !!!

To the Code!

Comparing ... Stuff

Coding Styles; Standards vs. Preferences

Optional: Curly Braces (grouping bits of code)

Optional: Semicolons

Parentheses Matter!

Miscellaneous Tidbits

Naming Conventions

Comments are Public

<u>

Copy/Paste

Block vs. Inline vs. Inline-Block Elements

Understanding "block" vs. "inline" vs. "inline-block" elements is crucial to front-end web development.

Padding, Margin

Border; Outline

New HTML Element Types: YMMV (your miles may vary)

Tools