Template forms allow creating forms directly in the template using directives like ngModel. Reactive forms use FormBuilder to build forms programmatically and attach validators and value changes. Both approaches allow collecting and validating user input, and associating forms with models. Forms are a key part of many applications for user input and data collection.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
Quick introduction into react and flux followed by a comparison of redux and alt flux frameworks and a simple hello world application implemented in each of them. Last two slides present a microservices approach to client side applications as one of approaches how to make transitions between frameworks easier.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
Quick introduction into react and flux followed by a comparison of redux and alt flux frameworks and a simple hello world application implemented in each of them. Last two slides present a microservices approach to client side applications as one of approaches how to make transitions between frameworks easier.
Some of the ES6+ features are great companions when using React. This presentation introduces you to some of them.
This talk was inspired by Steven Luscher's blog post: http://babeljs.io/blog/2015/06/07/react-on-es6-plus/
In this Episode of this series we will introduce some template awesome syntax of the angular 2. We will know about the life cycle of the component and when to use or not to use its life hooks. Also We will introduce the directives and it's types. We will introduce about Forms with the Angular way. I hope enjoy learning these stuff :D.
Quick start with React | DreamLab Academy #2DreamLab
Szybki start z React. Prezentacja przedstawiona na warsztatach z podstaw technologii React w ramach DreamLab Academy.
W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
eact is a library for building HTML user interfaces. It is the "view" in a Model-View-Controller application. Created by the UI wizards at Facebook, top websites like Instagram, Netflix, Airbnb, Bleacher Report and Feedly use it. React is the 6th most starred project on GitHub and grows more popular every day.
In this two-day workshop, we will introduce you to React. On the first day, we will work through a series of increasingly more complicated tutorial exercises. Along the way, we will explain concepts like JSX, immutability, statefulness, one-way data flow, components, and virtual DOM.
With the basics out of the way, we will spend the second-day building a complex application which will put React through its paces and give us a chance to explore most of its features. Then we will learn how to think in React. We will show you how to go from design to components to working application. We will wrap the weekend with a quick preview of React Native, which allows you to use your React skills to create cross-platform mobile apps.
«От экспериментов с инфраструктурой до внедрения в продакшен»FDConf
В процессе разработки инструментов для инфраструктурных нужд получилось изучить технологии, которые легли в основу нового стека фронтенд разработки для мобильной версии «Одноклассников».
В результате удалось решить следующие задачи:
— улучшение качества продукта за счёт юнит тестирования и методологии TDD;
— снижение порога входа для новых фронтенд разработчиков;
— автоматизация процессов разработки, сборки и тестирования.
В докладе рассматривается использование следующих технологий: karma, jasmine, webpack, bower и gulp.
Implement react pagination with react hooks and react paginateKaty Slemon
ReactJS Pagination using React Hooks. Learn about how to implement pagination with React hooks and React paginate to manage and display the vast data conveniently.
Intro course presentation for React with Redux. It is including how to make AJAX Request with React, use Middleware, Router, and Reselect.
Github repo - https://github.com/stanimirtt/react-redux-course-2017
Building scalable applications with angular jsAndrew Alpert
AngularJS today is one of the most powerful, user-friendly and popular JS frameworks to work on web applications. Surprisingly, one of the main weaknesses of this framework is poorly structured documentation and the lack of ready-made solutions. In this report, we will try to work out the best approach to the organization of large and very large applications. We will also speak about the tools that will be useful at every stage of the application development and tools and practicesthat will help you to work in the continuous delivery mode.
Some of the ES6+ features are great companions when using React. This presentation introduces you to some of them.
This talk was inspired by Steven Luscher's blog post: http://babeljs.io/blog/2015/06/07/react-on-es6-plus/
In this Episode of this series we will introduce some template awesome syntax of the angular 2. We will know about the life cycle of the component and when to use or not to use its life hooks. Also We will introduce the directives and it's types. We will introduce about Forms with the Angular way. I hope enjoy learning these stuff :D.
Quick start with React | DreamLab Academy #2DreamLab
Szybki start z React. Prezentacja przedstawiona na warsztatach z podstaw technologii React w ramach DreamLab Academy.
W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
eact is a library for building HTML user interfaces. It is the "view" in a Model-View-Controller application. Created by the UI wizards at Facebook, top websites like Instagram, Netflix, Airbnb, Bleacher Report and Feedly use it. React is the 6th most starred project on GitHub and grows more popular every day.
In this two-day workshop, we will introduce you to React. On the first day, we will work through a series of increasingly more complicated tutorial exercises. Along the way, we will explain concepts like JSX, immutability, statefulness, one-way data flow, components, and virtual DOM.
With the basics out of the way, we will spend the second-day building a complex application which will put React through its paces and give us a chance to explore most of its features. Then we will learn how to think in React. We will show you how to go from design to components to working application. We will wrap the weekend with a quick preview of React Native, which allows you to use your React skills to create cross-platform mobile apps.
«От экспериментов с инфраструктурой до внедрения в продакшен»FDConf
В процессе разработки инструментов для инфраструктурных нужд получилось изучить технологии, которые легли в основу нового стека фронтенд разработки для мобильной версии «Одноклассников».
В результате удалось решить следующие задачи:
— улучшение качества продукта за счёт юнит тестирования и методологии TDD;
— снижение порога входа для новых фронтенд разработчиков;
— автоматизация процессов разработки, сборки и тестирования.
В докладе рассматривается использование следующих технологий: karma, jasmine, webpack, bower и gulp.
Implement react pagination with react hooks and react paginateKaty Slemon
ReactJS Pagination using React Hooks. Learn about how to implement pagination with React hooks and React paginate to manage and display the vast data conveniently.
Intro course presentation for React with Redux. It is including how to make AJAX Request with React, use Middleware, Router, and Reselect.
Github repo - https://github.com/stanimirtt/react-redux-course-2017
Building scalable applications with angular jsAndrew Alpert
AngularJS today is one of the most powerful, user-friendly and popular JS frameworks to work on web applications. Surprisingly, one of the main weaknesses of this framework is poorly structured documentation and the lack of ready-made solutions. In this report, we will try to work out the best approach to the organization of large and very large applications. We will also speak about the tools that will be useful at every stage of the application development and tools and practicesthat will help you to work in the continuous delivery mode.
28.03.15. Одесса. Impact Hub Odessa. Конференция JSLab.
Алексей Волков. "React на практике"
Доклад освещает практические аспекты использования React.js в различном окружении. React и модели Backbone. React и таблицы стилей, а также React в мобильном вебе. Будет полезно как и тем, кто только интересуется этой библиотекой, а также опытным разработчикам.
Подробнее:
http://geekslab.co/
https://www.facebook.com/GeeksLab.co
https://www.youtube.com/user/GeeksLabVideo
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac...Fwdays
Probably every backend developer had to face the frontend. I am sure that this interaction did not always end without mental trauma. However, today, thanks to Full Stack frameworks, we can forget about this headache, because we have the opportunity to describe and generate a frontend on the PHP side.
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)James Titcumb
You've heard of Zend's new framework, Expressive, and you've heard it's the new hotness. In this talk, I will introduce the concepts of Expressive, how to bootstrap a simple application with the framework using best practices, and finally how to integrate a third party tool like Doctrine ORM.
Twanda.Malcolm12-6-16/back.jpg
Twanda.Malcolm12-6-16/barchart.js
/*
New Perspectives on HTML, CSS, and JavaScript
Tutorial 12
Case Problem 2
Author: Twanda.malcolm
Date: 12-06-2016
Filename: barchart.js
Function List:
totalVotes(votes)
Returns the length of the items in the votes array
calcPercent(item, sum)
Returns the ratio item/sum expressed as a percent rounded to
the nearest integer
createBar(partyType, percent)
Displays a horizontal bar chart with different bars for different
party types, using the value of the percent parameter to determine
the length of the bar
showResults(race, name, party, votes)
Shows the race results for each name and party with bar charts created
based on the votes array
*/
Twanda.Malcolm12-6-16/election.htmElection Home PagePresidentSenate RacesCongressional RacesState SenateState HouseLocal RacesJudicialReferendumsCongressional Races
Twanda.Malcolm12-6-16/logo.jpg
Twanda.Malcolm12-6-16/modernizr-1.5.js
/*!
* Modernizr JavaScript library 1.5
* http://www.modernizr.com/
*
* Copyright (c) 2009-2010 Faruk Ates - http://farukat.es/
* Dual-licensed under the BSD and MIT licenses.
* http://www.modernizr.com/license/
*
* Featuring major contributions by
* Paul Irish - http://paulirish.com
*/
/*
* LicenseModernizr is available under the MIT and BSD licenses:
* MIT License
* Copyright (c) 2009–2010 Faruk Ate?
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
* BSD License
* Copyright (c) 2010, Faruk Ate?
* All rights reserved.
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in bina ...
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
7. Good at rendering pages, fast
SEO, search engine optimization, is easy
Good for ecommerce systems showing different
product pages
Page flickers on loading a page
3 . 5
11. When you want a client on the web, think timesheet,
benefit system, excel etc..
More like a client than a page, it's fast
SEO is hard, there are no pages to index, there are
solutions though
Navigation is done by switching content, NO PAGE
FLICKERING
Rerender part of the page only, with received JSON
3 . 9
14. Collecting/Presenting and validating data from
Forms
Navigation, your app will have more than one view
How to read/write data from an API
Styling - selecting a CSS framework
4 . 3
18. ES5
var a = 3;
var b = 'a string';
var c = false;
5 . 4
19. Typescript
let a:number = 3; // will be a number
let b:string = 'a string'; // will be a string
let c:boolean = false; // will be a boolean
let d; // will be supertype any
a = "some string" // not ok
c = 4 // not ok
5 . 5
27. Typescript
Creates the backing fields for you and accessor level.
class Hero {
constructor(
private name:string,
private description:string) {}
}
getName(){
return this.name;
}
let hero = new Hero('Arthur')
5 . 13
31. ES5
function Character(name){
this.name = name;
}
function Character.prototype.method = function(){}
function Player(name){
Character.call(this,name); // call super class constructor
}
Player.prototype = Object.create(Character.prototype); // inherits
var player = new Player('Arthur')
player.method();
5 . 17
38. service.ts
@Inject() is what makes it available for components
@Inject()
class Service {
getData():string { return 'some data' }
}
6 . 6
39. Service is injected into component constructor
import { Service } from './service';
@Component({
selector : 'hello-world',
template : `
<div>{{title}}</div>
`
})
class HelloWorldComponent{
title:string;
constructor( private service:Service) {
this.title = this.service.getData();
}
}
6 . 7
40. MODULE
A MODULE IS A CONTAINER THAT HOLDS EVERYTHING
LIKE COMPONENTS, SERVICES ETC.
6 . 8
41. app.module.ts
A module decorates a class
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, // general helpers like if, loops etc
FormsModule, // dealing with forms
HttpModule // dealing with fetching data
],
providers: [
Service
],
bootstrap: [AppComponent]
})
export class AppModule {}
6 . 9
42. import : what modules we depend on
providers: what services we want other components
to be able to use
bootstrap : what component is considered the
starting point
declarations: what components does this module
consist of
6 . 10
45. *ngIf="boolean"
Only renders something in the DOM if condition is true
<div *ngIf="product">{{ product.title }}</div>
<div *ngIf="!product">No product is selected</div>
6 . 13
50. [class.classToApply]="boolean"
Sets one class
<div [class.setThisClass]="basedOnThisCondition"></div>
<!-- possible outcome is -->
<div class="setThisClass"></div>
<!-- or -->
<div class=""></div>
6 . 18
54. [(ngModel)]="propertyOnComponent"
This one is called "banana in a box"
<input [(ngModel)]="product.name">
<!-- shorthand for the following -->
<input [value]="product.name"
(input)="product.name = $event.target.value">
class ProductComponent {
product:Product;
}
6 . 22
59. Transform method, takes a value as input
@Pipe({
name: "bananas"
})
export class BananasPipe{
transform(val, ...args){
return `${val}, is bananas B A N A N A S`
}
}
6 . 27
60. <div>
{{ 'This shit' | bananas }}
</div>
This shit, is bananas B A N A N A S
6 . 28
76. SUMMARY SO FAR
@Input is used for input data to a component
@Output is used for invoking methods tied to the
component
We should have a dedicated component per action
7 . 16
113. Pristine = not touched
Invalid = data validation error
Dirty = user has entered data
10 . 4
114. ngSubmit, triggered by button or input type="submit"
Creating a reference to ngForm means we can see if its
valid
<form (ngSubmit)="heroForm.valid && submit()" #heroForm="ngForm"
<div>
<h3>Form</h3>
Pristine <strong>{{ heroForm.pristine }}</strong> <br>
Invalid <strong>{{ heroForm.invalid }}</strong> <br>
Dirty <strong>{{ heroForm.dirty }}</strong> <br>
</div>
<div><button>Save</button></div>
{{ heroForm.valid }}
</form>
10 . 5
115. formName.controls.fieldName.errorType, will give the
error if set e.g heroForm.controls.name.errors = true
<div>
<input [(ngModel)]="hero.title"
#name ="ngModel"
name="name"
minlength="2"
required >
</div>
valid {{ name.valid }} <br>
pristine {{ name.pristine }} <br>
All errors {{ heroForm.controls.name.errors | json }}
10 . 6
116. Further reading & Learning
angular.io
angular.io/resources Rxjs 5 Ultimate
https://ultimateangular.com/
Free book on Angular 2, https://codecra .tv/
London Javascript ( my group 1700 members )
https://www.meetup.com/London-Javascript/
Everything showed today is here :
https://github.com/so chris/Angular2-demo
11