DEV Community

Cover image for Potherca's Weekly Github Stars - 2020 Week 22
Ben Peachey
Ben Peachey

Posted on • Updated on

Potherca's Weekly Github Stars - 2020 Week 22

Week 22

Alt Text

This week's starred repos

Cascadia Code Font

GitHub logo microsoft / cascadia-code

This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.

Cascadia Code

About Cascadia Code

Cascadia is a fun new coding font that comes bundled with Windows Terminal, and is now the default font in Visual Studio as well.

Font Variants

  • Cascadia Code: standard version of Cascadia
  • Cascadia Mono: a version of Cascadia that doesn't have ligatures
  • Cascadia (Code|Mono) PL: a version of Cascadia that has embedded Powerline symbols

For the italic, there is a standard italic and a cursive variant accessible via ss01 (see below).

Font features

Coding Ligatures

Arrow Support

Stylistic Sets

Enabling stylistic sets will vary between applications. For example, in VS Code, you can enable stylistic sets (and other OpenType features) via settings.json:

"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'"

To enable the Cursive form of the italic, here's the code you should use:

"editor.fontLigatures": "'calt', 'ss01'"

If you're using an environment that does not support the ss01 OT feature, one option to consider is…

I've always had an interest in typography, design and the effect they have on my development environment (and thus my developer hapiness). Part of this is developer fonts.

This week I came across a font by Microsoft that I was not yet familiar with: Cascadia Code. First released in July 2019, it looks like this:

Alt Text

I haven't tried it in my development setup yet, but I plan to try it out ASAP!

chart.xkcd

GitHub logo timqian / chart.xkcd

xkcd styled chart lib

Who is using chart.xkcd?

About

Chart.xkcd is a chart library that plots “sketchy”, “cartoony” or “hand-drawn” styled charts.

Check out the documentation for more instructions and links, or try out the examples, or chat with us in Slack

Sponsors

琚致远 | Bytebase | Madao | SecondState

Become a sponsor

Quick start

It’s easy to get started with chart.xkcd. All that’s required is the script included in your page along with a single <svg> node to render the chart.

In the following example we create a line chart.

Preview and edit on codepen

<svg class="line-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
<script>
  const svg = document.querySelector('.line-chart')
  new chartXkcd.Line(svg, {
    title: 'Monthly income of an indie developer',
    xLabel: 'Month',
    yLabel: '$ Dollars'
Enter fullscreen mode Exit fullscreen mode

I really like the XKCD comics and I am rather fond of charts, so when I saw that somebody had combined both to create a XKCD styled chart library, obviosuly, that's gonna get starred...

Why would you use this? (Other than for fun) Well, there is imperical evidence that there is a large benefit to use a more "sketchy" look for projects that are still under heavy development. So the next time you need to demo an application that has graphs, but don't want to give people the idea that everything is production ready, use this.

GitPitch

GitHub logo gitpitch / gitpitch

Markdown Presentations for Tech Conferences, Training, Developer Advocates, and Educators.

March 1, 2021: Service on gitpitch.com has been shutdown permanently.

GitPitch 4.0

About

GitPitch 4.0 is the perfect slide deck solution for tech conferences, training, developer advocates, and educators. Available on MacOS, Linux, and Windows 10. Work and present offline. Export to PDF, PPTX, and HTML. Or git-push to share public, private and password-protected slide decks online.

GITPITCH


  • GitPitch is a markdown presentation tool for MacOS, Linux, and Windows 10.
  • GitPitch Desktop lets you develop, preview, and present markdown presentations offline.
  • Using modular markdown to deliver modular decks.
  • Export your markdown presentations to PDF, PPTX, and HTML.
  • And publish and share your markdown presentations online.
  • To publish any deck just git-push to any repo on GitHub, GitLab, or Bitbucket.
  • And share it as a public, private, or…

As I give talks, I make slides. I am always on the lookout for text-based slide deck libraries. Currently I use https://revealjs.com/ but when I came across https://gitpitch.com/ I figured it might be worth looking into. Hence: star!

Godot Gaming Engine

GitHub logo godotengine / godot

Godot Engine – Multi-platform 2D and 3D game engine

Godot Engine

Godot Engine logo

2D and 3D cross-platform game engine

Godot Engine is a feature-packed, cross-platform game engine to create 2D and 3D games from a unified interface. It provides a comprehensive set of common tools, so that users can focus on making games without having to reinvent the wheel. Games can be exported with one click to a number of platforms, including the major desktop platforms (Linux, macOS, Windows), mobile platforms (Android, iOS), as well as Web-based platforms and consoles.

Free, open source and community-driven

Godot is completely free and open source under the very permissive MIT license No strings attached, no royalties, nothing. The users' games are theirs, down to the last line of engine code. Godot's development is fully independent and community-driven, empowering users to help shape their engine to match their expectations. It is supported by the Godot Foundation not-for-profit.

Before being open sourced in…

Every now and then, I think that it might be fun to create a computer game. I never do but it does keep me on the lookout for 100% open-source (and hopefully easy to use) gaming engines.

The Godot Engine seems to match this description, so I starred it for future reference.

Want to know more? Visit: https://godotengine.org/

google/robotstxt

GitHub logo google / robotstxt

The repository contains Google's robots.txt parser and matcher as a C++ library (compliant to C++11).

Google Robots.txt Parser and Matcher Library

The repository contains Google's robots.txt parser and matcher as a C++ library (compliant to C++14).

About the library

The Robots Exclusion Protocol (REP) is a standard that enables website owners to control which URLs may be accessed by automated clients (i.e. crawlers) through a simple text file with a specific syntax. It's one of the basic building blocks of the internet as we know it and what allows search engines to operate.

Because the REP was only a de-facto standard for the past 25 years, different implementers implement parsing of robots.txt slightly differently, leading to confusion. This project aims to fix that by releasing the parser that Google uses.

The library is slightly modified (i.e. some internal headers and equivalent symbols) production code used by Googlebot, Google's crawler, to determine which URLs it may access based on rules provided by webmasters in robots.txt files…

This week, the news came by that Google had released the source-code of their Robots.txt parse. Not of huge interest, but large enough to warrant a star, methinks.

Gun

GitHub logo amark / gun

An open source cybersecurity protocol for syncing decentralized graph data.

Build Gitter

GUN is an ecosystem of tools that let you build community run and encrypted applications - like an Open Source Firebase or a Decentralized Dropbox.

The Internet Archive and 100s of other apps run GUN in-production. GUN was also part of Twitter's bluesky initiative!

  • Multiplayer by default with realtime p2p state synchronization!
  • Graph data lets you use key/value, tables, documents, videos, & more!
  • Local-first, offline, and decentralized with end-to-end encryption.

Decentralized alternatives to Zoom, Reddit, Instagram, Slack, YouTube, Stripe, Wikipedia, Facebook Horizon and more have already pushed terabytes of daily P2P traffic on GUN. We are a friendly community creating a free fun future for freedom:

Quickstart

GUN is super easy to get started with:

  • Try the interactive tutorial in the browser (5min ~ average developer).
  • Or npm install gun and run the examples with cd node_modules/gun && npm start (…

For an experiment I was doing, I wanted peer-to-peer (P2P) communication. After going through a short-list of possible candidates, GUN attracked me most.

GUN is an ecosystem of tools that let you build community run and encrypted applications.

It is currently used in production by some large players like the Internet Archive and HackerNoon.

After some initial reading, things where suprisingly easy to work with and (using the provided "Deploy on Heroku" button) very easy to set up.

As part of my ongoing fascination with the distributed web, I plan to come back to GUN for some of my future projects.

Official website: https://gun.eco/

Nannou

GitHub logo nannou-org / nannou

A Creative Coding Framework for Rust.

nannou Actions Status Backers on Open Collective Sponsors on Open Collective

nannou_logo

An open-source creative-coding toolkit for Rust.

nannou is a collection of code aimed at making it easy for artists to express themselves with simple, fast, reliable, portable code. Whether working on a 12-month installation or a 5 minute sketch, this framework aims to give artists easy access to the tools they need.

The project was started out of a desire for a creative coding framework inspired by Processing, OpenFrameworks and Cinder, but for Rust. Named after this.

1 2 3

A Quick Note

It is still early days and there is a lot of work to be done. Feel free to help out!

The Guide

Examples

The following collection of examples are…

I have a lot of fun creating animated drawing with Processing (You can see some of my creations at https://www.openprocessing.org/user/190336/#sketches).

Nannou is an alternative to Processing, written in Rust.

I am not aware of an online editing environment for it (yet), but since the whole thing is written in Rust, it'll only be a matter of time before someone compiles it to Web Assembly and created one.

Or maybe I'll have a stab at it myself, if there's nothing there by 2021. Regardless, something to keep in mind. Star!

nwtgck/gh-card

GitHub logo nwtgck / gh-card

:octocat: GitHub Repository Card for Any Web Site

gh-card

CircleCI

GitHub Repository Card for Every Web Site: https://gh-card.dev

Example SVG card

Piping Server static repo card

Demo

gh-card

How it works?

The idea is similar to status badges from Travis CI, CircleCI and etc.

An image URL is like "https://gh-card.dev/repos/nwtgck/piping-server.svg". The request triggers the backend server to call GitHub API request. The repository information are cached currently by Redis.

Related projects

This might be similar to them. The purpose of this project is to provide an image which can be used in every site and the design should be like official GitHub repo card. I hope one day GitHub itself provides this feature officially.

You know those "card" UI elements that you see on Github for every repository? This is a simple (yet effective) tool that creates such a card for you. Just:

  1. Visit https://gh-card.dev/
  2. Fill in a project name (user/repo)
  3. Press "Generate"
  4. Copy/Paste the markdown
  5. Done!

The card image is available as PNG or SVG image.

For the project itself, the card look like this:
nwtgck/gh-card - GitHub

Nifty! ⭐

phuoc-ng/csslayout

GitHub logo phuocng / csslayout

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!

CSS Layout

As a front-end engineer, I deal with a lot of layouts and components. While there are plenty of CSS frameworks out there that provide these, I don't always want to include them all in my project.

That's why I've put together a collection of the most popular layouts and components that can be built with pure CSS.

These layouts and components are powered by modern CSS features like flexbox and grid, and can be easily customized to fit your specific needs. By combining them, you can create any possible layout you need.

The best part? This collection has zero dependencies, no frameworks, and no CSS hacks. These are real use cases that can save you time and effort in your projects.

About

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on

If you want to jump-start your proof-of-concepts, prototypes or UI work, "UI design patterns" will most likely be a term you are familiar with. https://csslayout.io/ will be a welcome addition to your toolchain.

Since it started in November 2019, it has already ammassed more than 90 patterns and more are keep being added. It has common use-cases for layout, navigation, input, display, and feedback.

I expected you will here about this effort through other channels soon, so keep an eye out for it!

Alt Text

Stackblitz

GitHub logo stackblitz / core

Online IDE powered by Visual Studio Code ⚡️

StackBlitz — Your local env, now in the browser

Chat on Discord  Read our docs

Welcome to the StackBlitz GitHub repository!

This repository serves as our primary way of keeping track of bugs. If you have any questions/ideas/feedback, feel free to open an issue, or come chat with us on Discord!

Learn more

  • Read our docs to learn about our features for developers, open-source and design system maintainers, and more.
  • Check out our blog for all the latest news, and deep dives in the Web technologies that power StackBlitz.

Other repositories

Ever since they came out, I've been using online integrated development environments (IDE). Currently I use Cloud9 (part of the Amazon stable of products since their acquisition in 2016).

As it pays to have alternatives ready, https://stackblitz.com/ piqued my interest. Especially since it is powered by Visual Studio Code!

StateOfCSS-2019

GitHub logo Devographics / StateOfCSS-2019

The State of CSS website - 2019 edition

When the results of the 2019 State of CSS survey came out, I didn't really have the time/energy to go through them. This week I did.

It would be too much to go through all of it here, but I would like to share this:

If you haven't already, I would advise you to have a look for yourself: https://2019.stateofcss.com/

testdouble/test-smells

GitHub logo testdouble / test-smells

A workbook repository of example test smells and what to do about them.

Test Smells

Build Status Build status

This repository is designed to serve as a sandbox for exploring a handful of test smells that are common in real-world test suites.

The examples in this repo go hand-in-hand with an interactive training workshop for developers, testers, & teams who want to improve their testing game. If you're interested in bringing this training to your team, please contact us at Test Double!

Getting started

Node.js

This repo should work with Node.js 4.x & up. We're using Yarn to ensure everyone has a deterministic dependency tree.

Install and run the tests with Yarn:

$ npm install -g yarnpkg
$ yarn
$ yarn test
# Run a single test
$ yarn test:one [Path to test]
# Example:
$ yarn test:one smells/insufficient/invisible-assertions/invisible-assertions.js

Install and run the tests with NPM

$ npm install
$ npm test
# Run a single test
$ npm run test:one [Path to test]
# Example:

As much as it is important to know how to do things right, it is more educational to understand what makes things wrong.

This repository will help you do just that:

This repository is designed to serve as a sandbox for exploring a handful of test smells that are common in real-world test suites.

Originally written for workshops given by the Test Double agency, it is now available for all.

If you want to learn more about what makes a test a bad one: Visit that repo!

Closing notes

You might be wondering what the common thread between this weeks rather mixed bag of goodies is. To a large extent, this is caused by me spending more time on Twitter. That is where part of this weeks stars came from.

#weekly

#github

"Where the world builds software"

#stars


Top comments (0)