Week 22
This week's starred repos
Cascadia Code Font
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.
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
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:
I haven't tried it in my development setup yet, but I plan to try it out ASAP!
chart.xkcd
timqian / chart.xkcd
xkcd styled chart lib
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
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.
<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'
…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
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
- Watch the Introducing GitPitch 4.0 Video
- Visit the What's New in GitPitch 4.0 Guide
- Go directly to the GitPitch 4.0 Quickstart Guide
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 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
godotengine / godot
Godot Engine – Multi-platform 2D and 3D game engine
Godot Engine
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
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
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 withcd 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
nannou-org / nannou
A Creative Coding Framework for Rust.
nannou
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.
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
- Welcome!
- Why Nannou?
- Getting Started
- Tutorials
- Community Tutorials
- Developer Reference
- API Reference
- Showcases
- Changelog
- Contributors
- Code of Conduct
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
gh-card
GitHub Repository Card for Every Web Site: https://gh-card.dev
Example SVG card
Demo
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:
- Visit https://gh-card.dev/
- Fill in a project name (user/repo)
- Press "Generate"
- Copy/Paste the markdown
- Done!
The card image is available as PNG or SVG image.
For the project itself, the card look like this:
Nifty! ⭐
phuoc-ng/csslayout
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!
Stackblitz
stackblitz / core
Online IDE powered by Visual Studio Code ⚡️
StackBlitz — Your local env, now in the browser
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
- StackBlitz docs: stackblitz/docs
- StackBlitz SDK: stackblitz/sdk
- Starter templates: stackblitz/starters
- WebContainers: stackblitz/webcontainer-core
- WebContainer API docs: stackblitz/webcontainer-docs
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
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
testdouble / test-smells
A workbook repository of example test smells and what to do about them.
Test Smells
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.
Top comments (0)