KDCinfo

import 'dart:developer';

import 'package:flutter/material.dart';

/// To recreate:
///
/// 1. Using any Flutter version merged after Mar 7, 2024, (e.g. v3.21),
///    build and run the provided code example on an iOS device or simulator.
/// 2. Tap the title in the AppBar.
///

KDCinfo

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

/// Update: Swapped out bloc with provider.

void main() {
  runApp(const MainApp());
}

KDCinfo

import 'dart:convert';

/// In this codelab, you simplify that more-realistic use case by
/// mocking incoming JSON data with a multi-line string in the documentJson variable.
///
/// https://codelabs.developers.google.com/codelabs/dart-patterns-records#5
///
class Document {
  final Map<String, Object?> _json;
  Document() : _json = jsonDecode(documentJson);

KDCinfo

void main() {
  /// I got the below working as a null safe approach used to 
  ///   convert a `dynamic` List inside a Map, such as one received
  ///   and json.decoded from an API endpoint, into a List of `String`s.
  ///
  /// 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).
  ///

KDCinfo

///
/// Find differences between two Lists with Dart | Flutter
///
/// DartPad: https://dartpad.dev/3b4d345e76d8c7dd3f0f571bdefcdfdb
///

void main() {
  List<double> _current = [1, 2, 3, 4, 7]; // [1,2,3,4,    7]
  List<double> _new = [3, 5, 6, 7, 9, 10]; // [    3,  5,6,7,9,10]

KDCinfo

import 'package:flutter/material.dart';

/// Inspiration for how the DragTarget hovering works goes to:
/// Stack Overflow A: https://stackoverflow.com/a/53981607/638153
/// Stack Overflow Q: https://stackoverflow.com/questions/53979586/flutter-dragtarget-on-hover

final Color darkBlue = Color.fromARGB(255, 18, 32, 45);

void main() {
  runApp(MyApp());

KDCinfo

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() { runApp(MaterialApp(home: TestScreen())); }

class TestScreen extends StatelessWidget {
  ///
  /// Flutter Provider Scope for NotifyListeners()
  ///
  /// The following code shows that Provider only listens on its own ChangeNotifier updates.

KDCinfo

.expander {
  display: flex;
}
  .expander__container {
    width: 100%;
  }
  .expander__content {
    position: relative;
    transition: all .3s ease;
    max-height: 0;

KDCinfo

Automated Tooltips for Form Input Fields

Tooltip auto-generated content is based on input placeholder content.

Source HTML

<input type='text' placeholder='Welcome home, World!'>

Expected/Generated HTML

KDCinfo

Migration to Front-End Engineer 2017-2018

Order of tech: From most recent, to when I began. 67 resources provided at bottom.

The following is a light extract of some resources I used whilst migrating from a Front-End Developer to a Front-End Engineer (aspiring Full-Stack) throughout 2017 and 2018.

Background: Most Front-End Developer positions now require Design experience. And because I have little aptitude for Design, I found the Engineering path goes through deeper JavaScript, frameworks, libraries, and a vast span of technologies and paradigms (the fun truly never ends).

PWA