My First CodePens

And why you might consider joining this community

Why did I join?

CodePen came on my radar when the Flutter functionality was added in.

Until that moment, for me, it was just one of the many HTML/CSS/JS code snippets interpreters out there and didn’t pop out of the crowd.

I didn’t jump right in because I was using DartPad for quick tests of Dart/Flutter code snippets.

In case you don't know, Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

CodePen recently announced a month of Flutter challenges and I like being challenged. There are 4 in a month (1 each week) and touch increasingly complex topics of a chosen subject. This month that subject will be Flutter, the first topic will be around the Stack widget, and the 6th of July 2020 will be the start date for these challenges.

You can share runnable pens (a pen is a runnable code snippet) within Medium and that will help me provide more engaging content. Using this, I can spice things up in my Fluttering Dart series. Its goal is to get someone up to speed with Dart, the programming language that makes Flutter possible.

Next to Flutter, and the HTML/CSS/JS trio, you can also create Vue pens.

The platform provides access to a community of like-minded professionals that can appreciate a useful/wow pice of code. They also can inspire your current and future projects.

I chose to go PRO mostly for the fact that I can add assets for my pens/ and some other features, but for most users and use cases, the free plan will work just fine.

I have no connection with, neither am sponsored by CodePen.

Challenge accepted

1st FlutterPen (a Flutter CodePen) was inspired by my first visit on CodePen's landing page. I liked their way of displaying projects and I challenged myself to recreate, as close as possible, that UI that caught my attention.

Here I found out that I can't import packages from pub.dev. For example, I had to implement the number formatting myself instead of using the one available in the intl:

class NumberFormat {
  static String format(num val) {
    if(val < 999) {
      return val.toString();
    }
    int thousands = val~/1000;
    int hundreds = (val%1000)~/100;
    if(hundreds > 0) {
      return '${thousands.toString()}.${hundreds.toString()}K';
    }
    return '${thousands.toString()}K';
  }
}

2nd one was inspired by the 1st one shared on Twitter. The challenge this time was to recreate my Twitter post containing the 1st FlutterPen. You can see the result below:

Again, the lack of being able to use other packages than the ones from Dart core or Flutter core struck in. I had to implement the date formatting this time, a functionality also available in the intl package:

class DateTimeFormat {

  static const months = const ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  static String getMonthAbbr(int at) {
    String month = months[at-1];
    return month.substring(0,3);
  }

  static String format(DateTime val) {
    num msSince = DateTime.now().millisecondsSinceEpoch-val.millisecondsSinceEpoch;
    Duration since = Duration(milliseconds: msSince);
    if(since.inSeconds < Duration.secondsPerMinute) {
      return '${since.inSeconds}s';
    }
    if(since.inMinutes < Duration.minutesPerHour) {
      return '${since.inMinutes}m';
    }
    if(since.inHours < Duration.hoursPerDay) {
      return '${since.inHours}h';
    }
    return '${getMonthAbbr(val.month)} ${val.day} ';
  }
}

There were many challenges in laying out the elements and reproducing Twitter's UI, like creating the HTML-like URL buttons within the tweet's text or creating the action buttons.

3rd FlutterPen was still inspired by the 1st one shared on Facebook. The challenge this time was to recreate my Facebook post containing the 1st FlutterPen. You can also see the result below:

Here was the first time I added links to the UI elements. For that, I couldn't use the url_launcher package and had to use the 'dart:html' window.open(url, target); method.

import 'dart:html';

class Utils {
  static void open(String url, [String target='_blank']) {
    if(url.isNotEmpty) {
      window.open(url, target);
    }
  }
}

I took this functionality back into my 2nd FlutterPen.

Conclusions

All these 3 FlutterPens were created in my first 3 days on the platform, and it took me a couple of hours each day.

Some things could improve in the experience of CodePen when creating/editing a FlutterPen:

• it would be very useful to be able to shut down the warnings/errors (a lot of them pop while editing an that is very annoying)
• also to provide some sort of auto-completion
• allow the import of packages from pub.dev
• display warnings a bit more gentle (when importing the 'dart:html' package the Avoid using web-only libraries outside Flutter web plugin packages. shows just like an error)
• this also happens when there are unused imports (when importing the 'dart:math' package the Unused import: ‘dart:math’. shows in red and in this case the code won't run; I think that it should also be a warning and allow the code to run)

I noticed that disabling the auto-saving and auto-run features made my overall experience way better.

Editing code in an IDE like Visual Studio Code or IntelliJ IDEA is the way to go when creating an application, though for showcasing code snippets and their results to the world, CodePen might be a great choice.

Tha(nk|t’)s all!