weekly

第 2 期 11/09 W3C WORKSHOP REPORT: WEB AND MACHINE LEARNING

行业资讯

高德的执念、迷思与希冀

今年十一期间,高德通过线上18分钟的发布会,宣布推出高德出游指南,覆盖全国350个城市出行、美食、住宿等相关本地服务。 自从被阿里收购之后,高德一直对本地生活服务有执念,这么多年过去了,仍是对此念念不忘。

华为获得微软许可,全面解禁已成趋势

日前,英国金融时报消息称微软的申请也于近日得到批准,Windows操作系统的授权工作可继续对华为开展。而此前Intel、AMD、三星显示、索尼、Skyworks思佳讯等均已拿到对华为的供货许可。高通和MTK传言也非常接近许可。重重迹象表明,美国对华为的所谓限制正在被打破。如果美国政局发生变化,华为将迎来全面解禁。

饿了么:首现4家品牌销售额入列双11“亿元俱乐部”

36氪获悉,饿了么数据显示,11月1日至3日,肯德基、星巴克、麦当劳、华莱士4家餐饮品牌实现销售额破亿。饿了么上双11“亿元俱乐部”的数量同比去年双11翻番增长。餐饮“囤券”式消费也在双11迎来核销高峰。11月1日至11月3日期间,饿了么、口碑上商家卡券核销对比去年同期增长317%;而在11月1日当天,卡券核销增长超了6倍。

携程的新流量生意

简而言之,以前,携程是个交易平台,以后,携程是个营销交易平台。携程的流量生意,有了新的生意经。

Booking集团Q3净利润8亿美元,总预订量下降47%

北京时间11月6日凌晨,全球最大OTA集团Booking Holdings公布了今年第三季度财报:总预订量为134亿美元,同比下降了47%。本季度的预订间夜量为1.27亿个间夜,同比减少了43%。

技术热闻

W3C WORKSHOP REPORT: WEB AND MACHINE LEARNING

https://www.w3.org/2020/06/machine-learning-workshop/report.html

This report contains a brief summary and collects highlights from the individual sessions, and links to the presentation videos. This first-ever virtual W3C workshop kicked off with the publication of 34 talks in August 2020 discussing opportunities and challenges of browser-based machine learning, web platform foundations, as well as developer’s, and user’s perspectives into machine learning technologies in the context of the web platform.

Malicious npm package opens backdoors on programmers’ computers

JavaScript library posing as a Twilio-related library opens backdoors to let attackers access infected workstations.The npm security team has removed today a malicious JavaScript library from the npm website that contained malicious code for opening backdoors on programmers’ computers. The JavaScript library was named “twilio-npm,” and its malicious behavior was discovered over the weekend by Sonatype, a company that monitors public package repositories as part of its developer security operations (DevSecOps) services.

What’s the deal with SvelteKit?

We’re rethinking how to build Svelte apps. Here’s what you need to know

FE and software

React Native Vs Flutter : Ultimate Comparison 2020

Here, we have learned the pros and cons of both frameworks. It is quite difficult to decide which one is the best and there is definitely a strong competition between the two. React Native is the framework that has already made its mark and is continuously growing as well. Flutter is starting to blossom into an amazing mobile application development framework that most developers and companies will turn to in the near future. However, there are still some miles to go. As a matter of fact, the company that already has a JavaScript team for web development will definitely find it easier to transition to React Native the mobile counterpart. Flutter and dart would be new technology better suited for beginners familiar with languages like Java. Hence, both are the potential giants in the world of next-generation mobile applications. React Native has already shown and established its capabilities whereas Flutter is establishing its capabilities.

Building Serverless Front-End Applications Using Google Cloud Platform

The use of serverless applications by developers to handle the business logic of their applications in on the high increase, but how does the Google Cloud — a major service provider within the public cloud — allow developers to manage serverless applications? In this article, you will learn what serverless applications are, how they are used on the Google Cloud, and also scenarios in which they can be used in a front-end application.

前端智能化 2020 年中总结和反思

企业级数据可视化应用有哪些机遇与挑战?

今天准备的主题叫做“企业级数据可视化应用的机遇与挑战”,偏向于设计体验和工程实现,主要来自于过去这些年自己在这个领域内的一些实践体会和思考,希望作为引子能给大家带来一点灵感或启发。 AntV 是蚂蚁集团的数据可视化解决方案,甚至可以说是整个阿里数据可视化的基础设施,从15年发起至今已经迭代了5年,支撑着集团内外2万+企业级应用。在这些年里我们也走过弯路,踩过很多坑,也逐渐看到些这个领域未来的趋势,所以会有今天想跟大家分享一些我们的实践和思考。

前端组件化埋点实践

我们在音街移动站中进行了迁移、在多个运营活动中进行了使用,达到了我们预期的目标;在提效方面,埋点库把费时的部分处理了,我们需要做的就是从埋点平台把坑位信息放入配置文件,业务开发的时候使用对应的组件就可以了,几乎没有太大的成本,且对于代码复用和维护来说也达到了目的。 在使用过程中发现对于点击类埋点 appendQueue 使用频率远高于 TrackerClick 组件,因为大部分元素的点击事件都有他自己的回调函数,但是我们使用 TrackerClick 的初衷是埋点代码和业务代码解耦,这个也要根据实际场景去选择。

4 Ways to Communicate Across Browser Tabs in Realtime

Over the years, Web Browser capabilities have ever increased due to the demands coming from web applications. As a result, we can find multiple ways of achieving similar functionality. One such feature we rarely look at is the ability to communicate across Browser Tabs. Let’s look at a few scenarios where you need this.

Rollup: CommonJS to UMD

Whereas Webpack is great for building apps, Rollup is great for building libraries.

Effective Skeleton Screens

For those unfamiliar, a skeleton screen is a method of displaying the outline (skeleton) of the content to come, typically using gray boxes and lines instead of a progress bar while content is loading. It’s a pretty creative approach to handling wait—undoubtedly more creative and helpful than a perpetually spinning circle. But even good ideas can become bad ones if we stray too much from the original intent.

ES2020 Optional Chaining and Dynamic Imports Are Game-Changers. Here’s Why.

Optional Chaining is simply a feature that allows you to safely access deeply nested properties of an object without having to check for the existence of each of them. Optional Chaining uses the ?. operator to access the properties of objects. The usage of the ?. operator is very similar to the typical . operator, but when a reference is undefined or null, rather than throwing an error, it would return undefined. Dynamic Imports allow you to import JS files dynamically as modules in your application natively. Prior to ES2020, your module should be imported whether the module is used or not. This is a feature that would immensely help improve the performance of your website.

20 Inspirational Front-End Challenges You Can Start Coding Today – Challenge yourself and bring your front-end skills to the next level

As a developer, the more projects and experience you have, the better you become. Coding is a muscle that, like any other, requires constant exercise. Why not spend a couple of evenings on a side project and put in the extra effort to become exceptionally better at coding? Without further ado, here’s the list of coding ideas for boosting your front-end development skills. Use this article as a source of inspiration for your next project.

How Web Apps Work: Client Development and Deployment – An overview of the concepts, terms, and data flow used in web apps: JS client development environment, tooling, and deployment https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-client-dev-deployment/_ Web development is a huge field with a vast array of concepts, terms, tools, and technologies. For people just getting started in web dev, this landscape is often bewildering - it’s unclear what most of these pieces are, much less how they fit together. This post provides an overview of fundamental web dev concepts and technologies, what these pieces are, why they’re needed, and how they relate to each other. It’s not a completely exhaustive reference to everything in web development, nor is it a “how to build apps” guide. Instead, it’s a map of the territory, intended to give you a sense of what the landscape looks like, and enough information that you can go research these terms and topics in more depth if needed.

Implementing a Staged Approach to Evolutionary Architecture

Traditionally, software architecture and design phases have been considered as initial phases. In this approach, the architecture decisions were considered valid for the entire life of the system. With the wisdom of ages and in reaction to industry transformations, we have started to see architecture as evolving. This evolution necessitates a different set of approaches in the direction of continuous planning, facilitating via continuous integration, dashboards, and tools, thus providing guide rails for systems to evolve. This article focuses on these approaches and tools to support the journey.

微信小程序入门教程之四:API 使用

写到这里,这个小程序入门教程就告一段落了,入门知识基本上都涉及了。下一步,大家可以阅读小程序的官方教程使用文档,争取对小程序 API 有一个整体的把握,然后再去看看各种实际项目的源码,应该就可以动手开发了。以后,我还会写小程序的进阶教程,包括云开发,介绍如何写小程序的后端,下次再见。

Rockpack - Skip config, code React - Interview with Sergey Aleksandrov

As you might know, configuring webpack isn’t the most fun thing in the world and that’s exactly the reason why I wrote a thick book about it. For many React users, either Create React App (CRA) or framework such as Next.js hides a lot of the complexity. In this interview, we’ll learn about a new solution called Rockpack from its creator Sergey Aleksandrov.**

Back to Basics: Event Delegation

One of my favourite tricks when it comes to building web interfaces is Event Delegation Events don’t just happen on the element you apply them to. Instead they go all the way down the DOM tree to the event and back up again. These phases of the event lifecycle are called event bubbling and event capture.

Comparing Various Ways to Hide Things in CSS

Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn’t bulletproof because now that content is now “inaccessible” to screen readers. It’s tempting to use it, but especially in cases where something is only meant to be visually hidden, don’t reach for it.

| Display | Visibility | Opacity | Position | Accessible Way | | ———– | ————– | ———– | ———— | —————— |

设计

These are the UI/UX trends you need to keep an eye out for in 2021

All industries change over time. But the evolution of the design industry is the one that gets highlighted a lot. Design is one area in a product that needs to improve and advance more frequently than others. That is why product innovators and product designers should always stay ahead of the competition to make the products usable and aesthetically attractive. What are the trends that product innovators and product designers need to look out for in the coming year? What areas will play critical roles for our products to stand out? Let’s take a firm look.

12 Design Trends to Dominate

Digital tendencies and users’ expectations change every day. Some trends become outdated and move beyond, but others gain ground.

[UI/UX Mastery 2021 Pt.2: Conceptualizing & Ideation](https://uxplanet.org/ui-ux-mastery-2021-pt-2-conceptualizing-ideation-ceb835f7a5b7)

In this 4-part series, we’re covering how to research, conceptualize, design, and develop the UI for a SaaS product from the ground-up, using best-practices, tools, and techniques you can use in your next product or service design life-cycle. You’ve done your research, you have some quotes from your users that your team has decided are the key descriptors of pain points, or product features that are the highest priority. Now what? In this article, we’re going to cover:

Elements that Make a Good Design!

The core purpose of design is to construct a product that will assist the user in achieving a goal with as little friction as possible. Good design is often mistaken for the appealing coordination of colors or the pristine arrangement of components. On a basic level, this distinction reflects two fields involved in designing applications — UX and UI design; which can also be applied to the process of designing physical products.

UX Specializations. Let your skillset do the talking next time.

Nothing to a designer Designer to a Web Designer Web designer to a UX/UI Designer UX/UI Designer to where? Such a long journey isn’t it? still, it’s not the end yet.

BUILD A WEBSITE WITH NO CODE

This video class is aimed at beginners who are interested in building websites but don’t enjoy messing with code. You will be taking a website I designed in Figma, and turning it into a website in Webflow. I show you exactly how to do it step-by-step.

My Experience At Adobe Max 2020

Adobe Max is a conference hosted annually by Adobe for creatives around the world. There are sessions for basically every creative discipline you could imagine. This year, Max was FREE. This presented a fantastic opportunity for young creatives like myself to join in on the fun that design conferences offer.

Part of your world: Why we’re proud to build a truly native Mac app

Ten years after the first release of Sketch, a lot has changed. The design tools space has grown. Our amazing community has, too. Even macOS itself has evolved. But one thing has remained the same: our love for developing a truly native Mac app.

成长

博客十年

是的,我的个人博客今天迎来了第 10 个年头。今天碎碎念一篇这 10 年对我有很深影响的人和事情,以及感想。

The Only Step You Need to Progress in Your Career as a Developer or Engineer.

I don’t usually like to write articles about myself, as it feels a bit self-indulgent, but I thought it would be useful to show examples of how I became ‘T’ shaped and how my career progressed. The center of the ‘T’ represents the experience of understanding a particular area of technology or framework. The top part of the ‘T’ refers to an ability to collaborate with experts from other disciplines, gaining even greater understanding and knowledge from this collaboration.

What I Learned after 4 Years of React Development

Today I was making some reflections on what challenges and new things I learned in the last few years, specifically related to programming or computer science in general. It is fair to say that I explored many new things, from IoT, computer vision, deep learning, blockchain development, and more on the programming side.

延伸阅读

科技爱好者周刊(第 132 期):快能力和慢能力

这里记录每周值得分享的科技内容,周五发布。