刘勇的博客

发表于 更新于 分类于

Why Webpack

slides

Problems with Script Loading

There is only two ways that you can actually make JS to work in borwser.

  1. Adding a script tag for passing a source.
  2. Write your job description to HTML.

Problems:

  • Doesn’t scale
  • Too many scripts
    每个浏览器都有不同的同时请求数量的限制（针对HTTP1.1，HTTP2等协议除外）。
  • Unmaintainable scripts
  • Scope
  • Size
  • Readability
  • Fragility
  • Monolith files

Solution:

  • IIFE(Immediately-Invoked-Function-Expression 立即执行函数)

  • Module(Treat Each File as IIFE)

    • We can “safely” combine files without concern of scope collision!*
    • Make, Grunt, Gulp, Broccoli, Brunch, StealJS
      阅读全文 »

发表于 更新于 分类于

The Slience

Introduction

The Soul of Functional Programming: Separation and Recognition

函数式编程的灵魂:分离和识别

The structure of the course

  1. The Slience
  2. The Voyage
  3. The Demo

In the beginning…

发表于 更新于 分类于

Building Blocks

Introduction

The goal: To learn how to solve big async problems just by thinking differently about events
目标:通过对事件的不同思考来学习如何解决大型异步问题

Async seems hard

  • Race Conditions
    竞态条件
  • Memory Leaks
    内存泄漏
  • Complex State Machines
    复杂状态
  • Uncaught Async Errors
    无法捕获异步错误
    阅读全文 »

发表于 更新于 分类于

Introduction

sildes

The 5 capacities we look for in candidates

  1. Analytical problem solving with code

    用代码解决问题的能力

  2. Technical communication (can I implement your approach just from your explanation)

    技术沟通能力（我能仅仅通过你的解释就能实现你的方法吗）

  3. Engineering best practices and approach (Debugging, code structure, patience and reference to documentation)

    编程的最佳实践和方法（调试，代码结构，耐心和文档引用）

  4. Non-technical communication(empathetic and thoughtful communication)

    非技术沟通的能力（同理心和有思想的交流）

  5. Language and computer science experience

    编程语言和计算机科学经验

Our expectations

  • Support each other - engineering empathy is the cirtical value at Codesmith
  • Work hard, Work smart
  • Thoughtful communication
阅读全文 »

发表于 更新于 分类于

Getting Started with Full Stack

Course Introduction

Slides

Part 1

Things you’ll learn

  • Learn how to use Node and Bash to create shell scripts
  • Learn advanced Nginx configuration
  • Common server vulnerabilibies and how to mitigate them
  • How to add HTTPS to your server
  • Understand databases
  • Containers and automating deployments
    阅读全文 »

发表于 更新于 分类于

Introduction

This course is unique as compared to other React introductions because this course attempts to teach you not only React but the ecosystem around React. When I was learning React myself, I found myself frustrated that it seemed like every tutorial started on step 14 and left out the steps 1-13 of how to set up a React project. React is nearly never used by itself so it’s useful to know the tools you’re using. I believe you as a developer should know how your tools works and what purpose they’re serving. Many times have I taught courses similar to this one to hear people using tools and complaining about them because they don’t actually know why they’re using them, just that they’re necessary. As such, in this course we show you how to build projects without any using tools at all and introduce the various tools, one at a time so you understand the actual problem being solved by the tool. Hopefully given the knowledge of the problem solved by the tool you’ll embrace the tools despite their complexities due to the ease and power they offer you.

github

course note

sourcetree

Git In-depth

Front End Happy Hour

阅读全文 »

发表于 更新于 分类于

Introduction

CSS Mastery Workshop

CSS Introduction

CSS(Cascading Style Sheets层叠样式表)

Separation of Concerns

HTML代表了网页结构，CSS代表了网页的表现形式，JS代表了网页的行为，这是对HTML，css以及JS在最初对其范围的划分。

CSS tells the browser how HTML content is to be presented to the user

现在许多人在js中编写动画，作者认为这偏离了最初对于js适用范围的界定，因为动画中并没有数据交互，只是动态的网页展示部分，应该归属于CSS的范畴。

在HTML的头部中添加最小化的CSS样式可以提高网页首次加载的速度（网页只有在css加载完后才会显示出来），所以将css放在html中可以减少http请求数量，可以提升首次加载速度，但如果每次加载网页都要重新加载头部信息中的css，那么就会降低性能表现。

所以可以最小化一些样式放在首页，然后加载一些外联样式保存在缓存中来提升多次加载的性能表现。

阅读全文 »
0%