An introduction to Vue.jsPageproThe document provides an introduction to Vue.js, highlighting its ease of use, ecosystem, and the companies that utilize it, such as GitLab and Alibaba. It outlines key features like template file components, virtual DOM, and built-in transitions, as well as essential tools like vue-router and vuex. The document also includes code examples illustrating the structure of Vue components and usage of directives.
HTML X CSSCeasr ChenThe document provides an introduction to HTML and CSS. It begins with an overview of HTML tags for headings, paragraphs, and other basic text elements. It then covers CSS selectors, properties, and how CSS is used to style HTML elements by targeting them with selectors and assigning property values. Examples are given for common CSS properties like font styles, colors, sizes and positioning elements using width, height, margins and padding.
Rxjs ngvikingsChristoffer NoringRxjs provides a paradigm for dealing with asynchronous operations in a way that resembles synchronous code. It uses Observables to represent asynchronous data streams over time that can be composed using operators. This allows handling of events, asynchronous code, and other reactive sources in a declarative way. Key points are:
- Observables represent asynchronous data streams that can be subscribed to.
- Operators allow manipulating and transforming streams through methods like map, filter, switchMap.
- Schedulers allow controlling virtual time for testing asynchronous behavior.
- Promises represent single values while Observables represent continuous streams, making Observables more powerful for reactive programming.
- Cascading asynchronous calls can be modeled elegantly using switch
HTML Dasar : #5 HeadingSandhika GalihDokumen tersebut berisi daftar judul heading dari level satu hingga enam yang digunakan pada dokumen HTML. Dokumen tersebut juga berisi ucapan terima kasih dan alamat email.
An introduction to Vue.jsJavier Lafora ReyThis document provides a detailed overview of Vue.js, including its core concepts, advantages of using a frontend framework, and step-by-step guidance on building a Vue.js application. Key topics discussed include reactivity, component-based architecture, state management with Vuex, and routing with Vue Router. The document also includes code snippets for implementing various features within a Vue.js project.
HTML Dasar : #8 ImageSandhika Galihݺߣ pendukung untuk mata kuliah Pemrograman Web 1 di Jurusan Teknik Informatika Universitas Pasundan Bandung.
Digunakan juga sebagai pendukung untuk video di channel youtube "WebProgrammingUNPAS"
https://www.youtube.com/channel/UCkXmLjEr95LVtGuIm3l2dPg
Rxjs pptChristoffer NoringRxJs - demystified provides an overview of reactive programming and RxJs. The key points covered are:
- Reactive programming focuses on propagating changes without explicitly specifying how propagation happens.
- Observables are at the heart of RxJs and emit values in a push-based manner. Operators allow transforming, filtering, and combining observables.
- Common operators include map, filter, reduce, buffer, and switchMap. Over 120 operators exist for tasks like error handling, multicasting, and conditional logic.
- Marble diagrams visually demonstrate how operators transform observable streams.
- Creating observables from events, promises, arrays and iterables allows wrapping different data sources in a uniform API
Lab #2: Introduction to JavascriptWalid AshrafThis document provides an introduction to JavaScript and its uses for web programming. It explains that JavaScript is a client-side scripting language that allows web pages to become interactive. Some key points covered include:
- JavaScript can change HTML content, styles, validate data, and make calculations.
- Functions are blocks of code that perform tasks when invoked by events or called in code.
- Events like clicks or keyboard presses trigger JavaScript code.
- The DOM (Document Object Model) represents an HTML document that JavaScript can access and modify.
- Forms and user input can be accessed and processed using the DOM.
- Programming flow can be controlled with conditional and loop statements.
-
CSS Dasar #10 : SpecificitySandhika GalihDokumen tersebut membahas tentang specificity dalam CSS, yaitu berat setiap deklarasi CSS yang menentukan seberapa spesifik suatu elemen dapat dipilih oleh selector. Selector dengan ID (#) paling spesifik, diikuti class (.), element, dan inline. Specificity dapat ditingkatkan dengan menambahkan ID, class, atau elemen agar selector lebih spesifik.
Front end architectureRemus LanguThe document discusses front-end architecture, which aims to improve code quality and create an efficient workflow. It outlines the responsibilities of a front-end architect in designing tools and processes. Some common front-end architecture patterns and principles are explained, like separation of concerns, CSS architectures (BEM, OOCSS, SMACSS), JavaScript architectures (MVC, MVP, MVVM), and abstractions (components, templates, state management). Tools and processes for building, testing, deploying code are also covered.
Javascript BasicsVishal MittalJavaScript is the programming language of the web that allows for dynamic and interactive effects on web pages. It was created in the 1990s by Netscape and Sun Microsystems and has evolved through several versions. JavaScript code runs directly in the browser and is used to add interactivity to HTML pages through elements like variables, arrays, and functions. Common applications of JavaScript include slideshows, dropdown menus, form validation, popups, and automatic page refreshes. Its advantages include client-side execution, ease of use, and speed, while developers must be careful of issues like case sensitivity and proper syntax.
Vue.js Getting StartedMurat DoğanThis document provides an introduction and overview of Vue.js, including:
- What Vue.js is and how it compares to other frameworks
- The basic concepts of single file components and getting started quickly
- How to create a development environment in one minute
- Core Vue.js features like directives, computed properties, binding styles and classes, and list rendering
- Links to additional resources on using Vue.js for routing and the latest news
Angular Advanced RoutingLaurent DuveauThis document provides an overview of advanced Angular routing techniques presented by Laurent Duveau at the Angular Vancouver Meetup. It covers topics such as lazy loading, preloading modules, router events, route guards, and auxiliary routes while also providing code examples. The presentation highlights the importance of enhancing user experience through optimized routing strategies in Angular applications.
React js - The Core ConceptsDivyang BhambhaniThe document discusses React's virtual DOM and how it allows for more efficient DOM updates compared to directly manipulating the real DOM. It explains that the virtual DOM is an in-memory representation of the real DOM that allows React to calculate efficient DOM changes before applying them to the real DOM. This avoids unnecessary re-renders and improves performance. It also describes how React uses a diff algorithm and DOM traversal with breadth-first search to determine the minimal number of operations needed to transform the virtual DOM before updating the real DOM in a batched way.
React JS - A quick introduction tutorialMohammed FazuluddinThis document provides an overview and introduction to React JS. It discusses that React JS is a JavaScript library developed by Facebook for building user interfaces and reusable UI components. It encourages creation of reusable components that present data that changes over time. The document also covers React JS features, architecture, components, best practices, pros and cons, and provides useful links for examples and environment setup.
JavaScript & Dom ManipulationMohammed ArifJavaScript can dynamically manipulate the content, structure, and styling of an HTML document through the Document Object Model (DOM). The DOM represents an HTML document as nodes that can be accessed and modified with JavaScript. Common tasks include dynamically creating and adding elements, handling user events like clicks, and updating content by accessing DOM elements by their id or other attributes.
Integration patterns in AEM 6Yuval AraratThis document discusses integration patterns in Adobe Experience Manager (AEM), including using Sling Models for dependency injection and accessing resources from different locations through a single ResourceResolver. It provides examples of integrating with backend APIs, databases, file systems and forms using techniques like ResourceProviders, Sling Filters and custom SlingServlets. It also covers accessing files from bundles and the filesystem using BundleResourceProvider and FsResourceProvider respectively.
Why Vue.js?Jonathan GoodeVue.js is a progressive JavaScript framework for building user interfaces. It focuses only on the view layer and makes no assumptions about the rest of your code. Vue.js allows you to progressively adopt it into existing projects and features simple and flexible APIs. Performance benchmarks show Vue.js to be one of the fastest frameworks available.
Implementing DDD with C#Pascal LaurinThe document outlines the principles and practices of Domain-Driven Design (DDD) using C#, emphasizing the importance of centering the domain in software architecture and employing a ubiquitous language. It covers concepts such as entities, value objects, aggregates, factories, repositories, and bounded contexts, illustrating how to structure applications while ensuring proper domain modeling and the separation of business logic from infrastructure concerns. Additionally, it discusses patterns for implementing DDD, including the hexagonal architecture, and concludes with references for further reading on DDD.
HTML Dasar : #4 ParagrafSandhika GalihDokumen ini terdiri dari elemen HTML seperti paragraf, pemformatan teks, dan tanda pemisah. Terdapat informasi kontak berupa alamat email. Struktur dokumen ini tidak memberikan konten yang jelas.
An introduction to React.jsEmanuele DelBonoThis document provides an introduction to React.js, including:
- React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change.
- The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way.
- Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.
Spring Boot TutorialNaphachara RattanawilaiSpring Boot is a framework for creating stand-alone, production-grade Spring based Applications that can be "just run". It provides starters for auto-configuration of common Spring and third-party libraries providing features like Thymeleaf, Spring Data JPA, Spring Security, and testing. It aims to remove boilerplate configuration and promote "convention over configuration" for quick development. The document then covers how to run a basic Spring Boot application, use Rest Controllers, Spring Data JPA, Spring Security, and testing. It also discusses deploying the application on a web server and customizing through properties files.
HTML Dasar : #8 ImageSandhika Galihݺߣ pendukung untuk mata kuliah Pemrograman Web 1 di Jurusan Teknik Informatika Universitas Pasundan Bandung.
Digunakan juga sebagai pendukung untuk video di channel youtube "WebProgrammingUNPAS"
https://www.youtube.com/channel/UCkXmLjEr95LVtGuIm3l2dPg
Rxjs pptChristoffer NoringRxJs - demystified provides an overview of reactive programming and RxJs. The key points covered are:
- Reactive programming focuses on propagating changes without explicitly specifying how propagation happens.
- Observables are at the heart of RxJs and emit values in a push-based manner. Operators allow transforming, filtering, and combining observables.
- Common operators include map, filter, reduce, buffer, and switchMap. Over 120 operators exist for tasks like error handling, multicasting, and conditional logic.
- Marble diagrams visually demonstrate how operators transform observable streams.
- Creating observables from events, promises, arrays and iterables allows wrapping different data sources in a uniform API
Lab #2: Introduction to JavascriptWalid AshrafThis document provides an introduction to JavaScript and its uses for web programming. It explains that JavaScript is a client-side scripting language that allows web pages to become interactive. Some key points covered include:
- JavaScript can change HTML content, styles, validate data, and make calculations.
- Functions are blocks of code that perform tasks when invoked by events or called in code.
- Events like clicks or keyboard presses trigger JavaScript code.
- The DOM (Document Object Model) represents an HTML document that JavaScript can access and modify.
- Forms and user input can be accessed and processed using the DOM.
- Programming flow can be controlled with conditional and loop statements.
-
CSS Dasar #10 : SpecificitySandhika GalihDokumen tersebut membahas tentang specificity dalam CSS, yaitu berat setiap deklarasi CSS yang menentukan seberapa spesifik suatu elemen dapat dipilih oleh selector. Selector dengan ID (#) paling spesifik, diikuti class (.), element, dan inline. Specificity dapat ditingkatkan dengan menambahkan ID, class, atau elemen agar selector lebih spesifik.
Front end architectureRemus LanguThe document discusses front-end architecture, which aims to improve code quality and create an efficient workflow. It outlines the responsibilities of a front-end architect in designing tools and processes. Some common front-end architecture patterns and principles are explained, like separation of concerns, CSS architectures (BEM, OOCSS, SMACSS), JavaScript architectures (MVC, MVP, MVVM), and abstractions (components, templates, state management). Tools and processes for building, testing, deploying code are also covered.
Javascript BasicsVishal MittalJavaScript is the programming language of the web that allows for dynamic and interactive effects on web pages. It was created in the 1990s by Netscape and Sun Microsystems and has evolved through several versions. JavaScript code runs directly in the browser and is used to add interactivity to HTML pages through elements like variables, arrays, and functions. Common applications of JavaScript include slideshows, dropdown menus, form validation, popups, and automatic page refreshes. Its advantages include client-side execution, ease of use, and speed, while developers must be careful of issues like case sensitivity and proper syntax.
Vue.js Getting StartedMurat DoğanThis document provides an introduction and overview of Vue.js, including:
- What Vue.js is and how it compares to other frameworks
- The basic concepts of single file components and getting started quickly
- How to create a development environment in one minute
- Core Vue.js features like directives, computed properties, binding styles and classes, and list rendering
- Links to additional resources on using Vue.js for routing and the latest news
Angular Advanced RoutingLaurent DuveauThis document provides an overview of advanced Angular routing techniques presented by Laurent Duveau at the Angular Vancouver Meetup. It covers topics such as lazy loading, preloading modules, router events, route guards, and auxiliary routes while also providing code examples. The presentation highlights the importance of enhancing user experience through optimized routing strategies in Angular applications.
React js - The Core ConceptsDivyang BhambhaniThe document discusses React's virtual DOM and how it allows for more efficient DOM updates compared to directly manipulating the real DOM. It explains that the virtual DOM is an in-memory representation of the real DOM that allows React to calculate efficient DOM changes before applying them to the real DOM. This avoids unnecessary re-renders and improves performance. It also describes how React uses a diff algorithm and DOM traversal with breadth-first search to determine the minimal number of operations needed to transform the virtual DOM before updating the real DOM in a batched way.
React JS - A quick introduction tutorialMohammed FazuluddinThis document provides an overview and introduction to React JS. It discusses that React JS is a JavaScript library developed by Facebook for building user interfaces and reusable UI components. It encourages creation of reusable components that present data that changes over time. The document also covers React JS features, architecture, components, best practices, pros and cons, and provides useful links for examples and environment setup.
JavaScript & Dom ManipulationMohammed ArifJavaScript can dynamically manipulate the content, structure, and styling of an HTML document through the Document Object Model (DOM). The DOM represents an HTML document as nodes that can be accessed and modified with JavaScript. Common tasks include dynamically creating and adding elements, handling user events like clicks, and updating content by accessing DOM elements by their id or other attributes.
Integration patterns in AEM 6Yuval AraratThis document discusses integration patterns in Adobe Experience Manager (AEM), including using Sling Models for dependency injection and accessing resources from different locations through a single ResourceResolver. It provides examples of integrating with backend APIs, databases, file systems and forms using techniques like ResourceProviders, Sling Filters and custom SlingServlets. It also covers accessing files from bundles and the filesystem using BundleResourceProvider and FsResourceProvider respectively.
Why Vue.js?Jonathan GoodeVue.js is a progressive JavaScript framework for building user interfaces. It focuses only on the view layer and makes no assumptions about the rest of your code. Vue.js allows you to progressively adopt it into existing projects and features simple and flexible APIs. Performance benchmarks show Vue.js to be one of the fastest frameworks available.
Implementing DDD with C#Pascal LaurinThe document outlines the principles and practices of Domain-Driven Design (DDD) using C#, emphasizing the importance of centering the domain in software architecture and employing a ubiquitous language. It covers concepts such as entities, value objects, aggregates, factories, repositories, and bounded contexts, illustrating how to structure applications while ensuring proper domain modeling and the separation of business logic from infrastructure concerns. Additionally, it discusses patterns for implementing DDD, including the hexagonal architecture, and concludes with references for further reading on DDD.
HTML Dasar : #4 ParagrafSandhika GalihDokumen ini terdiri dari elemen HTML seperti paragraf, pemformatan teks, dan tanda pemisah. Terdapat informasi kontak berupa alamat email. Struktur dokumen ini tidak memberikan konten yang jelas.
An introduction to React.jsEmanuele DelBonoThis document provides an introduction to React.js, including:
- React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change.
- The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way.
- Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.
Spring Boot TutorialNaphachara RattanawilaiSpring Boot is a framework for creating stand-alone, production-grade Spring based Applications that can be "just run". It provides starters for auto-configuration of common Spring and third-party libraries providing features like Thymeleaf, Spring Data JPA, Spring Security, and testing. It aims to remove boilerplate configuration and promote "convention over configuration" for quick development. The document then covers how to run a basic Spring Boot application, use Rest Controllers, Spring Data JPA, Spring Security, and testing. It also discusses deploying the application on a web server and customizing through properties files.
[NEXT] Flask 로 Restful API 서버 만들기 YoungSu SonWritten By 정문철
Reviewed By 손영수
Mac에서 Flask로 Restful API 서버를 간단히 만드는 방법입니다
Android Basic 4일차 전에 진행되어야 하는 실습입니다.
RESTful API 제대로 만들기Juwon KimThis document discusses best practices for developing RESTful APIs. It begins by explaining that APIs should follow REST principles even if others are not, in order to be usable by others. It then shows an example of a non-RESTful API call. The document goes on to explain concepts like RESTful design, HTTP methods, resources, and HATEOAS. It provides examples of good and bad API patterns. It also introduces tools like appkr/fractal that can help build RESTful APIs in Laravel. Overall, the document provides guidance on how to properly structure APIs according to REST architectural principles.
Top 10 Questions about HTML5Jonathan Jeon한국경제신문사가주관했던 한경IT클럽에서 발표한 HTML5에 관한 10가지 질문에 대한 발표자료입니다. 5개는 제가, 5개는 윤석찬 팀장이 나눠서 발표를 했습니다. 관심 있으신 분들께 도움이 되시길 바랍니다.
Html5 use casesyongwoo JeonHTML5 introduces new semantic tags that help improve accessibility and search engine optimization. It also features new form input types and APIs for offline storage, geolocation, and multimedia without Flash. CSS3 includes properties for visual transitions and transformations to create animated effects and move elements without requiring JavaScript. HTML5 and CSS3 bring many advantages for building modern responsive web applications, though some features may require polyfills or libraries for cross-browser compatibility.
22. 레거시 IE모드는 http헤더를 사용
Page Meta Tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
HTTP Header
HTTP/1.1 200 OK
Date: Sun, 14 Mar 2010 21:30:46 GMT
X-UA-Compatible: IE=EmulateIE7
23. 페이지의 위에 CSS를 넣을 것
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"href="class.css" />
</head>
<body>
… … …
</body>
</html>
24. @import의 사용을 피할 것
@import url(/stylesheets/one.css);
@import url(/stylesheets/two.css);
MyHeading {
color: red;
font-family: 'New Century Schoolbook', serif;
background: white;
}
41. 코드를 최소화 해라
Initial (66 Characters)
function Sum(number1, number2) {
return (number1 + number2);
}
Characters Removed (54 Characters)
function Sum(number1,number2){return number1+number2;}
Compacted (30 Characters)
function Sum(a,b){return a+b;}
42. 필요할 때 스크립트를 가져와라
var userTileScriptsLoaded = false;
function CustomizeUserTile(){
if (userTileScriptsLoaded == false){
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.type = 'text/javascript';
script.src = /slideshow/html5-50/16141568/&
head.appendChild(script);
}
}
43. 돔의 접근을 최소화해라
function CalculateSum() {
var leftSide = document.body.all.lSide.value;
var rightSide = document.body.all.rSide.value;
document.body.all.result.value = leftSide + rightSide;
}
44. 다수의 엘리먼트를 찾을 때는
selector api를 사용해라
function doValidation() {
var reqs = document.querySelectorAll(".required");
var missingRequiredField = false;
for (var i = 0; i < reqs.length; i++) {
if (reqs[i].value == "") missingRequiredField = true;
}
}
45. 마크업의 변경은 한번에 해라
function BuildUI() {
var elm = document.getElementById('ui');
var contents = BuildTitle() + BuildBody() + BuildFooter();
elm.innerHTML = contents;
}
46. 작은 크기의 돔을 유지해라
Eleme
Element
Eleme
Eleme
ument HTML Body Element
Eleme
Eleme
Element
Eleme
47. 내장 JSON 메서드를 사용해라
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParsed);
![필요할 때 스크립트를 가져와라
var userTileScriptsLoaded = false;
function CustomizeUserTile(){
if (userTileScriptsLoaded == false){
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.type = 'text/javascript';
script.src = /slideshow/html5-50/16141568/&
head.appendChild(script);
}
}](https://image.slidesharecdn.com/html550-130123115733-phpapp02/85/Html5-50-42-320.jpg)
![다수의 엘리먼트를 찾을 때는
selector api를 사용해라
function doValidation() {
var reqs = document.querySelectorAll(".required");
var missingRequiredField = false;
for (var i = 0; i < reqs.length; i++) {
if (reqs[i].value == "") missingRequiredField = true;
}
}](https://image.slidesharecdn.com/html550-130123115733-phpapp02/85/Html5-50-44-320.jpg)
