DEV Community: 王下邀月熊(Chevalier)

fc-whiteboard, Web whiteboard screencasting

王下邀月熊(Chevalier) — Wed, 17 Apr 2019 06:28:52 +0000

fc-whiteboard

Web whiteboard screencasting(both live and playback mode) with background slides, can be used as a graphics tablet for online tutoring or remote collaboration.

Usage

Whiteboard live mode

Source code can be found in Code Sandbox or Demo;

import { EventHub, Whiteboard, MirrorWhiteboard } from 'fc-whiteboard';

const eventHub = new EventHub();

eventHub.on('sync', (changeEv: SyncEvent) => {
  console.log(changeEv);
});

const images = [
  'https://upload-images.jianshu.io/upload_images/1647496-6bede989c09af527.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  'http://upload-images.jianshu.io/upload_images/1647496-d281090a702045e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  'http://upload-images.jianshu.io/upload_images/1647496-611a416be07d7ca3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
];

const whiteboard = new Whiteboard(document.getElementById('root') as HTMLDivElement, {
  sources: images,
  eventHub,
  // Enable this option to disable incremental sync, just use full sync
  onlyEmitSnap: false
});

whiteboard.open();

const mirrorWhiteboard = new MirrorWhiteboard(
  document.getElementById('root-mirror') as HTMLDivElement,
  {
    sources: images,
    eventHub
  }
);

mirrorWhiteboard.open();

Whiteboard replay mode

import { ReplayWhiteboard } from 'fc-whiteboard';
import * as events from './events.json';

let hasSend = false;

const whiteboard = new ReplayWhiteboard(document.getElementById('root') as HTMLDivElement);

whiteboard.setContext(events[0].timestamp, async (t1, t2) => {
  if (!hasSend) {
    hasSend = true;
    return events as any;
  }

  return [];
});

whiteboard.open();

The persistent events are listed as follow:

[
  {
    "event": "borderSnap",
    "id": "08e65660-6064-11e9-be21-fb33250b411f",
    "target": "whiteboard",
    "border": {
      "id": "08e65660-6064-11e9-be21-fb33250b411f",
      "sources": [
        "https://upload-images.jianshu.io/upload_images/1647496-6bede989c09af527.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
        "http://upload-images.jianshu.io/upload_images/1647496-d281090a702045e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
        "http://upload-images.jianshu.io/upload_images/1647496-611a416be07d7ca3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
      ],
      "pageIds": [
        "08e65661-6064-11e9-be21-fb33250b411f",
        "08e6a480-6064-11e9-be21-fb33250b411f",
        "08e6cb91-6064-11e9-be21-fb33250b411f"
      ],
      "visiblePageIndex": 0,
      "pages": [
        { "id": "08e65661-6064-11e9-be21-fb33250b411f", "markers": [] },
        { "id": "08e6a480-6064-11e9-be21-fb33250b411f", "markers": [] },
        { "id": "08e6cb91-6064-11e9-be21-fb33250b411f", "markers": [] }
      ]
    },
    "timestamp": 1555431837
  }
  ...
]

Use drawboard alone

<img id="root" src="https://upload-images.jianshu.io/upload_images/1647496-6bede989c09af527.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></img>

import { Drawboard } from 'fc-whiteboard/src';

const d = new Drawboard({
  imgEle: document.getElementById('root') as HTMLImageElement
});

d.open();

Motivation & Credits

markerjs

Another Awesome Lists: Systematic & Structured Guide to Galaxy

王下邀月熊(Chevalier) — Mon, 21 Jan 2019 08:35:43 +0000

Everyone may be very familiar with the so-called awesome list:

An awesome list is a list of awesome things curated by the community, about everything from CLI applications to fantasy books. Just like other thousands of awesome lists,

Awesome Lists collects curated, worthy and up-to-date links for ITCS, including Programming Language(Java, JavaScript, Python, Go, Rust, etc.), Software Engineering, Backend(Spring, Nginx, MicroServices, etc.), Infrastructure(Database, Network, etc.), InfoSecurity & Penetration, Industrial Application, DataScienceAI(Statistics, Machine Learning, Deep Learning, NLP, CV), Frontend Technology(iOS, Android, RN, Electron), etc. Note that I've attempted to order the books in order of most "tackleable". So the idea is to read books from top to bottom.

What's the difference between Awesome Lists and others?

All lists are organized in a systematic and structured way, keep to my Ultimate Knowledge Graph(see below).
Links in single list are ordered mannualy, seperated into multiple sections: Overview, Resources(Books, Courses, etc), Tutorials, etc.

Navigation

Finally, Let these lists speak for themselves:

If you wan't to learn Web Development, you may like DOM List, CSS List, React List, Redux List, Vue List, PWA List, Web Performance List, WebAssembly List, etc.
If you wan't to learn Java, Go, MicroService... you may like Java List, JVM List, Go List, MicroService List, Spring List, DevOps List, etc.
If you wan't to learn Distributed System, Database, Concurrent Programming... you may like Docker List, Kubernetes List, Linux List, HTTP List, Distributed System List, Blockchain List, Flink List, Kafka List, Database List, MySQL List, PostgreSQL List, etc.
If you wan't to learn AI, DeepLearning, TensorFlow... you may like DataScienceAI Book List, DataScienceAI Course List, Machine Learning List, Deep Learning List, NLP List, TensorFlow List, PyTorch List, etc.

You can use xCompass for searching in Web or alfred-sg for searching in MAC.

Knowledge Graph

There are massive curated links to help you study anything about heading first, with tutorials, practices, opensource, courses, books, etc. Each domain may contain the following files:

{Something}-List.md - This file may contain or separate into the following:
- Overview & Case Study & CheatSheet
- Resource & Book & Collection
- Tutorial & Learning Path
{Something}-Syntax-List.md - This file may contain or separate into the following:
- Variable & Expression
- Control flow & Error Handler
- Function & Functional Programming
- Class & Object
- MetaProgramming
{Something}-DataStructure-List.md - This file may contain or separate into the following:
- Basic Type
- Indexed Collection
- Keyed Collection
{Something}-Functionality-List.md - This file may contain or separate into the following:
- Storage
- Network
- System / Process
{Something}-DevOps-List.md - This file may contain or separate into the following:
- Builder, Task runner, Bundler, dependence management
- Debug
- Test, unit test, integration test, e2e test
- Architecture, module system, State management,
- StyleGuide, coding standards for source code in the JavaScript programming language.
{Something}-Production-List.md - This file may contain or separate into the following:
- Performance Optimization / Tunning
- Release / Deploy
- Accessibility / Monitor
- RealTime
- I18n
{Something}-OpenSource-List.md - Awesome tools, frameworks, projects
{Something}-Internals-List.md Inner mechanism under the hood, Core/Compiler/Engine

Notes of Don’t Make Me Think. A Common Sense Approach to Web Usability.

王下邀月熊(Chevalier) — Thu, 17 Jan 2019 16:01:12 +0000

After reading Don’t Make Me Think, I has learned a lot and rethinking the design of my personal site, my repo, etc. This is summary and reading notes meanwhile, most of them are picked from the origin.

Here are a few things you won’t find in this book:

Hard and fast usability rules
Predictions about the future of technology and the Web
Bad-mouthing of poorly designed sites and apps.

You’ll find a lot of different definitions of usability often breaking it down into attributes like:

Useful: Does it do something people need done?
Learnable: Can people figure out how to use it?
Memorable: Do they have to relearn it each time they use
Effective: Does it get the job done?
Efficient: Does it do it with a reasonable amount of time and effort?
Desirable: Do people want it?
Delightful: Is using it enjoyable, or even fun?

Person of average (or even below average) ability and experience can figure out how to use the thing [i.e., it’s learnable] to accomplish something[effective] without it being more trouble than it’s worth [efficient].

Chapter 1. Dont make me think

What’s the most important thing I should do if i want to make sure my site or app is easy to use? It’s not “Nothing important should ever be more than two clicks away” or “Speak the user’ s language” or “Be consistent.” It’s Dont make me think.

All kinds of things on a Web page can make us stop and think unnecessarily. Your goal should be for each page or screen to be self-evident, so that just by looking at it the average user. Here’s the rule: If you can t make something self-evident, you at least need to make it self-explanatory.

On a self-explanatory page, it takes a little thought to get it, but only a little. The appearance of things (like size, color, and layout), their well-chosen names, and the small amounts of carefully crafted text should all work together to create a sense of nearly effortless understanding.

Chapter 2. How we really use the Web

When we’re creating Sites, we act as though people are going to pore over each page, reading all of our carefully crafted text, figuring out how we’ve organized things, and weighing their options before deciding which link to click.

What they actually do most of the time (if were lucky is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for.

FACT OF LIFE #1: We dont read pages. We scan them
FACT OF LIFE #2: We dont make optimal choices. We satisfice.
FACT OF LIFE #3: We don’t figure out how things work. We muddle through.

Chapter 3. Billboard Design 101

DESIGNING FOR SCANNING, NOT READING

Take advantage of conventions

Like Stop signs, Given how crucial it is that drivers see and recognize them at a glance at a distance, in all kinds of weather and lighting conditions, it’s a really good thing that all stop signs look the same.

Create effective visual hierarchies

The more important something is, the more prominent it is.
Things that are related logically are related visually.
Things are”nested visually to show what’s part of what

Break pages up into clearly defined areas

Web page scanning suggest that users decide very quickly in their initial glances which parts of the page are likely to have useful information and then rarely look at the other parts.

Banner blindness-the ability of users to completely ignore areas they think will
contain ads — is just the extreme case.

Make it obvious what’s clickable

As we scan a page, we’re looking for a variety of visual cues that identify things as clickable(or tappable?’on touch screens )-things like shape(buttons, tabs, etc.), location(in a menu bar, for instance), and formatting(color and underlining).

Eliminate distractions/noise

One of the great enemies of easy-to-grasp pages is visual noise. There are really three different kinds of noise:

Shouting: Automated slideshows, animation, pop-ups, and the never-ending array of new attention-grabbing ad formats! Shouting is usually the result of a failure to make tough decisions about which elements are really the most important and then create a visual hierarchy that guides users to them first.
Disorganization: This is a sure sign that the designer doesn’t understand the importance of using grids to align the elements on a page.
Clutter: It’s hard to find and focus on the messages you actually care about.

A good idea to start with the assumption that everything is visual noise (the “presumed guilty until proven innocent” approach) and get rid of anything that’s not making a real contribution.

Format content to support scanning

Use plenty of headings.
Keep paragraphs short.
Use bulleted lists.
Highlight key terms.

Chapter 4. Animal, Vegetable, or Mineral? WHY USERS LIKE MINDLESS CHOICES

It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous. But over time I’ve come to think that what really counts is not the number of clicks it takes me to get to what I want (although there are limits), but rather how hard each click is — the amount of thought required and the amount of uncertainty about whether I’m making the right choice.

Some assistance may be required

This guidance works best when it’s

Brief: The smallest amount of information that will help me
Timely: Placed so I encounter it exactly when I need it
Unavoidable: Formatted in a way that ensures that I’ll notice it

Chapter 5. Omit needless words

Get rid of half the words on each page, then get rid of half of what’s left.

Happy talk must die: It’s the introductory text that’s supposed to welcome us to the site and tell us how great it is or to tell us what we’re about to see in the section we’ve just entered. Happy talk is like small talk — content-free, basically just a way to be sociable. But most Web users don’t have time for small talk; they want to get right to the point. You can — and should — eliminate as much happy talk as possible.
Instructions must die: Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible.

Chapter 6. Street signs and Breadcrumbs

Web Navigation 101

In many ways, you go through the same process when you enter a Web site.

You’re usually trying to find something.
You decide whether to ask first or browse first. The difference is that on a Web site there’s no one standing around who can tell you where things are. The Web equivalent of asking directions is searching — typing a description of what you’re looking for in a search box and getting back a list of links to places.

Some people (Jakob Nielsen calls them “search-dominant” users) will almost always look for a search box as soon as they enter a site. Other people (Nielsen’s “link-dominant” users) will almost always browse first, searching only when they’ve run out of likely links to click or when they have gotten sufficiently frustrated by the site.

Web experience is missing many of the cues we’ve relied on all our lives to negotiate spaces. Consider these oddities of Web space:

No sense of scale.
No sense of direction.
No sense of location.

This lack of physicality is both good and bad. On the plus side, the sense of weightlessness can be exhilarating and partly explains why it’s so easy to lose track of time on the Web — the same as when we’re “lost” in a good book.
On the negative side, If you look up navigation in a dictionary, it’s about doing two things: getting from one place to another, and figuring out where you are.

Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for and to tell us where we are.

Persistent navigation

Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you’re still in the same site.

Persistent navigation should include the four elements you most need to have on hand at all times:

On pages where a form needs to be filled in, the persistent navigation can sometimes be an unnecessary distraction.

One of the ways navigation can counteract the Web’s inherent “lost in space” feeling is by showing
me where I am in the scheme of things.

Breadcrumbs

Like “You are here” indicators, Breadcrumbs show you where you are. They’re called Breadcrumbs because they’re reminiscent of the trail of crumbs Hansel dropped in the woods so he and Gretel could find their way back home.

Breadcrumbs show you the path from the Home page to where you are and make it easy to move back up to higher levels in the hierarchy of a site.

Put them at the top.
Use > between levels.
Boldface the last item.

Tabs

Tabs are one of the very few cases where using a physical metaphor in a user interface actually works. Here’s why I like them:

They’re self-evident.
They’re hard to miss.
They’re slick.

If the page is well designed, when your vision clears you should be able to answer these questions without hesitation:

What site is this? (Site ID)
What page am I on? (Page name)
What are the major sections of this site? (Sections)
What are my options at this level? (Local navigation)
Where am I in the scheme of things? (“You are here” indicators)
How can I search?

Here’s how you perform the trunk test:

Step 1: Choose a page anywhere in the site at random, and print it.
Step 2: Hold it at arm’s length or squint so you can’t really study it closely.
Step 3: As quickly as possible, try to find and circle each of these items:
Site ID
Page name
Sections (Primary navigation)
Local navigation
“You are here” indicator(s)
Search

Chapter 7. The Big Bang Theory of Web Design

THE IMPORTANCE OFGETTING PEOPLE OFFON THE RIGHT FOOT.

As quickly and clearly as possible, the Home page needs to answer the four questions I have in my
head when I enter a new site for the first time:

This is what I call the Big Bang Theory of Web Design. Like the Big Bang Theory, it’s based on the idea that the first few seconds you spend on a new Web site or Web page are critical.

Everything on the Home page can contribute to our understanding of what the site is. But there are
three important places on the page where we expect to find explicit statements of what the site is
about.

The tag line

One of the most valuable bits of real estate is the space right next to the Site ID. When we see a phrase that’s visually connected to the ID, we know it’s meant to be a tagline, and so we read it as a description of the whole site. We’ll look at taglines in detail in the next section.

The Welcome blurb.

The Welcome blurb is a terse description of the site, displayed in a
prominent block on the Home page, usually at the top left or center of the content space so it’s the first thing that catches your eye.

The “Learn more.”

Innovative products and business models tend to require a fair amount of
explanation, often more than most people have the patience for. But people have become accustomed to watching short videos on their computers and mobile devices. As a result, people have now come to expect a short explanatory video on most sites and are often willing to watch them.

Chapter 8. “The Farmer and the Cowman Should Be Friends” | 论内部协作

Left to their own devices, Web teams aren’t notoriously successful at making decisions about usability questions. Most teams end up spending a lot of precious time rehashing the same issues over and over.

The point is, it’s not productive to ask questions like “Do most people like pull-down menus?” The right kind of question to ask is “Does this pull-down, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?”

And there’s really only one way to answer that kind of question: testing. You have to use the collective skill, experience, creativity, and common sense of the team to build some version of the thing (even a crude version), then watch some people carefully as they try to figure out what it is and
how to use it.

Chapter 9. Usability testing on 10 cents a day

Usability testing has been around for a long time, and the basic idea is pretty simple: If you want to know whether something is easy enough to use, watch some people while they try to use it and note where they run into problems. Testing one user is 100 percent better than testing none. Testing one user early in the project is better than testing 50 near the end.

Repeat after me: Focus groups are not usability tests

Here’s the difference in a nutshell:

In a focus group, a small group of people (usually 5 to 10) sit around a table and talk about things, like their opinions about products, their past experiences with them, or their reactions to new concepts. Focus groups are good for quickly getting a sampling of users’ feelings and opinions about things.
Usability tests are about watching one person at a time try to use something (whether it’s a Web site, a prototype, or some sketches of a new design) to do typical tasks so you can detect and fix the things that confuse or frustrate them.

The main difference is that in usability tests, you watch people actually use things, instead of just
listening to them talk about them.

Do-it-yourself usability testing

The purpose of this kind of testing isn’t to prove anything. You don’t need to find all of the problems. In fact, you’ll never find all of the problems in anything you test. And it wouldn’t help if you did, because of this fact:
You can find more problems in half a day than you can fix in a month.

A typical one-hour test would be broken down something like this:

Welcome (4 minutes). You begin by explaining how the test will work so the participant knows what to expect.
The questions (2 minutes). Next you ask the participant a few questions about themselves. This helps put them at ease and gives you an idea of how computer-savvy and Web-savvy they are.
The Home page tour (3 minutes). Then you open the Home page of the site you’re testing and ask the participant to look around and tell you what they make of it. This will give you an idea of how easy it is to understand your Home page and how much the participant already knows your domain.
The tasks (35 minutes). This is the heart of the test: watching the participant try to perform a series of tasks (or in some cases, just one long task). Again, your job is to make sure the participant stays focused on the tasks and keeps thinking aloud. If the participant stops saying what they’re thinking, prompt them by saying — wait for it — “What are you thinking?” (For variety, you can also say things like “What are you looking at?” and “What are you doing now?”) During this part of the test, it’s crucial that you let them work on their own and don’t do or say anything to influence them. Don’t ask them leading questions, and don’t give them any clues or assistance unless they’re hopelessly stuck or extremely frustrated. If they ask for help, just say something like “What would you do if I wasn’t here?”
Probing (5 minutes). After the tasks, you can ask the participant questions about anything that happened during the test and any questions that the people in the observation room would like you to ask.
Wrapping up (5 minutes). Finally, you thank them for their help, pay them, and show them to the door.

The debriefing: Deciding what to fix

Here are some of the types of problems you’re going to see most often:

Users are unclear on the concept.
The words they’re looking for aren’t there.
There’s too much going on.

FOCUS RUTHLESSLY ON FIXING THE MOST SERIOUS PROBLEMS FIRST

Chapter 10. Mobile: It’s not just a city in Alabama anymore

So, what’s different about usability when you’re designing for use on a mobile device?In one sense, the answer is: Not much. The basic principles are still the same. If anything, people are
moving faster and reading even less on small screens. Most of the challenges in creating good mobile usability boil down to making good tradeoffs.

Which parts do you leave out? One approach was Mobile First. Instead of designing a full-featured (and perhaps bloated) version of your Web site first and then paring it down to create the mobile version, you design the mobile version first based on the features and content that are most important to your users. Then you add on more features and content to create the desktop/full version

Breeding chameleons

If there are two things I can tell you about scalable design (a/k/a dynamic layout, fluid design, adaptive design, and responsive design), they’re these:

It tends to be a lot of work.
It’s very hard to do it well.

In the meantime, here are three suggestions:

Allow zooming.
Don’t leave me standing at the front door. You tap on a link in an email or a social media site and instead of taking you to the article in question it takes you to the mobile Home page, leaving you to hunt for the thing yourself.
Always provide a link to the “full” Web site.

Be careful that your responsive design solutions aren’t loading up pages with huge amounts of code and images that are larger than necessary for the user’s screen.

Don’t hide your affordances under a bushel

Affordances are visual clues in an object’s design that suggest how we can use it.

This is not to say that all affordances need to hit you in the face. They just have to be visible enough
that people can notice the ones they need to get their tasks done.

Flat design has a tendency to take along with it not just the potentially distracting decoration but also the useful information that the more textured elements were conveying.

Delightful & Learnable

Delightful apps usually come from marrying an idea about something people would really enjoy being able to do, but don’t imagine is possible, with a bright idea about how to use some new technology to accomplish it.

One of the biggest problems with apps is that if they have more than a few features they may not be very easy to learn.

That’s not to say that no one in the real world learns how to use it. It gets great reviews and is
consistently a best seller. But I have to wonder how many people who bought it have never mastered
it, or how many more sales they could make if it were easier to learn.

There’s one more attribute that’s important: memorability. Once you’ve figured out how to use an app,
will you remember how to use it the next time you try or will you have to start over again from
scratch?

Usability testing on mobile devices

Here are some of the issues you have to deal with:

Do you need to let the participants use their own devices?
Do they need to hold the device naturally, or can it be sitting on a table or propped up on a stand?
What do the observers need to see (e.g., just the screen, or both the screen and the participant’s fingers so they can see their gestures)? And how do you display it in the observation room?
How do you create a recording?

Until better technology-based solutions come along, here’s what I’d lean toward:

Use a camera pointed at the screen instead of mirroring.
Attach the camera to the device so the user can hold it naturally.
Don’t bother with a camera pointed at the participant.

Chapter 11. Usability as common courtesy(绅士)

Here are a few of the things that tend to make users feel like the people publishing a site don’t have their best interests at heart(避免做以下的事):

Hiding information that I want. The most common things to hide are customer support phone numbers, shipping rates, and prices.
Punishing me for not doing things your way. I should never have to think about formatting data: whether or not to put dashes in my Social Security number, spaces in my credit card number, or parentheses in my phone number.
Asking me for information you don’t really need.
Shucking and jiving me. We’re always on the lookout for faux sincerity, and disingenuous attempts to convince me that you care about me can be particularly annoying.
Putting sizzle in my way. Having to wade through pages bloated with feel-good marketing photos makes it clear that you don’t understand — or care — that I’m in a hurry.
Your site looks amateurish. You can lose goodwill if your site looks sloppy, disorganized, or unprofessional, like no effort has gone into making it presentable.

The good news is that even if you make mistakes, it’s possible to restore my goodwill by doing things that convince me that you do have my interests at heart. Most of these are just the flip side of the other list:

Know the main things that people want to do on your site and make them obvious and eas
Tell me what I want to know.
Save me steps wherever you can.

Awesome Docker Links

王下邀月熊(Chevalier) — Tue, 18 Sep 2018 15:33:16 +0000

Docker Links | Docker 资料索引

Docker Links aggregates curated popular links for studing Docker and the Ecosystem. More reference about ITCS can turn to Awesome Links : Guide to Galaxy, which collects valuable, popular and up-to-date links for CS, including Programming Language, Software Engineering, Server Side Application, Infrastructure, InfoSecurity, Industrial Application, DataScienceAI, Frontend Technology(iOS, Android, RN, Electron), etc.

Overview

CheatSheet

Resource

Book

Docker 实战
2016-mydocker #Book#: 本书在详细分析 Docker 所依赖的技术栈的基础上,一步一步地通过代码实例,让读者可以自己循序渐进地用 Go 语言构建出一个容器的引擎。
2017-自己动手写 Docker #Book#：通过讲解 Docker 使用到的各种底层技术，例如 Namespace、Cgroups 等来自己一步步动手完成一个简单版本的 Docker。在自己动手的过程中，从而对 Docker 这个技术有一个整体、细致的了解。能够明白 Docker 的原理以及结构，从而加深对目前炽手可热的 Docker 技术的理解，方便解决工作中使用 Docker 遇到的各种问题。系列书摘。
2017-The DevOps 2.1 Toolkit: Docker Swarm #Book#: Viktor Farcic's latest book, The DevOps 2.1 Toolkit: Docker Swarm, shows you how to successfully integrate Docker Swarm into your DevOps toolset.
2017-Continuous Delivery with Docker and Jenkins #Book#: Unleash the combination of Docker and Jenkins in order to enhance the DevOps workflow.
2017-The New Stack-The Docker and Container Ecosystem #Book#: The container ecosystem is constantly changing and impacting the developer landscape. Our five ebook series on the container ecosystem covers everything from application development to orchestration, networking, security, data storage, and monitoring.

Tutorial

Docker + Kubernetes
2018-A crash course on Docker — Learn to swim with the big fish
2018-Docker for Beginners: Learn to build and deploy your distributed applications easily to the cloud with Docker.
2018-docker-curriculum: A comprehensive tutorial on getting started with Docker!

Docker Configuration Links

System

2018-使用 docker 对容器资源进行限制: 这篇文章就介绍如何使用 docker 来限制 CPU、内存和 IO，以及对应的 cgroups 文件。

Docker Storage

2016-Docker : Storage Patterns for Persistence: We’ll go over several variants when it comes down to data persistence.
2017-Managing Persistence for Docker Containers
copying-data-between-docker-containers
docker-indepth-volumes
深入理解 Docker Volume

Network

Docker 网络部分执行流分析(Libnetwork 源码解读)
Docker Networking: Reborn
2018-Demystifying Docker overlay networking: We’ll explain the theory behind how it works.

Dockerfile

2018-An Exhaustive Guide to Writing Dockerfiles for Node.js Web Apps: This post is filled with examples ranging from a simple Dockerfile to multistage production builds for Node.js web apps.
高效编写 Dockerfile 的几条准则: 写 Dockerfile 也像写代码一样，一份精心设计、Clean Code 的 Dockerfile 能在提高可读性的同时也大大提升 Docker 的使用效率。

Registry

private-docker-registry-ssl: Private Docker registry protected with Let's Encrypt SSL

Application

Engineering Practices

Security

Docker Security Best Practices: This Docker Security Cheat Sheet will walk you through five actions to protect your Docker containers and infrastructure. Improve your Docker security today.
Docker Security CheatSheet: The following tips should help you to secure a container based system.

Optimization

2017-Tips to Reduce Docker Image Sizes: Docker images can easily get to 2–3GB. Here’s some tips that can help reduce their sizes.
Dockerfile 最佳实践
Dockerfile 优化浅谈

Docker Swarm Links

Swarm 介绍
Swarm、Fleet 、 Kubernetes、Mesos - 编排工具的对比分析
Docker Clustering Tools Compared: Kubernetes vs Docker Swarm
2016-Demystifying Docker overlay networking: we’ll build and test a Docker overlay network in swarm mode; We’ll explain the theory behind how it works.
2017-Using GlusterFS with Docker swarm cluster: In this blog I will create a 3 node Docker swarm cluster and use GlusterFS to share volume storage across Docker swarm nodes.

Docker Internals Links | Docker 内部原理资料索引

2015-Docker 基础技术 #Series#: 我会用几篇文章来把这些技术给大家做个介绍，希望通过这些文章大家可以自己打造一个山寨版的 docker。
2015-Tiny Docker in Docker #Project#: Docker-in-Docker image based off of the empty image scratch. Only the bare minimum required files are included to make Docker run. This image weighs in around 25MB expanded.
2016-Docker Internals: A Deep Dive Into Docker For Engineers Interested In The Gritty Details.
2017-rubber-docker #Project#: A workshop on Linux containers: Rebuild Docker from Scratch
2018-手把手教你写 Docker: 模拟 Docker 实现一个简单的容器不到 200 行代码(包括空行、注释、异常处理)。
记一次 docker 问题定位: 性能测试发现业务进程运行在容器中比业务进程运行在宿主机上吞吐量下降了 100 倍，这让周一显得更加阴暗。
2018-Docker 底层技术: Docker 容器技术已经发展了好些年，在很多项目都有应用，线上运行也很稳定。整理了部分 Docker 的学习笔记以及新版本特性，对 Docker 感兴趣的同学可以看看，之前整理过的 Linux namespace 可以见之前的博文。
深入 Docker：容器和镜像

cgroup

2017-docker 容器基础技术：linux cgroup 简介: Linux cgroups 的全称是 Linux Control Groups，它是 Linux 内核的特性，主要作用是限制、记录和隔离进程组（process groups）使用的物理资源（cpu、memory、IO 等）。

Network

2017-理解 Docker 容器网络之 Linux Network Namespace: 在本文中我们将尝试理解 Linux Network Namespace 及相关 Linux 内核网络设备的概念，并手工模拟 Docker 容器网络模型的部分实现，包括单机容器网络中的容器与主机连通、容器。

Docker OpenSource Links | Docker 开源框架与工具索引

Tool

ctop #Project#: Top-like interface for container metrics
container-diff #Project#: container-diff is a tool for analyzing and comparing container images. container-diff can examine images along several different criteria

Storage | 存储

2015-Flocker #Project#: Flocker is an open-source Container Data Volume Manager for your Dockerized applications.
2017-REX-Ray #Project#: REX-Ray is a container storage orchestration engine enabling persistence for cloud native workloads
GlusterFS #Project#: Gluster is a software defined distributed storage that can scale to several petabytes. It provides interfaces for object, block and file storage.

Registry

Dragonfly #Project#: Dragonfly is an intelligent P2P based file distribution system. It aims to resolve issues related to low-efficiency, low-success rate and waste of network bandwidth in file transferring process.

Awesome CS Collections: Curated links of awesome sites & collections & resources

王下邀月熊(Chevalier) — Sun, 16 Sep 2018 07:15:07 +0000

Awesome CS Collections is collections of collection, including Programming Language, Software Engineering, Web, Server Side Application, Frontend, etc. Every link in this collection may containing massive domains.

Awesome CS Collections is subject to Awesome Links, which is also part of Awesome Coder. You may also like Awesome-DataSet-Collections, Awesome Tools, etc.

Awesome CS Collections 是对于资源集锦的集锦，希望能够帮您快速找到合适的学习指引。

Sites: Blog & News & Forum | 博客、资讯与论坛

Content Aggregation Portal: HackerNews, Reddit, Google+, 推酷, TechMeme, V2EX, DZone, Voat
Online Books: Gitbook, SafariBooksOnline
Blogs: Medium, 开发者头条, 掘金, CSDN, freeCodeCamp Guide
Q & A Community: StackOverflow, SegmentFault
OpenSource Community: Github, OSChina, coding.net
Newsletter: MyBridge, InfoQ 架构师, CSDN 程序员杂志, 码农周刊, 高可用架构系列, ThoughtWorks Technology Radar
Online Course: Pluralsight, Coursera, edX, Udacity, MIT 公开课, MOOC 学院, 慕课网
Online Judging: LeetCode, Project Euler, CodingGame, Kaggle, Topcoder, 牛客网, HackerRank, JS Fight
Giants: MSDN, Google Developers, 云栖社区, IBM DeveloperWorks, Facebook AI Research , Facebook, Airbnb

Universe | 通用

Learn Anything #Project#: Learn Anything is an Open Source Website built by community to Learn Anything with Interactive Maps.
Computer Science: Open Source Society University: The OSSU curriculum is a complete education in computer science using online materials.
2018-Awesome Cheatsheets: Useful cheatsheets with everything you should know in one single-file. 🚀
2016-成为专业程序员路上用到的各种优秀资料、神器及框架: 成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。
List of Free Learning Resources: This list was originally a clone of stackoverflow - List of Freely Available Programming Books with contributions from Karan Bhangui and George Stocker.
Awesome Podcasts: Collection of awesome podcasts. Awesome list of Important Podcasts for software engineers.
Build your own (insert technology here): What I cannot create, I do not understand.
devdocs: 这里集合了大量的在线的文档，同时 DevDocs 还支持离线浏览，主要是依靠 IndexDB 将数据存放在浏览器的本地缓存中。

Interview | 面试

InterviewMap #Project#: uild the best interview map. The current content includes JS, network, browser related, performance optimization, security, framework, Git, data structure, algorithm, etc.
InterviewNotes: 计算机基础知识整理，持续更新中~
2018-Interviews #Collection#: Everything you need to know to get the job.
2018-Interview_Notes-Chinese #Collection#: 2018/2019/校招/春招/秋招/自然语言处理(NLP)/深度学习(Deep Learning)/机器学习(Machine Learning)/C/C++/Python/面试笔记

Programming Language | 编程语言

Exercism: Exercism gives you hundreds of practice problems in over 30 programming languages, and a place where you can get feedback on your solutions.
Freely available programming books: List of Free Learning Resources
Hackr: Find the Best Programming Courses & Tutorials
The Coding Train: Subjects covered range from the basics of programming languages like JavaScript (with p5.js) and Java (with Processing) to generative algorithms like physics simulation, computer vision, and data visualization.

Software Engineering | 软件工程

Coding Interview University: A complete computer science study plan to become a software engineer.
awesome-shell: A curated list of awesome command-line frameworks, toolkits, guides and gizmos. Inspired by awesome-php.

Web

Front End Interview Handbook: Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore.
Frontend Case Studies: A curated list of technical talks and articles about real-world enterprise frontend development
How JavaScript works #Series#: the series dedicated to exploring JavaScript and its building components.

Server Side Application | 服务端应用程序

2016-Back-End Developer Interview Questions: A list of back-end related questions you can be inspired from to interview potential candidates, test yourself or completely ignore
2018-Awesome Scalability, Availability, and Stability Back-end Design Patterns: A curated list of selected readings to illustrate Scalability, Availability, and Stability Design Patterns in Back-end Development.
2018-后端架构师技术图谱

Infrastructure | 基础架构

The Twelve-Factor App: To raise awareness of some systemic problems we’ve seen in modern application development, to provide a shared vocabulary for discussing those problems, and to offer a set of broad conceptual solutions to those problems with accompanying terminology.
The System Design Primer: Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

Frontend | 前端

DataScienceAI

Project Euler: Project Euler is a series of challenging mathematical/computer programming problems that will require more than just mathematical insights to solve.

Awesome Links of Books, Courses, Examples for AI, MachineLearning, DeepLearning and Tensorflow in 2018

王下邀月熊(Chevalier) — Sun, 20 May 2018 15:44:40 +0000

DataScienceAI Book Links | 机器学习、深度学习与自然语言处理领域推荐的书籍列表

A curated list of Artificial Intelligence (AI) courses and books, aggerated with DataScienceAI-Book-Links and DataScienceAI-Course-Links from Awesome-Links.

Mathematics | 数学基础

2008-统计学完全教程 #Book#：由美国当代著名统计学家 L·沃塞曼所著的《统计学元全教程》是一本几乎包含了统计学领域全部知识的优秀教材。本书除了介绍传统数理统计学的全部内容以外，还包含了 Bootstrap 方法(自助法)、独立性推断、因果推断、图模型、非参数回归、正交函数光滑法、分类、统计学理论及数据挖掘等统计学领域的新方法和技术。本书不但注重概率论与数理统计基本理论的阐述，同时还强调数据分析能力的培养。本书中含有大量的实例以帮助广大读者快速掌握使用 R 软件进行统计数据分析。
2009-Convex Optimization #Book#:This book is about convex optimization, a special class of mathematical optimization problems, which includes least-squares and linear programming problems. It is well known that least-squares and linear programming problems have a fairly complete theory, arise in a variety of applications, and can be solved numerically very efficiently. The basic point of this book is that the same can be said for the larger class of convex optimization problems.
2009-The Elements of Statistical Learning: Data Mining, Inference, and Prediction-Second Edition: Hastie and Tibshirani cover a broad range of topics, from supervised learning (prediction) to unsupervised learning including neural networks, support vector machines, classification trees and boosting---the first comprehensive treatment of this topic in any book.
2010-All of Statistics: A Concise Course in Statistical Inference #Book#: The goal of this book is to provide a broad background in probability and statistics for students in statistics, Computer science (especially data mining and machine learning), mathematics, and related disciplines.
2012-李航-统计方法学 #Book#: 本书全面系统地介绍了统计学习的主要方法，特别是监督学习方法，包括感知机、k 近邻法、朴素贝叶斯法、决策树、逻辑斯谛回归与熵模型、支持向量机、提升方法、EM 算法、隐马尔可夫模型和条件随机场等。
2016-Immersive Linear Algebra #Book#: The World's First Linear Algeria Book with fully Interactive Figures.
2017-The Mathematics of Machine Learning #Book#: Machine Learning theory is a field that intersects statistical, probabilistic, computer science and algorithmic aspects arising from learning iteratively from data and finding hidden insights which can be used to build intelligent applications. Despite the immense possibilities of Machine and Deep Learning, a thorough mathematical understanding of many of these techniques is necessary for a good grasp of the inner workings of the algorithms and getting good results.

Machine Learning | 机器学习

2007-Pattern Recognition And Machine Learning #Book#: The book is suitable for courses on machine learning, statistics, computer science, signal processing, computer vision, data mining, and bioinformatics.
2012-Machine Learning A Probabilistic Perspective #Book#: This textbook offers a comprehensive and self-contained introduction to the field of machine learning, a unified, probabilistic approach. The coverage combines breadth and depth, offering necessary background material on such topics as probability, optimization, and linear algebra as well as discussion of recent developments in the field, including conditional random fields, L1 regularization, and deep learning.
2014-The Cambridge Handbook of Artificial Intelligence #Book#: With a focus on theory rather than technical and applied issues, the volume will be valuable not only to people working in AI, but also to those in other disciplines wanting an authoritative and up-to-date introduction to the field.
2015-Data Mining, The Textbook #Book#: This textbook explores the different aspects of data mining from the fundamentals to the complex data types and their applications, capturing the wide diversity of problem domains for data mining issues.
2016-Dive into Machine Learning #Book#: I learned Python by hacking first, and getting serious later. I wanted to do this with Machine Learning. If this is your style, join me in getting a bit ahead of yourself.
2016-周志华-机器学习 #Book#：机器学习》作为该领域的入门教材，在内容上尽可能涵盖机器学习基础知识的各方面。介绍了机器学习的基础知识，经典而常用的机器学习方法（决策树、神经网络、支持向量机、贝叶斯分类器、集成学习、聚类、降维与度量学习），特征选择与稀疏学习、计算学习理论、半监督学习、概率图模型、规则学习以及强化学习等。
2016-Prateek Joshi-Python Real World Machine Learning #Book#: Learn to solve challenging data science problems by building powerful machine learning models using Python.
2016-Designing Machine Learning Systems with Python: Gain an understanding of the machine learning design process, Optimize machine learning systems for improved accuracy, Understand common programming tools and techniques for machine learning, Develop techniques and strategies for dealing with large amounts of data from a variety of sources, Build models to solve unique tasks.
2018-AndrewNG-Machine Learning Yearning #Book#: This book is focused not on teaching you ML algorithms, but on how to make ML algorithms work. Some technical AI classes will give you a hammer; this book teaches you how to use the hammer.
2018-Artificial Intelligence: A Modern Approach-3rd Edition #Book#:Artificial Intelligence: A Modern Approach, 3e offers the most comprehensive, up-to-date introduction to the theory and practice of artificial intelligence. Number one in its field, this textbook is ideal for one or two-semester, undergraduate or graduate-level courses in Artificial Intelligence.

Reinforcement Learning | 强化学习

2018-Reinforcement Learning: An Introduction-Second Edition #Book#: This textbook provides a clear and simple account of the key ideas and algorithms of reinforcement learning that is accessible to readers in all the related disciplines. Familiarity with elementary concepts of probability is required.

DeepLearning | 深度学习

2015-Goodfellow, Bengio and Courville-The Deep Learning Textbook #Book#:中文译本这里，The Deep Learning textbook is a resource intended to help students and practitioners enter the field of machine learning in general and deep learning in particular. The online version of the book is now complete and will remain available online for free.
2016-Stanford Deep Learning Tutorial #Book#: This tutorial will teach you the main ideas of Unsupervised Feature Learning and Deep Learning. By working through it, you will also get to implement several feature learning/deep learning algorithms, get to see them work for yourself, and learn how to apply/adapt these ideas to new problems.
2016-Building Machine Learning Projects with TensorFlow #Book#: Engaging projects that will teach you how complex data can be exploited to gain the most insight.
2016-深度学习入门 #Book#：您现在在看的这本书是一本“交互式”电子书 —— 每一章都可以运行在一个 Jupyter Notebook 里。我们把 Jupyter, PaddlePaddle, 以及各种被依赖的软件都打包进一个 Docker image 了。所以您不需要自己来安装各种软件，只需要安装 Docker 即可。
2017-Neural Networks and Deep Learning #Book#: Neural Networks and Deep Learning is a free online book. The book will teach you about: (1) Neural networks, a beautiful biologically-inspired programming paradigm which enables a computer to learn from observational data. (2) Deep learning, a powerful set of techniques for learning in neural networks
2017-TensorFlow Book #Book#: Accompanying source code for Machine Learning with TensorFlow. Refer to the book for step-by-step explanations.

NLP | 自然语言处理

2016-Text Data Management and Analysis #Book#: A Practical Introduction to Information Retrieval and Text Mining
2017-DL4NLP-Deep Learning for NLP resources: State of the art resources for NLP sequence modeling tasks such as machine translation, image captioning, and dialog.

Computer Vision | 计算机视觉

2016-OpenCV: Computer Vision Projects with Python: Use OpenCV's Python bindings to capture video, manipulate images, and track objects. Learn about the different functions of OpenCV and their actual implementations.

DataScience | 泛数据科学

2012-深入浅出数据分析-中文版 #Book#: 深入浅出数据分析》以类似“章回小说”的活泼形式，生动地向读者展现优秀的数据分析人员应知应会的技术：数据分析基本步骤、实验方法、最优化方法、假设检验方法、贝叶斯统计方法、主观概率法、启发法、直方图法、回归法、误差处理、相关数据库、数据整理技巧；正文之后，意犹未尽地以三篇附录介绍数据分析十大要务、R 工具及 ToolPak 工具，在充分展现目标知识以外，为读者搭建了走向深入研究的桥梁。
2014-DataScience From Scratch #Book#: In this book, you’ll learn how many of the most fundamental data science tools and algorithms work by implementing them from scratch.
2016-Python Data Science Handbook #Book#:Jupyter Notebooks for the Python Data Science Handbook

DataScienceAI Course Links | 机器学习、深度学习与自然语言处理领域推荐的课程列表

Machine Learning | 机器学习

2010-MIT Artifical Intelligence Videos: This course includes interactive demonstrations which are intended to stimulate interest and to help students gain intuition about how artificial intelligence methods work under a variety of circumstances.
2014-斯坦福-机器学习课程 #Course#: 在本课程中，您将学习最高效的机器学习技术，了解如何使用这些技术，并自己动手实践这些技术。更重要的是，您将不仅将学习理论知识，还将学习如何实践，如何快速使用强大的技术来解决新问题。最后，您将了解在硅谷企业如何在机器学习和 AI 领域进行创新。
2014-Statistical Learning (Self-Paced) #Course#: This is an introductory-level course in supervised learning, with a focus on regression and classification methods.
2015-Udacity-Intro to Artificial Intelligence #Course#: In this course, you’ll learn the basics of modern AI as well as some of the representative applications of AI. Along the way, we also hope to excite you about the numerous applications and huge possibilities in the field of AI, which continues to expand human capability beyond our imagination.
2016-台大机器学习技法 #Course#: Linear Support Vector Machine (SVM) :: Course Introduction @ Machine Learning Techniques, etc.
2017-EdX-Artificial Intelligence (AI) #Course#: Learn the fundamentals of Artificial Intelligence (AI), and apply them. Design intelligent agents to solve real-world problems including, search, games, machine learning, logic, and constraint satisfaction problems.
2018-Machine Learning Crash Course with TensorFlow APIs by Google #Course#: Machine Learning Crash Course features a series of lessons with video lectures, real-world case studies, and hands-on practice exercises.

Deep Learning

2016-Deep Learning by Google #Course#: In this course, you’ll develop a clear understanding of the motivation for deep learning, and design intelligent systems that learn from complex and/or large-scale datasets.
2017-CS 20SI: TensorFlow for Deep Learning Research #Course#: This course will cover the fundamentals and contemporary usage of the TensorFlow library for deep learning research. We aim to help students understand the graphical computational model of TensorFlow, explore the functions it has to offer, and learn how to build and structure models best suited for a deep learning project.
2017-Fast.ai DeepLearning AI #Course#: Most of the library is quite well tested since many students have used it to complete the Practical Deep Learning for Coders course. However it hasn't been widely used yet outside of the course, so you may find some missing features or rough edges.

NLP | 自然语言处理

2016-University of Illinois at Urbana-Champaign:Text Mining and Analytics #Course#: This course will cover the major techniques for mining and analyzing text data to discover interesting patterns, extract useful knowledge, and support decision making, with an emphasis on statistical approaches that can be generally applied to arbitrary text data in any natural language with no or minimum human effort.
2017-Neural Networks for Machine Learning #Course#: Learn about artificial neural networks and how they're being used for machine learning, as applied to speech and object recognition, image segmentation, modeling language and human motion, etc.
2017-Oxford Deep NLP course #Course#: This is an advanced course on natural language processing. Automatically processing natural language inputs and producing language outputs is a key component of Artificial General Intelligence.
2017-CS224d: Deep Learning for Natural Language Processing #Course#: Intro to NLP and Deep Learning, Simple Word Vector representations: word2vec, GloVe, etc.

Industrial Applications | 行业应用

Autonomous Driving | 自动驾驶

2017-Artificial Intelligence for Robotics #Course#: Learn how to program all the major systems of a robotic car from the leader of Google and Stanford's autonomous driving teams.

Examples | 示范

2015-Trained image classification models for Keras #Project#: Keras code and weights files for popular deep learning models.
All-in-one Docker image for Deep Learning #Project#: An all-in-one Docker image for deep learning. Contains all the popular DL frameworks (TensorFlow, Theano, Torch, Caffe, etc.)
Top Deep Learning Projects: A list of popular github projects related to deep learning (ranked by stars).

TensorFlow Learning & Practices Links | TensorFlow 资料索引

Overview | 概述

2017- TensorFlow demystified: To understand a new framework, Google’s TensorFlow is a framework for machine-learning calculations, it is often useful to see a ‘toy’ example and learn from it.
如何将 TensorFlow 用作计算框架: 如果你刚刚接触 TensorFlow 并想使用其来作为计算框架，那么本文是你的一个很好的选择，阅读它相信会对你有所帮助。
2017-We Need to Go Deeper: A Practical Guide to TensorFlow and Inception

Case Study | 案例分析

2017-Top Five Use Cases of Tensorflow: TensorFlow is mainly used for: Classification, Perception, Understanding, Discovering, Prediction and Creation.
2018-Google Brain 研究员详解聊天机器人: 面临的深度学习技术问题以及基于 TensorFlow 的开发实践。
How Zendesk Serves TensorFlow Models in Production

Resource | 资源集锦

Series | 系列教程

2015-tensorflow_tutorials: From the basics to slightly more interesting applications of Tensorflow
2017-Effective TensorFlow: My attempt is to gradually expand this series by adding new articles and keep the content up to date with the latest releases of TensorFlow API.
2017-TensorFlow 101: TensorFlow is an open source machine learning library developed at Google. TensorFlow uses data flow graphs for numerical computations.
2017-TensorFlow-World: This repository is aimed to provide simple and ready-to-use tutorials for TensorFlow.

Examples | 示例

2015-TensorFlow Examples: This tutorial was designed for easily diving into TensorFlow, through examples. For readability, it includes both notebooks and source codes with explanation.
2016-Deep Learning Using Tensorflow: This repository contains the code for Tensorflow Tutorials for Deep Learning from Starting to End. All the code is written using Python3.
2017-Deep Learning 21 Examples: 本工程是《21 个项目玩转深度学习———基于 TensorFlow 的实践详解》的配套代码，代码推荐的运行环境为：Ubuntu 14.04，Python 2.7、TensorFlow >= 1.4.0。请尽量使用类 UNIX 系统和 Python 2 运行本书的代码。
2017-TensorFlow Models by Sarasra #Project#: This repository contains a number of different models implemented in TensorFlow: the official models, the research models, the samples folder and the tutorials folder.
Android TensorFlow Machine Learning Example: This article is for those who are already familiar with machine learning and know how to the build model for machine learning(for this example I will be using a pre-trained model).
2018-Deep Learning Using Tensorflow:
This repository contains the code for Tensorflow Tutorials for Deep Learning from Starting to End. All the code is written using Python3.
2018-TensorFlow Project Template #Project#: A simple and well designed structure is essential for any Deep Learning project, so after a lot of practice and contributing in tensorflow projects here's a tensorflow project template that combines simplcity, best practice for folder structure and good OOP design.
2018-Beginner Tensorflowjs Examples in Javascript: This is the easiest set of Machine Learning examples that I can find or make. I hope you enjoy it.

Collection

Awesome TensorFlow #Collection#: A curated list of awesome TensorFlow experiments, libraries, and projects. Inspired by awesome-machine-learning.
TensorFlow-World-Resources #Collection#: Organized & Useful Resources about Deep Learning with TensorFlow

Tutorial | 教程

2016-TensorFlow in a Nutshell — Part One: Basics: The fast and easy guide to the most popular Deep Learning framework in the world.
2016-Tensorflow 架构: TF 的特点之一就是可以支持很多种设备，大到 GPU、CPU，小到手机平板，五花八门的设备都可以跑起来 TF。
2016-Image Completion with Deep Learning in TensorFlow
2017-NakedTensor: Bare bone examples of machine learning in TensorFlow.
2017-Deep Learning in 7 lines of code: The essence of machine learning is recognizing patterns within data. This boils down to 3 things: data, software and math. What can be done in seven lines of code you ask? A lot.
2017- TensorFlow 代码解析：本文由浅入深的阐述 Tensor 和 Flow 的概念。先介绍了 TensorFlow 的核心概念和基本概述，然后剖析了 OpKernels 模块、Graph 模块、Session 模块。
2017-TensorFlow 入门级解读：矩阵、多特征线性和逻辑回归：本文是日本东京 TensorFlow 聚会联合组织者 Hin Khor 所写的 TensorFlow 系列介绍文章。
2017-We Need to Go Deeper: A Practical Guide to TensorFlow and Inception

JavaScript Learning & Practices Links, from Zero to Hero

王下邀月熊(Chevalier) — Tue, 01 May 2018 16:39:40 +0000

JavaScript Learning & Practices Links

This file aggregates curated popular links for learning JavaScript. More reference about ITCS can turn to Awesome Links : Guide to Galaxy, which collects valuable, popular and up-to-date links for CS, including Programming Language, Software Engineering, Server Side Application, Infrastructure, InfoSecurity, Industrial Application, DataScienceAI, Frontend Technology(iOS, Android, RN, Electron), etc.

Overview | 概述

JavaScript History

2017-A Brief History of JavaScript: We take a look at the evolution of JavaScript, arguably one of the most important languages of today, and tomorrow
2017-JavaScript — A First-Class Language At Last: As a JavaScript engineer, I wanted to dig deeper into the public perception of the language and how rooted in reality it is. What I found is that some criticisms hold water, but many do not.

Modern JavaScript | 现代 JavaScript 明晰

10 Languages That Compile to JavaScript: This article includes a list of ten interesting languages that can be transpiled to JavaScript to be executed in the browser or on a platform like Node.js.
Modern JavaScript cheatsheet: This document is a cheatsheet for JavaScript you will frequently encounter in modern projects and in most contemporary sample code.
2017-A Brief, Incomplete History of JavaScript: Where did we start, where are we now, how did we get here, and why?
2017-Modern JavaScript Explained For Dinosaurs: The ecosystem is growing and changing so rapidly that it’s hard to understand the problems that different tools are trying to solve.
2017-What’s the difference between JavaScript and ECMAScript?: This article represents my current understanding of the differences between JavaScript and ECMAScript.
2017-Everything I learned from #Javascript30.
Glossary of Modern JavaScript: In this article, we'll address concepts that are crucial to understanding functional programming, reactive programming, and functional reactive programming and their use with JavaScript.
TC39, ECMAScript, and the Future of JavaScript
简明 ES6 Features 列表
The Real Story Behind ECMAScript 4: Our JavaScript history article sparked interesting comments regarding what really happened during the ECMAScript 4 era. Below you will find a more detailed perspective of what really went down between 1999 and 2008 in the world of JavaScript. Read on!
ES8 Feature Set: JavaScript is Getting Asynchronous
ECMAScript 2017 and beyond: In this talk, we’ll go into the latest JavaScript features and how they are designed.
Exploring ES2018 and ES2019: This book is about two versions of JavaScript: ECMAScript 2018 and ECMAScript 2019.

CheatSheet | 语法速览

2017-JavaScript 核心概念归纳整理：本文针对 JavaScript 语言的核心概念进行简单的梳理，对应的每个知识点仅仅点到为止，不作详细介绍。目的是为了方便大家快速审查自己对 JavaScript 的知识结构是否完善，如有遗漏或不正确的地方，还望批评指正。
2017-Writing modern JavaScript code: I'll try here to list some good practices to make your JavaScript code easier to write, read and maintain.
2017-What the f*ck JavaScript?: A list of funny and tricky JavaScript examples
2017-Modern JavaScript Cheatsheet: This document is a cheatsheet for JavaScript you will frequently encounter in modern projects and most contemporary sample code.
2017-The Definitive JavaScript Handbook for a developer interview
2017-30 seconds of code: Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.

Collection | 资料集锦

Master JavaScript Programming With 18 OpenSource Books #Collection#: This compilation focuses on the JavaScript language with 18 solid recommendations. There are books here for beginner, intermediate, and advanced programmers alike. All of the texts are released under an open source license.
Awesome JavaScript #Collection#: A collection of awesome browser-side JavaScript libraries, resources and shiny things.
JavaScript-Garden: JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.
2017-Must-Watch JavaScript #Project#: This is a collection of well-received talks about JavaScript, covering topics such as ES6, JavaScript frameworks, client-side apps, mobile integration, JavaScript performance, tooling, leveling up, and more.

Book

2015-ECMAScript 6 入门 #Book#：ECMAScript 6 入门是由阮一峰老师编写的一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。
2015-ES6 in Depth #Book#： A twenty-four article-long series of pragmatic articles describing JavaScript language features in ES6. 中文译本深入浅出 ES6
2015-Exploring ES6 #Book#: Upgrade to the next version of JavaScript
2017-The Modern JavaScript Tutorial #Book#: How it's done now. From the basics to advanced topics with simple, but detailed explanations.
2017-The JavaScript Wa #Book#: A modern introduction to an essential language.
Modern JavaScript Tutorial #Book#: How it's done now. From the basics to advanced topics with simple, but detailed explanations.
JavaScript. The Core: 2nd Edition #Book#: This is the second edition of the JavaScript. The Core overview lecture, devoted to ECMAScript programming language and core components of its runtime system.

Interview | 面试

3 JavaScript questions to watch out for during coding interviews: This article isn’t about the newest JavaScript libraries, common development practices, or any of the new ES6 functions. Rather, it’s about 3 things that usually come up in interviews when discussing JavaScript.
Interview Algorithm Questions in Javascript() {...}
2017-The Best Frontend JavaScript Interview Questions (written by a Frontend Engineer)

Tutorial

Exploring ES2018 and ES2019: This book is about two versions of JavaScript: ECMAScript 2018 and ECMAScript 2019.
2017-To type or not to type: quantifying detectable bugs in JavaScript
2017-Javascript closures explained in depth
6 Simple Tips on How to Start Writing Clean Code
2015-ES6 Promises: there is a better pattern using Promises, which give us much more than just an escape from callback hell.
2017-How to write clean code for cascaded promises: An in-depth guide about working with Interdependent Promises
2017-Promise error handling in-depth: This blog is written in Q and A form and targeting those who are looking for the answers.
2017-js-bits: JavaScript concepts explained with code.

Frontend+ Weekly No.10: D3 5.0，React and React Native Event System Explained, SketchCode

王下邀月熊(Chevalier) — Mon, 26 Mar 2018 09:40:37 +0000

The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from Medium, Hacker News, Reddit,Twitter, MyBridge, etc.

More Issues can be found in Frontend+ Weekly Repository.

By the way, sorry for my poor English.

News

D3 5.0: D3 5.0 introduces only a few non-backwards-compatible changes. D3 now uses Promises instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support async and await. With the adoption of promises, D3 now uses the Fetch API instead of XMLHttpRequest, the d3-request module has been replaced by d3-fetch. More links about this can be found in Awesome Links
Java 10 Release: JDK 10, an implementation of Java Standard Edition 10, was released on March 20, 2018. Key improvements include local variable types as well as enhancements for garbage collection and compilation. JDK 10 is scheduled to be just a short-term release, and public updates for JDK 10 are slated to end in six months. The upcoming JDK 11, due in September, will be a long-term support (LTS) version of Java. LTS releases are due every three years. More links about this can be found in Awesome Links

Tutorial

How to build a Cryptocurrency price list app using Flutter SDK: Flutter is Google’s new open-source toolkit for helping developers build iOS and Android apps with just one codebase. Flutter apps are written in the Dart programming language and compile to native code, so the performance is really, really great. In this tutorial, I will show you how to use Flutter to build an app that shows the current price of different cryptocurrencies. I will walk you through the fundamentals of Flutter and Dart. More links about this can be found in Awesome Links
A Comprehensive Guide to React.js in 2018: This article was originally published in January of 2015, but was recently updated to React 16.3 and all the goodness it contains. The topics below are what I believe to be the fundamental aspects of React. If you understand all of them and their purposes, you’ll be at a very good spot after reading this tutorial: JSX, Virtual DOM, React.Component, state, Component LifeCycle, Events. More links about this can be found in Awesome Links
Introducing React Apollo 2.1: Recently, React Apollo 2.1 was announced, a huge step forward in improving how you develop React applications with GraphQL. It features a new render prop API and much stronger TypeScript support, along with upgraded docs. In this blog post, we will look through the following features: Data fetching with Query, Updating data with Mutation, Simplifying local state with ApolloConsumer, etc. More links about this can be found in Awesome Links

Engineering Practices

Comparing the top JS animation libraries for use in React apps: You may have noticed that animation is pretty popular on the web. There’s no shortage of tutorials, case studies, and libraries targeting motion lovers. It’s a facet of development that can intrigue, enhance, delight, motivate, and impress users. In this article, I’ve chosen five JavaScript animation libraries and dissected their abilities to perform from both a business and a development perspective. Instead of asking “what do I use to build X?”, I explore concerns like: How well is this project maintained? Is it easy for a team to pick up? What’s the syntax like? More links about this can be found in Awesome Links
How We Adopted CSS Grid at Scale: Last month we launched the redesign of Thomasnet.com, From team buy-in to fallbacks, here’s the approach we took at Thomas with the implementation of CSS Grid. This blog post contains following contents: A quick primer on CSS Grid, Our Grid “aha” moment, Resolving the CSS Grid vs. Flexbox argument, Laying the Grid foundation, Fallbacks for browsers without support. More links about this can be found in Awesome Links
Ultimate React Component Patterns with Typescript 2.8: Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components. More links about this can be found in React DevPractices Links.

Under the hood

Compressive Images Revisited: The compressive images technique relies on you sizing a JPG image to be larger than the size it ultimately is displayed at and then compressing it to an incredibly low-quality setting. This cuts the image weight dramatically, but also makes the image look absolutely terrible. The benefit in weight can be substantial. In the Filament Group’s article, the example image was a whopping 53% lighter (from 95kb to 44kb). The trade-off for compressive images is primarily the memory cost (there used to be scaling and decoding risks, but browsers have improved in that area). More links about this can be found in Awesome Links
Automated front-end development using deep learning: At Insight, he developed a model that allows users to create working HTML websites from hand-drawn wireframes, significantly accelerating the design process. He is now a Deep Learning Scientist at Mythic. More links about this can be found in Awesome Links
The React and React Native Event System Explained: A Harmonious Coexistence: There are an awful lot of posts explaining how to use React’s event handling system, but not many that explain how it works. I have been working on React Native lately, and my struggles with event handling acted as a reminder of how important it was to understand precisely what’s going on. I thus decided to gather as much info as possible regarding event handling in React: the following is a report of what I found looking around the source code. More links about this can be found in Awesome Links

OpenSource

Driver.js: Driver.js is a powerful yet light-weight, vanilla JavaScript engine to drive the user's focus across the page. Driver.js is not only another tour library, Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with some component.
brain.js: brain.js is a library of Neural Networks written in JavaScript.
dejavu: dejavu is the missing web UI for Elasticsearch. Existing web UIs leave much to be desired or are built with server side page rendering techniques that make it less responsive and bulkier to run (I am looking at you, Kibana).Starting v1.0, dejavu is the only Elasticsearch web UI that supports importing data via JSON and CSV files, as well as defining field mappings from the GUI.

Frontend+ Weekly No.9: MobX 4 Features, iOS Hacks, Distributed Transaction

王下邀月熊(Chevalier) — Fri, 23 Mar 2018 13:04:09 +0000

The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from Medium, Hacker News, Reddit,Twitter, MyBridge, etc.

More Issues can be found in Frontend+ Weekly Repository.

By the way, sorry for my poor English.

News

Firefox 59.0 Release: On Firefox for desktop, we’ve improved page load times, added tools to annotate and crop your Firefox Screenshots, and made it easier to arrange your Top Sites on the Firefox Home page. Improve graphics rendering using Off-Main-Thread Painting (OMTP) for Mac users (OMTP for Windows was released in Firefox 58) On Firefox for Android, we’ve added support for sites that stream video using the HLS protocol.
Let's Encrypt Announce ACME v2 and Wildcard Certificate Support: We’re pleased to announce that ACMEv2 and wildcard certificate support is live! With today’s new features we’re continuing to break down barriers for HTTPS adoption across the Web by making it even easier for every website to get and manage certificates. ACMEv2 is an updated version of our ACME protocol which has gone through the IETF standards process, taking into account feedback from industry experts and other organizations that might want to use the ACME protocol for certificate issuance and management some day. Wildcard certificates allow you to secure all subdomains of a domain with a single certificate.
Stack Overflow Developer Survey Results 2018: Over 100,000 developers took the 30-minute survey this past January. DevOps and machine learning are important trends in the software industry today, Developers are overall optimistic about the possibilities that artificial intelligence offers, but are not in agreement about what the dangers of AI are. Python has risen in the ranks of programming languages on our survey, surpassing C# in popularity this year, much like it surpassed PHP last year. For the third year in a row, Rust is the most loved programming language among our respondents, followed close behind by Kotlin.

Tutorial

MobX 4: Better, simpler, faster, smaller: A new major version of MobX has been released, in this blog post I’m just going to highlight the most compelling new features. Decorators without decorator syntax, Dynamically extend observable objects, await when and flow to further simplify asynchronous processes, onBecome(Un)Observed to automatically fetch data sources, Dedicated production build. Smaller & faster. More links about this can be found in Awesome Links.
Unblocking Clipboard Access: Over the past few years, browsers have converged on using document.execCommand for clipboard interactions. It's great to have a single widely-supported way to integrate copy and paste into web apps, but this came at a cost: clipboard access is synchronous, and can only read & write to the DOM. That's the new Async Clipboard API, the text-focused portion of which we're shipping in Chrome 66. It's a replacement for execCommand-based copy & paste that has a well-defined permissions model and doesn't block the page. More links about this can be found in Awesome Links
Comparing APK sizes, For apps in Flutter, React Native, Kotlin and Java: There are so many ways to make mobile apps ranging from direct platform specific development. Ever wondered how these libraries and frameworks affect the size of your app? Let’s analyze some apk files for apps written in some of these ways. The apps are very basic, containing just a title at the top and a text at the center of the screen. This will show, for a bare minimum app what these frameworks need to package along with the apk for it to be able to run. More links about this can be found in Awesome Links

Engineering Practices

How GraphQL Replaces Redux: GraphQL is a server side query language. Redux is a client-side state management library. How could one replace the other? Most of our state management code was concerned with merging and mutating data from discreet REST resources into the right shape for our UI (reducers, selectors, actions etc.). A lot of our most complex state management was trying to manage the asynchronous nature of getting all that data in the right order for a specific route (sagas, middleware, thunks etc.). More links about this can be found in Awesome Links
Best iOS hacks from Twitter: January & February Edition: Last two months community shared nice debugging tips, advices on improving Xcode performance and smart ways to use functions in Swift. How to improve Xcode performance, A great little tip on how to make your code more readable and understandable, etc. More links about this can be found in Awesome Links
Loading Third-Party JavaScript: Addy Osmani wrote up the fundamentals of loading third-party JavaScript in a proper guide, including privacy, security and performance problems. Third-party scripts provide a wide range of useful functionality, making the web more dynamic, interactive, and interconnected. In this guide, we’ll walk through how to find and fix issues related to loading third-party JavaScript: performance, privacy, security, unpredictable, unintended consequences, and critical rendering path. More links about this can be found in Awesome Links

Under the hood

Distributed transactions and why you should care: This article is a great introduction for distributed transactions, it includes the following: The Distributed Data Model, The optimist’s data model and The pessimist’s data model; Atomicity, Multi-Version Concurrency Control and Clock-synchronization across the network; Consistency, Two-Phase Commit Protocol, PAXOS, RAFT; Isolation, Snapshot Isolation, Serializable Isolation, Durability, etc. More links about this can be found in Awesome Links
A Guided Tour inside a clean architecture code base.: Recently, I released an open-source sample project called MovieNight. In the past couple of weeks, I got lots of questions regarding the application architecture, so I’ve decided to write this blog post. I’ll describe the different components at play and the relationships between them as well as talk about some of the architecture decisions I’ve made along the way. More links about this can be found in Awesome Links
How JavaScript works: the rendering engine and tips to optimize its performance: When you’re building web apps, however, you don’t just write isolated JavaScript code that runs on its own. The JavaScript you write is interacting with the environment. Understanding this environment, how it works and what it is composed of will allow you to build better apps and be well-prepared for potential issues that might arise once your apps are released into the wild. More links about this can be found in Awesome Links

OpenSource

Rough.js: Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. More links about this can be found in Awesome Links
TOAST UI Chart: The TOAST UI Chart is an open source JavaScript library that can be used in legacy browsers including IE8. It is intuitive and easy to apply without any other learning. If you like, you can change the chart in detail using many options and custom themes. More links about this can be found in Awesome Links
fkill-cli: fkill-cli is a cross-platform fabulous processes killer, it works on macOS, Linux, and Windows. To kill a port, prefix it with a colon. For example: :8080. Run without arguments to use the interactive interface. The process name is case insensitive. More links about this can be found in Awesome Links

Frontend+ Weekly No.8: SwiftNIO, Custom Vue Router, React Time Slicing and Suspense API

王下邀月熊(Chevalier) — Tue, 13 Mar 2018 15:08:00 +0000

The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from Medium, Hacker News, Reddit,Twitter, MyBridge, etc.

More Issues can be found in Frontend+ Weekly Repository.

News

Apple Open Source SwiftNIO: At the recent try! Swift Conference in Tokyo, Apple announced the SwiftNIO project, a Netty-like non-blocking cross-platform I/O framework written in Swift. SwiftNIO aims to be an asynchronous event-driven network framework for the development of high-performance servers and clients. It is currently developed and tested on macOS (10.12+) and Linux (Ubuntu 14.04). According to Apple: SwiftNIO is a cross-platform asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients.
Node v8.10.0 (LTS) & v9.8.0 (Current): This release comes with a lot of big changes. There are updates to V8, libuv, and ICU, a bugfix in npm, and support for building with OpenSSL 1.1.0.
New in Chrome 65: The CSS Paint API allows you to programmatically generate an image. The Server Timing API allows web servers to provide performance timing information via HTTP headers. the new CSS display: contents property can make boxes disappear!

Tutorial

GraphQL: Everything You Need to Know: So you’ve been constructing and using REST API’s for quite some time now and short while ago started hearing about GraphQL — a new hype in the field of API technologies. The purpose of this article is to highlight the major features associated with GraphQL along with discussing the significant pros and cons associated with this particular API specification. More links about this can be found in Awesome Web Reference.
Learn Redux by Building Redux from Scratch: A tutorial to understand the core Redux library by building it step-by-step. More links about this can be found in Awesome Web Reference.
Algorithm Interview Questions in JavaScript: Glob Matching: Much to many people's chagrin, the practice of asking algorithms questions in tech interviews doesn't seem like it is going anywhere. From what I've heard though, more and more companies are allowing people to answer algorithms questions in JavaScript. In this week's article, I'll walk through a common interview question, glob matching), and implement the solution in JavaScript. More links about this can be found in Awesome Web Reference.

Engineering Practices

Structuring projects and naming components in React: As React is just a lib, it doesn’t dictate rules about how you should organize and structure your projects. This is nice, because it gives us freedom to try different approaches and adapt the ones that better fit for us. On the other hand, this could cause some confusion for devs that are starting in React world. In this post, I’m going to show some approaches that I have been using for a while and have been scaling very well. These approaches doesn’t re-create the wheel, they just put together and refine what we have on the market. More links about this can be found in Awesome Web Reference.
Let’s Build a Custom Vue Router: vue-router does a fantastic job by providing us with the items needed to map an application’s components to different browser URL routes. But, simple applications often don’t need a fully fledged routing library like vue-router. In this article, we'll build a simple custom client-side router with Vue. By doing so, we’ll gather an understanding of what needs to be handled to construct client-side routing as well as where potential shortcomings can exist. More links about this can be found in Awesome Web Reference.
The hidden components of Web Caching: Caching allows you to increase application processing speed. Storing a copy of the previously fetched data or computed results increases processing speed. This enables future requests to be served faster. It is an effective architectural pattern, because most programs access the same data or instructions over and over. It is applied to everything from web-browsers to web-servers and hard-disks to CPUs. Let’s take a bottom-up approach to understanding the various layers of caching. We will focus on where data can be cached instead of how to cache it. More links about this can be found in Awesome Web Reference.

Under the hood

Turning your web traffic into a Super Computer: The subject matter of this post is controversial as it discusses extracting computing resources from the visitors of a website. There are a lot of discussions at the moment centered around web-browser based crypto currency mining. Most paint a deplorable picture of the practice; please keep in mind that there are very desirable paths alongside which these practices can develop. I am not elaborating on these arguments here, I am only describing a method to harness the resources. More links about this can be found in Awesome Web Reference.
Beyond React 16: Time Slicing and Suspense API: ReactJS is a UI library that's a very powerful tool amongst frontend developers in building JavaScript applications. In this article, I'll introduce you to a few features coming to ReactJS. Time-slicing allows ReactJS, which now runs on React Fiber, to split computations of updates on children components into chunks during idle callbacks and rendering work is spread out over multiple frames. The simple definition of the suspense feature is that ReactJS can pause any state update until the data been fetched is ready to be rendered. More links about this can be found in Awesome Web Reference.
8 React conditional rendering methods: JSX is a powerful extension to JavaScript that allows us to define UI components. But it doesn’t support loops or conditional expressions directly. There’s more than one way to use conditional expressions in React. And, as with most things in programming, some are better suited than others depending on the problem you’re trying to solve. This tutorial covers the most popular conditional renderings methods: If/Else, Prevent rendering with null, Element variables, Ternary operator, Short-circuit operator (&& ), Immediately-Invoked Function Expressions (IIFE), Subcomponents, High Order Components (HOCs). More links about this can be found in Awesome Web Reference.

OpenSource

Propel: Propel provides a GPU-backed numpy-like infrastructure for scientific computing in JavaScript. JavaScript is a fast, dynamic language which, we think, could act as an ideal workflow for scientific programmers of all sorts. Propel runs both in the browser and natively from Node. In both environments Propel is able to use GPU hardware for computations. In the browser it utilizes WebGL through deeplearn.js and on Node it uses TensorFlow's C API.
scrcpy: This application provides display and control of Android devices connected on USB. It does not require any root access. It works on GNU/Linux, Windows and Mac OS.
Xray: Xray is an experimental Electron-based text editor informed by what we've learned in the four years since the launch of Atom. In the short term, this project is a testbed for rapidly iterating on several radical ideas without risking the stability of Atom. The longer term future of the code in this repository will become clearer after a few months of progress. For now, our primary goal is to iterate rapidly and learn as much as possible.

Frontend+ Weekly No.7: WebAssembly architecture for Go, React Suspense, Redesigning Redux

王下邀月熊(Chevalier) — Wed, 07 Mar 2018 14:15:55 +0000

The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from Medium, Hacker News, Reddit,Twitter, MyBridge, etc.

More Issues can be found in Frontend+ Weekly Repository.

News

WebAssembly architecture for Go: This documents describes the design decisions that went into the new WebAssembly architecture (short “wasm”) for the Go compiler. The goal is to upstream it to the official Go repository in the current development cycle, targeting Go 1.11. The WebAssembly architecture will allow Go to become an alternative to JavaScript for writing code that runs in a web browser. This new freedom of choice will hopefully have a positive impact on the software engineering ecosystem overall.
Announcing Flutter beta 1: Build beautiful native apps: as part of Mobile World Congress 2018, the first beta release of Flutter is announced. Flutter is Google's new mobile UI framework that helps developers craft high-quality native interfaces for both iOS and Android. Flutter targets the sweet spot of mobile development: performance and platform integrations of native mobile, with high-velocity development and multi-platform reach of portable UI toolkits.
PhantomJS: Archiving the project, suspending development: Due to the lack of active contribution, PhantomJS will be archived soon and stop the development. PhantomJS version 2.1.1 will remain the last known stable release until further notice. Chrome and Firefox gaining headless modes is the ultimate goal Phantom could've achieved, but it served its purpose very well, while it was needed. Thanks & Goodbye.

Tutorial

Google releases machine learning course: As part of Google’s transition into an AI first world, the company wants to widely open up this technology. Its latest initiative involves a new website with a number of resources, as well as a previously internal online learning course. “Learn with Google AI” is a new educational addition to a site originally announced at the I/O developer conference last year. In recent years, the company has repeatedly stated that its goal is to democratize AI and make its tool available for everyone. More changelogs can be found in this.
Exploring ES2018 and ES2019: This book is about two versions of JavaScript: ECMAScript 2018 and ECMAScript 2019.
A Walkthrough of that React Suspense Demo: The Async React demo at JSConf Iceland lived up to the hype: Time Slicing and React Suspense are on the way! In this walkthrough of the 300ish line Movie Search demo, we learn the various aspects of the React Suspense API: simple-cache-provider.SimpleCache, simple-cache-provider.createResource, ReactDOM.unstable_deferredUpdates, etc. More changelogs can be found in this.

Engineering Practices

Lesser known CSS quirks & advanced tips: Below you’ll find some of the weirdest CSS features, along with tips and tricks for advanced CSS users. Another practices for CSS is 30 Seconds of CSS, a curated collection of useful CSS snippets you can understand in 30 seconds or less. More changelogs can be found in this.
frontend case studies: Articles like “Building a simple todo list with [framework or technology name]” won't teach you how that framework or technology solves real-world problems and works at a large scale. This document is a curated list of technical talks and articles about real-world enterprise frontend development. More changelogs can be found in this.

Under the hood

Didact Fiber: Incremental reconciliation: This is a really nice deep dive into a sketch of Fiber implementation. Didact is a DIY guide to build your own React, in this post we are going to rewrite most of the code from the didact series to follow React 16 new architecture. We’ll try to mirror the structure, variables and function names from the React codebase. More changelogs can be found in this.
Redesigning Redux: Shouldn’t state management be a solved problem by now? Intuitively, developers seem to know a hidden truth: state management seems harder than it needs to be. In this article, we’ll try to answer some questions you’ve probably been asking yourself: Do you really need a library for state management? s the popularity of Redux deserved? Why or why not? ould we make a better state management solution? If so, how? More changelogs can be found in this.
Tracing from JS to the DOM and back again: Debugging memory leaks in Chrome 66 just became much easier. Chrome’s DevTools can now trace and snapshot C++ DOM objects and display all reachable DOM objects from JavaScript with their references. This feature is one of the benefits of the new C++ tracing mechanism of the V8 garbage collector. More changelogs can be found in this.

OpenSource

Pandora.js:Pandora.js is a Manageable, Measurable and Traceable Node.js Application Manager represented by Alibaba powered by TypeScript. As a consequence of years of experiences on enterprise Node.js applications management, Midway team from Alibaba open-sourced Pandora.js finally. It is an application manager integrates many capabilities like monitoring, debugging, resiliency.
just-dashboard: just-dashboard can generate dashboards using YAML or JSON files. As your dashboard is just data, you can generate it instead of repeating yourself. You can do that by generating the YAML or JSON file yourself, or you can use jq queries in your YAML file. And one with a dashboard that contains a component that can fetch the data from other other gist and turn it into 3 different charts.
prompts: Lightweight, beautiful and user-friendly interactive prompts. prompts has no big dependencies nor is it broken into a dozen tiny modules that only work well together, and uses layout and colors to create beautiful cli interfaces..
filepond: A Flexible and Fun JavaScript File Upload Plugin.

Frontend+ Weekly No.6: Webpack 4.0.0, Securing Your GraphQL API, Why Decentralization Matters

王下邀月熊(Chevalier) — Tue, 27 Feb 2018 15:43:36 +0000

The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from Medium, Hacker News, Reddit,Twitter, MyBridge, etc.

More Issues can be found in Frontend+ Weekly Repository.

News

Webpack 4.0.0 Release: This week, Webpack 4 (Legato) is available; There are so many new things in webpack 4, and it is fast(up to 98% faster). Webpack 4 have deprecated and removed CommonsChunkPlugin, and have replaced it with a set of defaults and easily overridable API called optimize.splitChunks. It also introduce a new property for your config called mode, for either build size (production) optimization, or build time (development) optimization. More changelogs can be found in this.
Parcel v1.6.0 Release: Parcel v1.6.0 is a huge release that comes just 3 weeks after v1.5.0, with over 15 new features and lots of bugfixes and improvements. The highlights include: Zero config ES6+ transpilation with Babel, Automatic JSX support for React and Preact, Node and Electron targets, Production bundle statistics, Node 6 support, W3C WebManifest support.
npm v5.7.0 Release: This release brings a bunch of exciting new features and bug fixes. Package-lock git merge conflict resolution allows npm install to fix package-lock.json and npm-shrinkwrap.json files that have merge conflicts in them without your having to edit them. The new npm ci command installs from your lock-file ONLY. If your package.json and your lock-file are out of sync then it will report an error, it’s also much faster (2x-10x!) than npm install when you don’t start with a node_modules. It works by throwing away your node_modules and recreating it from scratch.

Tutorial

Everything you need to know about CSS Variables: Most programming languages have support for variables. But sadly, CSS has lacked support for native variables from the very beginning. Well the web is moving fast. And I’m glad to report that CSS now finally supports variables. In this guide, I’ll show you how variables work natively in CSS, and how you can use them to make your life a lot easier. I’ll wrap things up by showing you how to build 3 projects that show off CSS variables and their ease of use: Creating Component Variations using CSS Variables, Theme Styles with CSS Variables, Building the CSS Variable Booth. More links about this can be found in Awesome Web Reference.
An Overview of JavaScript Testing in 2018: This guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing in 2018. It combines information from many great articles, that are linked at the bottom, and adds from our own experience in Welldone Software Solutions where we implemented different testing solutions for different products for years. He uses Jest for unit and integration tests and TestCafe for UI tests. More links about this can be found in Awesome JavaScript Reference.
Facial-Recognition: Using React-Redux and Kairos to Identify Yourself: We are in the era where Face ID and Facial Recognition is no longer a maybe or simply good-to-have feature. It has become rather the talk of the town. So as a developer, my curiosity was heightened by the prospect of trying to create a face recognition based application and testing out this awesome feature which has been apparently bestowed to mankind. More links about this can be found in DataScienceAI MindMap.

Engineering Practices

Streaming Server-Side Rendering and Caching at Spectrum: React 16 introduced streaming server-side rendering, which allows you to send down HTML in chunks in parallel to rendering it. This enables a faster time to first byte and first meaningful paint for your users since the initial markup arrives in the browser sooner. In this guest post he describes the journey to high performance server-rendering of their React application with streaming responses and distributed caching. More links about this can be found in React Reference.
Securing Your GraphQL API from Malicious Queries: With GraphQL you can query exactly what you want whenever you want. That is amazing for working with an API, but also has complex security implications. Instead of asking for legitimate, useful data, a malicious actor could submit an expensive, nested query to overload your server, database, network, or all of these. In this guest post he describes how they secured their GraphQL API from attackers. More links about this can be found in GraphQL Reference.
Event sourcing vs CRUD: In many cases event sourcing is combined with domain-driven design (DDD) and the design pattern CQRS, but it is only partly related to the two concepts. Event sourcing is a specific procedure for storing data. Unlike the traditional approach with a relational database, event sourcing does not persist the current state of a record, but instead stores the individual changes as a series of deltas that led to the current state over time. More links about this can be found in Awesome SoftwareArchitecture Reference.

Under the hood

Promises are not neutral enough: Promises in JavaScript create problems which affect the entire ecosystem. In this blog post I’ll explain some of those problems. The basic purpose of Promises is to represent a value that will be eventually available. It could become available in the next event loop or in the next minutes. Basically Promises are not neutral enough because they introduce 4 opinions: Eager, not lazy; No cancellation; Never synchronous; then() is a mix of map() and flatMap(). More links about this can be found in Awesome JavaScript Reference.
CSS Keylogging: CSS Keylogging contains a chrome extension and Express server that exploits keylogging abilities of CSS. This attack is really simple. Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading a background-image. Using a simple script one can create a css file that will send a custom request for every ASCII character. More links about this can be found in Awesome Web Reference.
Why Decentralization Matters: During the first era of the internet — from the 1980s through the early 2000s — internet services were built on open protocols that were controlled by the internet community. During the second era of the internet, from the mid 2000s to the present, for-profit tech companies — most notably Google, Apple, Facebook, and Amazon (GAFA) — built software and services that rapidly outpaced the capabilities of open protocols. Decentralized platforms, by contrast, often launch half-baked and without clear use cases. Cryptonetworks are a powerful way to develop community-owned networks and provide a level playing field for 3rd-party developers, creators, and businesses. More links about this can be found in Awesome Reference.

OpenSource

GhostText: Use your text editor to write in your browser. Everything you type in the editor will be instantly updated in the browser (and vice versa).
Proton Native: On mobile, the React Native gives us a seamless way to build user interfaces and manage state in code, all while doing it cross platform. Proton Native does the same to desktop that React Native did to mobile. Build cross-platform apps for the desktop, all while never leaving the React eco-system. Popular React packages such as Redux still work.
vue-ethereum-ipfs: It is a distributed application starter wih Vue, Ethereum and IPFS. Ethereum is a distributed virtual machine that pays eth in return for miners running your smart contracts. IPFS is a kind of distributed content distribution network. Vue is a javascript framework for building client-side webapps. By keeping state inside ethereum and using IPFS to deliver HTML, webapps can become nearly indestructable!
basicScroll: Standalone parallax scrolling for mobile and desktop with CSS variables. basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Highly inspired by skrollr and Reactive Animations with CSS Variables.

DEV Community: 王下邀月熊(Chevalier)

fc-whiteboard, Web whiteboard screencasting

fc-whiteboard

Usage

Whiteboard live mode

Whiteboard replay mode

Use drawboard alone

Motivation & Credits

Another Awesome Lists: Systematic & Structured Guide to Galaxy

Navigation

Knowledge Graph

Notes of Don’t Make Me Think. A Common Sense Approach to Web Usability.

Chapter 1. Dont make me think

Chapter 2. How we really use the Web

Chapter 3. Billboard Design 101

Take advantage of conventions

Create effective visual hierarchies

Break pages up into clearly defined areas

Make it obvious what’s clickable

Eliminate distractions/noise

Format content to support scanning

Chapter 4. Animal, Vegetable, or Mineral? WHY USERS LIKE MINDLESS CHOICES

Some assistance may be required

Chapter 5. Omit needless words

Chapter 6. Street signs and Breadcrumbs

Web Navigation 101

Persistent navigation

Pages

Breadcrumbs

Tabs

Chapter 7. The Big Bang Theory of Web Design

Chapter 8. “The Farmer and the Cowman Should Be Friends” | 论内部协作

Chapter 9. Usability testing on 10 cents a day

Repeat after me: Focus groups are not usability tests

Do-it-yourself usability testing

The debriefing: Deciding what to fix

Chapter 10. Mobile: It’s not just a city in Alabama anymore

Breeding chameleons

Don’t hide your affordances under a bushel

Delightful & Learnable

Usability testing on mobile devices

Chapter 11. Usability as common courtesy(绅士)

Awesome Docker Links

Docker Links | Docker 资料索引

Overview

CheatSheet

Resource

Book

Tutorial

Docker Configuration Links

System

Docker Storage

Network

Dockerfile

Registry

Application

Engineering Practices

Security

Optimization

Docker Swarm Links

Docker Internals Links | Docker 内部原理资料索引

cgroup

Network

Docker OpenSource Links | Docker 开源框架与工具索引

Tool

Storage | 存储

Registry

Awesome CS Collections: Curated links of awesome sites & collections & resources

Sites: Blog & News & Forum | 博客、资讯与论坛

Universe | 通用

Interview | 面试

Programming Language | 编程语言

Software Engineering | 软件工程

Web

Server Side Application | 服务端应用程序

Infrastructure | 基础架构

Frontend | 前端

DataScienceAI

Awesome Links of Books, Courses, Examples for AI, MachineLearning, DeepLearning and Tensorflow in 2018

DataScienceAI Book Links | 机器学习、深度学习与自然语言处理领域推荐的书籍列表