NetNewsWire and Feedbin | CSS-Tricks

NetNewsWire and Feedbin | CSS-Tricks

NetNewsWire is one of the classic RSS apps, debuting in 2002. I was pretty stoked when it went 5.0 and was open-sourced in August 2019! You can snag it right here. (Sorry, Mac only.)

It’s super nice, is fast, and looks great. It has just the right features.

But… I thought, at least at first, that really prefer websites for reading RSS content. I have multiple machines. I have mobile devices. I don’t want my RSS to be limited to my laptop, I want an online service.

NetNewsWire on my Mac

Well! I found out that NetNewsWire syncs with my favorite website for RSS: Feedbin. The syncing works flawlessly. Both unread items and all the organization. In fact, the UI for organizing feeds is so nice in NetNewsWire that I managed everything there and was pleasantly surprised how it all synced perfectly with Feedbin.

Feedbin on the web

I know a lot of people miss Google Reader, but I think we’ve arrived at an even better place after all these years. The Google Reader UI for Google Reader was OK, but the main benefit was that it was the central place where everything synced together. That meant people could experiment by building readers and could use whatever they wanted. Feedbin clearly has APIs that can handle those types of things, so perhaps it could become that central hub service, which would be awesome.

I use Reeder on iOS, which also syncs with Feedbin. The central hub is real.

Reeder on iOS

I know a lot of people love Feedly too, which is also good. I just click with Feedbin better. I particularly like the Feedbin feature where it gives me an email address I can have newsletters sent to, letting me subscribe to a ton of them the same way I do with sites.

Source link

Post image

Tavernin Game Logo 2020: Final? : graphic_design

For context, here is the old logo…

Post image

Tavernin Logo 2016

The game is kind of a nerdy version of poker so I wanted it to have that sort of western meets vegas feel.

Post image

2020 First Attempt

I thickened up the letters and attempted to give it a fatter silhouette but a lot of people said the T looked too much like a J and I couldn’t unsee it after it was pointed out. Another user also gave me the idea to make the T and A at the start more closely mirror the N at the end.

Post image

2020 Final?

This is where I ended up! I’m a little worried I may have pushed the design too hard and made it too busy.

Source link

How to Create a Nested Grid Using Angular 8

How to Create a Nested Grid Using Angular 8

In this article, we will learn how we create a nested grid in Angular 8. We are using the grid list to separate the page into small sections. In each section, we want to place a different component, where one of these components is another smaller grid.


  • Basic knowledge of Angular.
  • Visual Studio Code must be installed.
  • Angular CLI must be installed.
  • Node.js must be installed.

Building the Frontend

Step 1

Let’s create an Angular project using the following npm command.

Step 2

Open the newly created project in Visual Studio code and install Bootstrap in the project. 

Now, open styles.css file and add the Bootstrap file reference. To add a reference in styles.css file, add this line:

You may also like:
Angular 7 + Spring Boot Application: Hello World Example.

Step 3

Now, let’s create a new component by using the following command.

Step 4

Now, create a new service using the following command.

Step 5

Now, open the product.component.html and paste the following code to see the HTML template. 

Step 6

After then open product.component.ts file and add the following code in this file where our logic has been written.

Step 7

Next open product.component.css file and paste the code for styling.

Step 8

At last, open product.service.ts file and add services to call our API.


Step 9

Its time to see the output in your terminal type ng serve -o to compile and open it in the browser. After loading our page, you can see the output like in the below images.



Here, I am taking a product, for example. The grid data is related to a product and its corresponding nested grid has information related to their parent grid.

You can check a nested grid by clicking the plus icon of the parent grid so that you can see the resulting nested grid based on the index, (i.e if you click on the very first plus icon,  you can only see its first product-related information. If you click on the second plus icon, then their product-related information would show.)

Now, the frontend is done and it’s time to add server-side code.

WEB API — Create an ASP.NET Core Application

 Follow these steps to create an ASP.NET Core application.

Step 1

In Visual Studio 2019, click on File -> New -> Project.


Step 2

Choose the Create option and select ASP.NET web application.


Step 3

Select Web API and click Ok.


Step 4

Now right click on controller and then add a new item.


Step 5

Choose Entity Data Model and then click on Add.


Step 6

The next step is the EF Designer, just click on next.


Step 7

A new pop-up will appear. Click on next. If yours isn’t established, then click on a new connection


Step 8

Copy your database connection server name and paste it in the server name textbox. You will see all the databases available — select your database and click ok.  


Step 9

The next popup will show. Paste your database server name, choose the correct database, test the connection, and click next. Here, in the new screen, select your tables and store the procedure. Then, click finish.

Our next step is to right-click on the controllers folder and add a new controller. Name it “Product controller” and add the following namespace in the student controller.

Here is the complete code for getting all the product data and their nested product information data. 

Complete Product controller code 


Now, its time to enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the Microsoft.Asp.Net.WebApi.Cors package.

If you are running your frontend application on a different port than your server, then, to avoid a Cross-Origin-Resource-Sharing issue, you have to add the following code in the webapiconfig.cs file:


Building the Backend

Here, we will continue to build out our backend with SQL server. The very first step is to create a database.

Create a Database

Let’s create a database on your local SQL Server. I hope you have installed SQL Server 2017 in your machine (you can use SQL Server 2008, 2012, or 2016, as well).

Step 1

Create a database, product.

Step 2

Create a product table using the following code:

Make product ID the primary key.

Step 3

Create a product information table using the following code:

Now, it’s time to add some store procedures.

Step 4

All you have to do is paste the following code in a new query:

With this step, we have successfully completed our front end, web API, and back end coding. 


In this article, I have discussed how to create a nested grid in Angular 8 Application. In my next article, which is a continuation of this part, we are going to learn about the JavaScript function tolocalestring() by changing the price by country, which will give their appropriate currency format.

Please give your valuable feedback/comments/questions about this article. Please let me know if you liked and understood this article and how I could improve it.

Further Reading

Source link

The Design Squiggle

The Design Squiggle

The Story of the Squiggle.

In the early-nighties, a decade of grunge, raves and hip-hop, I was working as an illustrator and designer for Xerox Europarc in Cambridge, UK. A European outpost of the famous Palo Alto R&D Lab. Where it was explained to me their process of designing innovative technology solutions. Things like the Personal Computer, the GUI, Interpress, The Laser Printer, etc. Their process began with an abstract notion, through research moved to a concept and then finally ended with the design. So as I pursued my own career in design, I began to write proposals and pitch the process of design using the terms: Abstract, Research, Concepts and then Design. However, back then clients were only interested in the last bit: the design. Having no interest in any prior steps to the process. For them, as it was for many, design was the simple act of making ordinary things pretty.

The Squiggle came to life at the beginning of the next decade when I had the opportunity to design some complex desktop software. And the need to convince the client of the value of the process of design, in less than thirty seconds. (Their limit not mine) So I created the sketch. Picking one from a handful I’d made using a Wacom tablet, I labeled it, and used it to compel the client to allow us to proceed methodically in designing their software.

When I was working at IDEO a few years later, a colleague surprised me by having found it online (somehow) and using it for the IDEO Intern ’06 T-Shirts. After that I became aware of people using it and looking for its source. So I published it with a Creative Commons Copyright, making it easy for people to freely use it with attribution.

I’ve personally used the Design Squiggle in almost every client presentation, including in Japan and Korea. It also helped me tell the story of our journey in the two-year long Future of Fish design project. (new animation below needed)

The illustration seems to accurately convey the messiness and uncertainty in the creative process as well as the goal of focus and clarity. I’ve been humbled to see it used in books. Including such titles as, Business Model Generation, or the excellent Make it New by Barry Katz. You can find a list on the In Use page.

There are some Squiggle T-Shirts out there. My favorite is the Stanford Graduate Design Program’s ME313 class of 2015 using it for their Loft T-Shirt.

Please visit the download page for usage terms and how to contact me for permission to use it in publications. (When your publisher insists on getting a Permission to Publish license signed by me.)

Source link


How to Easily Migrate From JavaScript to TypeScript

If you’ve been working in the software development industry (especially if you’re doing a lot of frontend work) in the past couple of years, it’s most likely you worked, or still do, on a project in JavaScript. And by now, you’re more than tired from it. Therefore, in this article, I would like to talk about how to migrate from JavaScript to TypeScript.

Don’t get me wrong, JavaScript is an extremely flexible and easy to learn and use language, with one of the biggest communities out there. But, it also comes with a bunch of pitfalls you eventually end up running into, like it’s loose typing that can result in “odd” behavior. And there are some really interesting languages that transpile to JS and can be used on top of it, such as Dart, Elm, or TypeScript, just to name a few.

You may also like:
New Features in TypeScript 3.7 and How to Use Them.

How to Easily Migrate from JavaScript to TypeScript

It’s much simpler to abandon JS when starting a new project, where you don’t have to worry about things like retro-compatibility, or an app’s maintenance in production. In that case, you can try many alternatives, and choose the one you like the best.

Nevertheless, if you must continue to work on an old project, you can begin to migrate from JavaScript to TypeScript, in a “slow” manner, file by file, or adding TypeScript only in the new files you create.

This is possible because TypeScript is a superset of JavaScript, meaning that any JS code is also valid TS code (assuming the TS configuration is set to be compatible with it).

Now, I will present a simple way to add TypeScript to a project, without the need to modify our configuration of webpack, gulp, or whatever our build system is.

Assuming you use npm as a package manager in your project, first thing we need to do is to add TypeScript as a dependency (if not, you can install it globally):

Note: depending on what your project is, you might also want to install “@types” for other libraries you have dependencies on. For example, if you have a react-redux project, you might need to install the following:

After that, we need to add a tsconfig.json file at the root directory of the project. That file contains compiler options needed to convert TS to JS. In order to have the least issues, use the following configuration to make JS code compatible with TS:

Note: You might need to change some bits based on your project. More on that here.

Now, add the following script in your package.json:

And run it. It will run a watcher that transpiles all .ts (or .tsx) files into regular .js files. Also, it will generate these files at the same path that of original; therefore, all imports and all build processes you might have will work as before, since the .ts files are completely ignored, and the result of the transpilation is used instead. The generated file structure has the following structure:

Now, all we need to do is to create our first ‘.ts’ file by changing the extension of an existing one that we want to migrate to TypeScript. Alternatively, we can also create a blank file to start working in our application.

This does not bring much change. We still can put normal JS code and get no help from what TypeScript has to offer. In order for TS to force us to actually type our code, we need to change the tsconfig.json file. In particular, we will focus on two compiler options that will force our code to be actually typed:

Let’s imagine we have a simple mortgage simulator that tells the user if, given his financial situation, a mortgage is viable or not. For that, we will have a function that will retrieve somehow the savings user has:

And a function to decide if a mortgage is feasible:

But, to make it actually work, we would need to check if the input exists. And also if it’s a number or not. The same applies for the return value from getSavings, since we don’t know the return type of that function either. Therefore, our code could end up looking something like this:

This looks quite terrible.

But, if we activate the noImplicitAny compiler option, it would no longer be necessary to check if the input value and the return from getSavings are numbers, so the function could look something like this:

This is an improvement, since the compiler can help us to avoid some mistakes and typos, not allowing us to call the function with a string for example:

Unfortunately, null and undefined are still in the domain of every type, therefore it would be possible to do this:

To fix that, we need to activate the other option in the tsconfig.json file we mentioned, strictNullChecks.

Now, doing the call to the function with null, would end up getting caught by the compiler:

That means that we don’t need to check for null types, which simplifies the logic to something like:

This is just a small glance at what TypeScript can give you if you migrate your project from plain JS to it.

Further Reading

Source link

How We Tagged Google Fonts and Created

How We Tagged Google Fonts and Created

GooFonts is a side project signed by a developer-wife and a designer-husband, both of them big fans of typography. We’ve been tagging Google Fonts and built a website that makes searching through and finding the right font easier.

GooFonts uses WordPress in the back end and NuxtJS (a Vue.js framework) on the front end. I’d love to tell you the story behind and share a few technical details regarding the technologies we’ve chosen and how we adapted and used them for this project.

Why we built GooFonts

At the moment of writing this article, there are 977 typefaces offered by Google Fonts. You can check the exact number at any moment using the Google Fonts Developer API. You can retrieve the dynamic list of all fonts, including a list of the available styles and scripts for each family.

The Google Fonts website provides a beautiful interface where you can preview all fonts, sorting them by trending, popularity, date, or name. 

But what about the search functionality? 

You can include and exclude fonts by five categories: serif, sans-serif, display, handwriting, and monospace.

You can search within scripts (like Latin Extended, Cyrillic, or Devanagari (they are called subsets in Google Fonts). But you cannot search within multiple subsets at once.

You can search by four properties: thickness, slant, width, and “number of styles.” A style, also called variant, refers both to the style (italic or regular) and weights (100, 200, up to 900). Often, the body font requires three variants: regular, bold, and italic. The “number of styles” property sorts out fonts with many variants, but it does not allow to select fonts that come in the “regular, bold, italic” combo.

There is also a custom search field where you can type your query. Unfortunately, the search is performed exclusively over the names of the fonts. Thus, the results often include font families uniquely from services other than Google Fonts. 

Let’s take the “cartoon” query as an example. It results in “Cartoon Script” from an external foundry Linotype.

I can remember working on a project that demanded two highly stylized typefaces — one evoking the old Wild West, the other mimicking a screenplay. That was the moment when I decided to tag Google Fonts. 🙂

GooFonts in action

Let me show you how GooFonts works. The dark sidebar on the right is your  “search” area. You can type your keywords in the search field — this will perform an “AND” search. For example, you can look for fonts that are at once cartoon and slab. 

We handpicked a bunch of keywords — click any of them! If your project requires some specific subsets, check them in the subsets sections.  You can also check all the variants that you need for your font.

If you like a font, click its heart icon, and it will be stored in your browser’s localStorage. You can find your bookmarked fonts on the page. Together with the code, you might need to embed them.

How we built it: the WordPress part

To start, we needed some kind of interface where we could preview and tag each font. We also needed a database to store those tags. 

I had some experience with WordPress. Moreover, WordPress comes with its REST API,  which opens multiple possibilities for dealing with the data on the front end. That choice was made quickly.

I went for the most straightforward possible initial setup. Each font is a post, and we use post tags for keywords. A custom post type could have worked as well, but since we are using WordPress only for the data, the default content type works perfectly well.

Clearly, we needed to add all the fonts programmatically. We also needed to be able to programmatically update the fonts, including adding new ones or adding new available variants and subsets.

The approach described below can be useful with any other data available via an external API. In a custom WordPress plugin, we register a menu page from which we can check for updates from the API. For simplicity, the page will display a title, a button to activate the update and a progress bar for some visual feedback.

 * Register a custom menu page. 
function register_custom_menu_page() {
    'Google Fonts to WordPress', 
    'WP GooFonts', 
  function() { ?>        
    <h1>Google Fonts API</h1>
    <button type="button" id="wp-goofonts-button">Run</button>
    <p id="info"></p>        
    <progress id="progress" max="100" value="0"></progress>
  <?php }
add_action( 'admin_menu', 'register_custom_menu_page' );

Let’s start by writing the JavaScript part. While most of the examples of using Ajax with WordPress implements jQuery and the jQuery.ajax method, the same can be obtained without jQuery, using axios and a small helper Qs.js for data serialization.

We want to load our custom script in the footer, after loading axios and qs:

add_action( 'admin_enqueue_scripts' function() {
  wp__script( 'axios', '' );
  wp_enqueue_script( 'qs', '' );
  wp_enqueue_script( 'wp-goofonts-admin-script', plugin_dir_url( __FILE__ ) . 'js/wp-goofonts.js', array( 'axios', 'qs' ), '1.0.0', true );

Let’s look how the JavaScript could look like:

const BUTTON = document.getElementById('wp-goofonts-button')
const INFO = document.getElementById('info')
const PROGRESS = document.getElementById('progress')
const updater = {
  totalCount: 0,
  totalChecked: 0,
  updated: [],
  init: async function() {
    try {
      const allFonts = await axios.get('')
      this.totalCount =
      INFO.textContent = `Fetched ${this.totalCount} fonts.`
      this.updatePost(, 0)
    } catch (e) {
  updatePost: async function(els, index) {
    if (index === this.totalCount) {
    const data = {
      action: 'goofonts_update_post',
      font: els[index],
    try {
       const apiRequest = await, Qs.stringify(data))
       PROGRESS.setAttribute('value', Math.round(100*this.totalChecked/this.totalCount))
       this.updatePost(els, index+1)
    } catch (e) {

BUTTON.addEventListener('click', () => {

The init method makes a request to the Google Fonts API. Once the data from the API is available, we call the recursive asynchronous updatePost method that sends an individual font in the POST request to the WordPress server.

Now, it’s important to remember that WordPress implements Ajax in its specific way. First of all, each request must be sent to wp-admin/admin-ajax.php. This URL is available in the administration area as a global JavaScript variable ajaxurl.

Second, all WordPress Ajax requests must include an action argument in the data. The value of the action determines which hook tag will be used on the server-side.

In our case, the action value is goofonts_update_post. That means what happens on the server-side is determined by the wp_ajax_goofonts_update_post hook.

add_action( 'wp_ajax_goofonts_update_post', function() {
  if ( isset( $_POST['font'] ) ) {
    /* the post tile is the name of the font */
    $title = wp_strip_all_tags( $_POST['font']['family'] );
    $variants = $_POST['font']['variants'];
    $subsets = $_POST['font']['subsets'];
    $category = $_POST['font']['category'];
    /* check if the post already exists */
    $object = get_page_by_title( $title, 'OBJECT', 'post' );
    if ( NULL === $object ) {
      /* create a new post and set category, variants and subsets as tags */
      goofonts_new_post( $title, $category, $variants, $subsets );
    } else {
      /* check if $variants or $subsets changed */
      goofonts_update_post( $object, $variants, $subsets );

function goofonts_new_post( $title, $category, $variants, $subsets ) {
  $post_id =  wp_insert_post( array(
    'post_author'  =>  1,
    'post_name'    =>  sanitize_title( $title ),
    'post_title'   =>  $title,
    'post_type'    =>  'post',
    'post_status'  => 'draft',
  if ( $post_id > 0 ) {
    /* the easy part of tagging ;) append the font category, variants and subsets (these three come from the Google Fonts API) as tags */
    wp_set_object_terms( $post_id, $category, 'post_tag', true );
    wp_set_object_terms( $post_id, $variants, 'post_tag', true );
    wp_set_object_terms( $post_id, $subsets, 'post_tag', true );

This way, in less than a minute, we end up with almost one thousand post drafts in the dashboard — all of them with a few tags already in place. And that’s the moment when the crucial, most time-consuming part of the project begins. We need to start manually add tags for each font one by one.
The default WordPress editor does not make much sense in this case. What we needed is a preview of the font. A link to the font’s page on also comes in handy.

custom meta box does the job very well. In most cases, you will use meta boxes for custom form elements to save some custom data related to the post. In fact, the content of a meta box can be practically any HTML.

function display_font_preview( $post ) {
  /* font name, for example Abril Fatface */
  $font = $post->post_title;
  /* font as in url, for example Abril+Fatface */
  $font_url_part = implode( '+', explode( ' ', $font ));
  <div class="font-preview"> 
    <link href="<?php echo"' . $font_url_part . '&display=swap'; ?>" rel="stylesheet">
      <h2><?php echo $font; ?></h2>
      <a href="<?php echo"' . $font_url_part; ?>" target="_blank" rel="noopener">Specimen on Google Fonts</a>
    <div contenteditable="true" style="font-family: <?php echo $font; ?>">
      <p>The quick brown fox jumps over a lazy dog.</p>
      <p style="text-transform: uppercase;">The quick brown fox jumps over a lazy dog.</p>
      <p>1 2 3 4 5 6 7 8 9 0</p>
      <p>& ! ; ? {}[]</p>
<?php }

add_action( 'add_meta_boxes', function() {
    'font_preview', /* metabox id */
    'Font Preview', /* metabox title */
    'display_font_preview', /* content callback */
    'post' /* where to display */

Tagging fonts is a long-term task with a lot of repetition. It also requires a big dose of consistency. That’s why we started by defining a set of tag “presets.” That could be, for example:

  /* ... */
  comic: {
    tags: 'comic, casual, informal, cartoon'
  cursive: {
    tags: 'cursive, calligraphy, script, manuscript, signature'
  /* ... */

Next with some custom CSS and JavaScript, we “hacked” the WordPress editor and tags form by enriching it with the set of preset buttons. 

How we built it: The front end part (using NuxtJS)

The interface was designed by Sylvain Guizard, a french graphic and web designer (who also happens to be my husband). We wanted something simple with a distinguished “search” area. Sylvain deliberately went for colors that are not too far from the Google Fonts identity. We were looking for a balance between building something unique and original while avoiding user confusion.

While I did not hesitate choosing WordPress for the back-end, I didn’t want to use it on front end. We were aiming for an app-like experience and I, personally, wanted to code in JavaScript, using Vue.js in particular.

I came across an example of a website using NuxtJS with WordPress and decided to give it a try. The choice was made immediately. NuxtJS is a very popular Vue.js framework, and I really enjoy its simplicity and flexibility. 
I’ve been playing around with different NuxtJS settings to end up with a 100% static website. The fully static solution felt the most performant; the overall experience seemed the most fluid.That also means that my WordPress site is only used during the build process. Thus, it can run on my localhost. This is not negligible since it eliminates the hosting costs and most of all, lets me skip the security-related WordPress configuration and relieves me of the security-related stress. 😉

If you are familiar with NuxtJS, you probably know that the full static generation is not (yet) a part of NuxtJS. The prerendered pages try to fetch the data again when you are navigating.

That’s why we have to somehow “hack” the 100% static generation. In this case, we are saving the useful parts of the fetched data to a JSON file before each build process. This is possible, thanks to Nuxt hooks, in particular, its builder hooks.

Hooks are typically used in Nuxt modules:

/* modules/beforebuild.js */

const fs = require('fs')
const axios = require('axios')

const sourcePath = 'http://wpgoofonts.local/wp-json/wp/v2/'
const path = 'static/allfonts.json'

module.exports = () => {
  /* write data to the file, replacing the file if it already exists */
  const storeData = (data, path) => {
    try {
      fs.writeFileSync(path, JSON.stringify(data))
    } catch (err) {
  async function getData() {    
    const fetchedTags = await axios.get(`${sourcePath}tags?per_page=500`)
      .catch(e => { console.log(e); return false })
  /* build an object of tag_id: tag_slug */
    const tags =, cur) => {
      acc[] = cur.slug
      return acc
    }, {})
  /* we want to know the total number or pages */
    const mhead = await axios.head(`${sourcePath}posts?per_page=100`)
      .catch(e => { console.log(e); return false })
    const totalPages = mhead.headers['x-wp-totalpages']

  /* let's fetch all fonts */
    let fonts = []
    let i = 0
    while (i < totalPages) {
      const response = await axios.get(`${sourcePath}posts?per_page=100&page=${i}`)
  /* and reduce them to an object with entries like: {roboto: {name: Roboto, tags: ["clean","contemporary", ...]}} */
    fonts = (fonts).reduce((acc, el) => {
      acc[el.slug] = {
        name: el.title.rendered,
        tags: => tags[i]),
      return acc
    }, {})

  /* save the fonts object to a .json file */
    storeData(fonts, path)

  /* make sure this happens before each build */
  this.nuxt.hook('build:before', getData)
/* nuxt.config.js */
module.exports = {
  // ...
  buildModules: [
// ...

As you can see, we only request a list of tags and a list posts. That means we only use default WordPress REST API endpoints, and no configuration is required.

Final thoughts

Working on GooFonts was a long-term adventure. It is also this kind of projects that needs to be actively maintained. We regularly keep checking Google Fonts for the new typefaces, subsets, or variants. We tag new items and update our database. Recently, I was genuinely excited to discover that Bebas Neue has joint the family. We also have our personal favs among the much lesser-known specimens.

As a trainer that gives regular workshops, I can observe real users playing with GooFonts. At this stage of the project, we want to get as much feedback as possible. We would love GooFonts to be a useful, handy and intuitive tool for web designers. One of the to-do features is searching a font by its name. We would also love to add a possibility to share the bookmarked sets and create multiple “collections” of fonts.

As a developer, I truly enjoyed the multi-disciplinary aspect of this project. It was the first time I worked with the WordPress REST API, it was my first big project in Vue.js, and I learned so much about typography.  

Would we do anything differently if we could? Absolutely. It was a learning process. On the other hand, I don’t think we would change the main tools. The flexibility of both WordPress and Nuxt.js proved to be the right choice. Starting over today, I would definitely took time to explore GraphQL, and I will probably implement it in the future.

I hope that you find some of the discussed methods useful. As I said before, your feedback is very precious. If you have any questions or remarks, please let me know in the comments!

Source link