React Native is an open source JavaScript library created by Facebook that allows developers to build mobile apps using React. It enables sharing of over 85% of code between iOS and Android apps. Many companies including Facebook, Microsoft, and Samsung use React Native. React Native uses the same fundamental UI building blocks as regular iOS and Android apps while allowing developers to write code using JavaScript and React.
This document provides an overview of various front-end frameworks and tools. It discusses HTML templating languages like HAML and templating engines like Handlebars. It also covers CSS preprocessors like SASS and LESS. JavaScript libraries and frameworks covered include jQuery, Backbone, Spine and CoffeeScript. Boilerplates like HTML5 Boilerplate and frameworks like Twitter Bootstrap and Zurb Foundation are also summarized. The document encourages trying new tools but not feeling overwhelmed by the many options and focusing on those most helpful.
a presentation on the responsive web designing..that tell you technology gives more efficient way to meet the end clients and solving the user experience problems
React Native is an open source framework for building mobile apps using React and JavaScript. It uses native components and allows building real mobile apps for Android and iOS. It works by using a virtual DOM layer that maps React components to native mobile components using Objective-C and Java APIs. Developers can get started using Expo or React Native CLI. Expo is easier for beginners while CLI allows more customization and third party libraries. Core concepts include components, JSX, state, props, and unidirectional data flow. React Native also includes tools like live reloading and hot reloading for faster development.
This document provides an introduction to single page applications (SPAs). It begins with an overview of traditional websites, which have multiple pages and server-based rendering. The evolution section discusses how modern browsers, JavaScript, and HTML5 have enabled a more app-like user experience with SPAs. SPAs are defined as web apps that load a single HTML page and use AJAX and JavaScript for fluid interactions without page reloads. Benefits include faster loading and improved user experience. Challenges of SPAs include search engine optimization, initial slow loading, and maintaining browser history. The document concludes with a question and answer section.
React Native is an open source JavaScript library created by Facebook that allows developers to build mobile apps using React. It enables sharing of over 85% of code between iOS and Android apps. Many companies including Facebook, Microsoft, and Samsung use React Native. React Native uses the same fundamental UI building blocks as regular iOS and Android apps while allowing developers to write code using JavaScript and React.
This document provides an overview of various front-end frameworks and tools. It discusses HTML templating languages like HAML and templating engines like Handlebars. It also covers CSS preprocessors like SASS and LESS. JavaScript libraries and frameworks covered include jQuery, Backbone, Spine and CoffeeScript. Boilerplates like HTML5 Boilerplate and frameworks like Twitter Bootstrap and Zurb Foundation are also summarized. The document encourages trying new tools but not feeling overwhelmed by the many options and focusing on those most helpful.
a presentation on the responsive web designing..that tell you technology gives more efficient way to meet the end clients and solving the user experience problems
React Native is an open source framework for building mobile apps using React and JavaScript. It uses native components and allows building real mobile apps for Android and iOS. It works by using a virtual DOM layer that maps React components to native mobile components using Objective-C and Java APIs. Developers can get started using Expo or React Native CLI. Expo is easier for beginners while CLI allows more customization and third party libraries. Core concepts include components, JSX, state, props, and unidirectional data flow. React Native also includes tools like live reloading and hot reloading for faster development.
This document provides an introduction to single page applications (SPAs). It begins with an overview of traditional websites, which have multiple pages and server-based rendering. The evolution section discusses how modern browsers, JavaScript, and HTML5 have enabled a more app-like user experience with SPAs. SPAs are defined as web apps that load a single HTML page and use AJAX and JavaScript for fluid interactions without page reloads. Benefits include faster loading and improved user experience. Challenges of SPAs include search engine optimization, initial slow loading, and maintaining browser history. The document concludes with a question and answer section.
게임 개발을 완료하고 출시 전에는 부하 테스트 과정이 필수입니다. 부하 테스트를 통해 서비스의 문제점을 미리 파악할 수 있습니다. 1부에서는 AWS 환경에서 게임 서비스에 대규모 부하를 주는 방법을 알아보겠습니다. 또한 AWS의 여러 서비스를 통해 이런 서비스 상황을 모니터링하는 방법을 알아 보겠습니다. 2부는 AWS에서 카오스 엔지니어링을 구현해보겠습니다.
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.
WebGL allows for 3D graphics rendering within web browsers using JavaScript and standard web technologies. It provides an API for accessing a computer's GPU similarly to Canvas for 2D drawing. THREE.js makes WebGL programming easier by abstracting away complexities like shader programming and matrix computations. A simple example creates a 3D cube in THREE.js with just a few lines of code versus the longer WebGL example. THREE.js provides high-level objects for cameras, lights, materials and more to build 3D scenes efficiently in the browser.
(DEV307) Introduction to Version 3 of the AWS SDK for Python (Boto) | AWS re:...Amazon Web Services
In this session, we introduce Boto 3, the next major version of the AWS SDK for Python. You will learn about the new features in the SDK, such as the high-level resource APIs that simplify working with AWS collections and objects, and the eventing model that enables customizing your calls to AWS services. We use a sample application to demonstrate these features, and show how to integrate them with your existing projects.
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...Amazon Web Services Korea
서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.
- 동영상 보기: https://www.youtube.com/watch?v=Rq4I57eqIp4
Amazon RDS 프록시는 Amazon Relational Database Service (RDS)를 위한 완전 관리형 고가용성 데이터베이스 프록시로, 애플리케이션의 확장 성, 데이터베이스 장애에 대한 탄력성 및 보안 성을 향상시킬 수 있습니다. (2020년 6월 서울 리전 출시)
This talk is about our experiences gained during making of the Killzone Shadow Fall announcement demo.
We’ve gathered all the hard data about our assets, memory, CPU and GPU usage and a whole bunch of tricks.
The goal of talk is to help you to form a clear picture of what’s already possible to achieve on PS4.
The document discusses Java performance fundamentals, including the Java architecture, programming language, class file format, API, and virtual machine (JVM). It describes how Java source code is compiled to bytecode, how the JVM executes bytecode, and how Java achieves platform independence through the use of the JVM. Key components of the Java architecture outlined include the Java programming language, class file format, API, and JVM.
This document provides an overview of Masked Occlusion Culling (MOC), a technique for efficient CPU occlusion culling. It discusses traditional software occlusion culling methods and their limitations. MOC works by directly updating a hierarchical Z-buffer without computing the full resolution depth buffer. This allows culling many pixels in parallel using SIMD instructions. The document also describes how Avalanche Studios integrated MOC into their Apex engine. They use artist-placed boxes and quad occluders as well as low-poly terrain meshes. MOC provided a smoother, more modular workflow and was more efficient than their previous box culling approach.
[NAVER D2]html5 canvas overview
HTML5 Canvas 소개 및 특징
- 소개 및 지원브라우저
- CanvasRenderingContext2D
- 즉시모드 / 보류모드
- Mouse Event 처리
Canvas 로 할 수 있는 것
- Drawing Shape
- Pixel Manipulation
- Animation
Canvas와 WebGL
Canvas와 Flash
Cavnas 적용사례
게임 개발을 완료하고 출시 전에는 부하 테스트 과정이 필수입니다. 부하 테스트를 통해 서비스의 문제점을 미리 파악할 수 있습니다. 1부에서는 AWS 환경에서 게임 서비스에 대규모 부하를 주는 방법을 알아보겠습니다. 또한 AWS의 여러 서비스를 통해 이런 서비스 상황을 모니터링하는 방법을 알아 보겠습니다. 2부는 AWS에서 카오스 엔지니어링을 구현해보겠습니다.
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.
WebGL allows for 3D graphics rendering within web browsers using JavaScript and standard web technologies. It provides an API for accessing a computer's GPU similarly to Canvas for 2D drawing. THREE.js makes WebGL programming easier by abstracting away complexities like shader programming and matrix computations. A simple example creates a 3D cube in THREE.js with just a few lines of code versus the longer WebGL example. THREE.js provides high-level objects for cameras, lights, materials and more to build 3D scenes efficiently in the browser.
(DEV307) Introduction to Version 3 of the AWS SDK for Python (Boto) | AWS re:...Amazon Web Services
In this session, we introduce Boto 3, the next major version of the AWS SDK for Python. You will learn about the new features in the SDK, such as the high-level resource APIs that simplify working with AWS collections and objects, and the eventing model that enables customizing your calls to AWS services. We use a sample application to demonstrate these features, and show how to integrate them with your existing projects.
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...Amazon Web Services Korea
서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.
- 동영상 보기: https://www.youtube.com/watch?v=Rq4I57eqIp4
Amazon RDS 프록시는 Amazon Relational Database Service (RDS)를 위한 완전 관리형 고가용성 데이터베이스 프록시로, 애플리케이션의 확장 성, 데이터베이스 장애에 대한 탄력성 및 보안 성을 향상시킬 수 있습니다. (2020년 6월 서울 리전 출시)
This talk is about our experiences gained during making of the Killzone Shadow Fall announcement demo.
We’ve gathered all the hard data about our assets, memory, CPU and GPU usage and a whole bunch of tricks.
The goal of talk is to help you to form a clear picture of what’s already possible to achieve on PS4.
The document discusses Java performance fundamentals, including the Java architecture, programming language, class file format, API, and virtual machine (JVM). It describes how Java source code is compiled to bytecode, how the JVM executes bytecode, and how Java achieves platform independence through the use of the JVM. Key components of the Java architecture outlined include the Java programming language, class file format, API, and JVM.
This document provides an overview of Masked Occlusion Culling (MOC), a technique for efficient CPU occlusion culling. It discusses traditional software occlusion culling methods and their limitations. MOC works by directly updating a hierarchical Z-buffer without computing the full resolution depth buffer. This allows culling many pixels in parallel using SIMD instructions. The document also describes how Avalanche Studios integrated MOC into their Apex engine. They use artist-placed boxes and quad occluders as well as low-poly terrain meshes. MOC provided a smoother, more modular workflow and was more efficient than their previous box culling approach.
[NAVER D2]html5 canvas overview
HTML5 Canvas 소개 및 특징
- 소개 및 지원브라우저
- CanvasRenderingContext2D
- 즉시모드 / 보류모드
- Mouse Event 처리
Canvas 로 할 수 있는 것
- Drawing Shape
- Pixel Manipulation
- Animation
Canvas와 WebGL
Canvas와 Flash
Cavnas 적용사례
HTML5에는 CSS3D, Canvas, WebGL등의 전통적인 웹 개발의 영역을 넘어서는 그래픽 API들이 추가되었다.
웹 개발자들에게 생소할 수 있는 있는 이런 API들의 원리와 개발상의 팁들을 공유하고 현재의 현황과 어떻게 발전시킬 수 있을지 함께 이야기해보고자 한다.
The document discusses various machine learning clustering algorithms like K-means clustering, DBSCAN, and EM clustering. It also discusses neural network architectures like LSTM, bi-LSTM, and convolutional neural networks. Finally, it presents results from evaluating different chatbot models on various metrics like validation score.
The document discusses challenges with using reinforcement learning for robotics. While simulations allow fast training of agents, there is often a "reality gap" when transferring learning to real robots. Other approaches like imitation learning and self-supervised learning can be safer alternatives that don't require trial-and-error. To better apply reinforcement learning, robots may need model-based approaches that learn forward models of the world, as well as techniques like active localization that allow robots to gather targeted information through interactive perception. Closing the reality gap will require finding ways to better match simulations to reality or allow robots to learn from real-world experiences.
[243] Deep Learning to help student’s Deep LearningNAVER D2
This document describes research on using deep learning to predict student performance in massive open online courses (MOOCs). It introduces GritNet, a model that takes raw student activity data as input and predicts outcomes like course graduation without feature engineering. GritNet outperforms baselines by more than 5% in predicting graduation. The document also describes how GritNet can be adapted in an unsupervised way to new courses using pseudo-labels, improving predictions in the first few weeks. Overall, GritNet is presented as the state-of-the-art for student prediction and can be transferred across courses without labels.
[234]Fast & Accurate Data Annotation Pipeline for AI applicationsNAVER D2
This document provides a summary of new datasets and papers related to computer vision tasks including object detection, image matting, person pose estimation, pedestrian detection, and person instance segmentation. A total of 8 papers and their associated datasets are listed with brief descriptions of the core contributions or techniques developed in each.
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지NAVER D2
This document presents a formula for calculating the loss function J(θ) in machine learning models. The formula averages the negative log likelihood of the predicted probabilities being correct over all samples S, and includes a regularization term λ that penalizes predicted embeddings being dissimilar from actual embeddings. It also defines the cosine similarity term used in the regularization.
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기NAVER D2
The document discusses running a TensorFlow Serving (TFS) container using Docker. It shows commands to:
1. Pull the TFS Docker image from a repository
2. Define a script to configure and run the TFS container, specifying the model path, name, and port mapping
3. Run the script to start the TFS container exposing port 13377
The document discusses linear algebra concepts including:
- Representing a system of linear equations as a matrix equation Ax = b where A is a coefficient matrix, x is a vector of unknowns, and b is a vector of constants.
- Solving for the vector x that satisfies the matrix equation using linear algebra techniques such as row reduction.
- Examples of matrix equations and their component vectors are shown.
This document describes the steps to convert a TensorFlow model to a TensorRT engine for inference. It includes steps to parse the model, optimize it, generate a runtime engine, serialize and deserialize the engine, as well as perform inference using the engine. It also provides code snippets for a PReLU plugin implementation in C++.
The document discusses machine reading comprehension (MRC) techniques for question answering (QA) systems, comparing search-based and natural language processing (NLP)-based approaches. It covers key milestones in the development of extractive QA models using NLP, from early sentence-level models to current state-of-the-art techniques like cross-attention, self-attention, and transfer learning. It notes the speed and scalability benefits of combining search and reading methods for QA.
3. 목차 (http://bit.ly/deview_canvas)
● Canvas의 역사
● 브라우저는 어떻게 그림을 그리나?
● Canvas는 어떻게 그림을 그리나?
● Canvas Animation의 문제점
● 기존의 Canvas Animation 개선안들
● 새로운 API의 도입 OffscreenCanvas
● How to use Offscreen Canvas
● 사례 연구 및 그 밖의 실험
5. WebCore/html/HTMLCanvasElement.h
/*
* Copyright (C) 2004-2017 Apple Inc. All rights reserved.
* Copyright (C) 2007 Alp Toker <alp@atoker.com>
* Copyright (C) 2010 Torch Mobile (Beijing) Co. Ltd. All rights reserved.
*
* ...
*
*/
19. Rendering Engine에 의해 그리는 방법 결정
LayoutCanvas
Root
PaintLayer
PaintLayer
LayoutBlock
LayoutBlock
LayoutButton
Rendering
Engine
20. Rendering Engine에 의해 그리는 방법 결정
LayoutCanvas
Root
PaintLayer
PaintLayer
LayoutBlock
LayoutBlock
LayoutButton
Rendering
Engine
중요한 것은 어떤 모양으로,
어느 위치에 어느정도 크기로,
어떤 순서로 그릴지를 결정
21. Rendering Engine에 의해 그리는 방법 결정
Root
PaintLayer
LayoutBlock
LayoutBlock
LayoutButton
Graphics
Library
Hello
drawRoundRect();
drawText();
어떻게 그림을 그릴지에 대한 정보가 담겨있다
22. 여기서 중요한 것은 Rendering Engine이
<button></button>을 어떻게 그릴지를 알고있다
53. 참고1: “Accelerated compositing in WebKit: Now and in the future”, 데뷰 2015, 황광윤
- https://deview.kr/2015/schedule#session/75
참고2: “WebKit의 GPU 렌더링”, 데뷰 2012, 황동성
- https://deview.kr/2012/xe/index.php?mid=track&document_srl=374&time_srl=265
참고3: “웹 성능 최적화에 필요한 브라우저의 모든 것”, 데뷰 2018, 이형욱
- https://deview.kr/2018/schedule/252
73. OffscreenCanvas란?
● Canvas Rendering을 DOM과는 별개로 Worker thread에서 수행할 수 있도록
해주는 새로운 API
● 기존의 Canvas Rendering Logic은 고치지 않고 thread만 옮겨가서 그대로
수행할 수 있도록 고안
● Chrome 69 Stable에 이미 Shipping
74. 16.7 ms16.7 ms
Main thread
Javascript
Overhead
Skia
Overhead
DOM
Overhead
GPU Process
Raster
Raster Raster
Raster
Raster Raster
다시 참혹한 현실..
75. 16.7 ms16.7 ms
Main thread Javascript
DOM
Rendering
Worker thread
Canvas
Javascript
Skia
Canvas
Javascript
Skia
Skia
OffscreenCanvas를 도입하면..
76. 16.7 ms16.7 ms
Main thread Javascript
DOM
Rendering
Worker thread
Canvas
Javascript
Skia
Canvas
Javascript
Skia
Skia
GPU Process
Raster
Raster Raster
Raster
Raster Raster
OffscreenCanvas를 도입하면..
92. The aim of the project is to create an easy to use,
lightweight, 3D library. The library provides Canvas 2D, SVG,
CSS3D and WebGL renderers.
93. 일반적인 Three.js의 Renderer 생성
const renderer = new THREE.WebGLRenderer();
renderer.render(scene, camera);
94. Three.js에서 OffscreenCanvas 사용
const offscreen = canvas.transferControlToOffscreen();
const renderer = new THREE.WebGLRenderer({
canvas: offscreen
});
renderer.render(scene, camera);
95. 일반적인 Three.js의 Texture 생성
// TextureLoader has a DOM dependency (HTMLImageElement)
const t = new THREE.TextureLoader().load('textures/crate.gif');
96. OffscreenCanvas를 사용할 때 Texture 생성
const loader = new THREE.ImageBitmapLoader();
loader.load( '../../textures/crate.gif', imageBitmap => {
const texture = new THREE.CanvasTexture(imageBitmap);
}, ...);