Author: Awais Farooq
-
Events
If you’re new to JavaScript frameworks you might be confused by the use of inline event handlers because so far everyone told you to avoid doing so in JavaScript. That’s for a good reason because of separation of concerns to have our markup, styles, and logic separate which makes it easy to change and maintain. Using a modern JavaScript…
-
Logic
Since HTML can’t express logic such as conditionals and loops you would have to write something like this using JavaScript. Example.htmlCopy It doesn’t look bad but I think we can do better. This is the same example using an #if block in Svelte. App.svelteCopy Awesome, right? I want to emphasize how close Svelte is to HTML and…
-
Reactivity
Reactivity is Svelte’s superpower. If you’re unfamiliar reactivity is how you keep your DOM in sync with your application state. When you’re developing an application you want a change in your application state like adding a song to a playlist be reflected immediately in the DOM and re-render what changed. You would have to write all…
-
The Single File Component
To appreciate Svelte’s simplicity we’re going to start with a simple counter example using regular HTML and JavaScript. If you want to code along open a new Codepen project. Example.htmlCopy Ponder for a second how amazing it is that this is valid HTML in the first place and doesn’t break things because how browsers are so smart. You…
-
What Is Svelte?
Writing Svelte feels like writing regular HTML, CSS, and JavaScript. Svelte is a JavaScript framework created by Rich Harris that aims to solve the problem of abundance of JavaScript on the web while delivering a delightful developer and user experience. Svelte is compiled meaning it’s more of a language than a traditional JavaScript framework so it’s not constrained by limitations…
-
Learning Svelte
The best way to learn Svelte is to go through the Svelte tutorial which is great but also contains information overload if you just want to get started writing Svelte. I’m going to show you everything you should know for the majority of things you’re going to build. I’m not going to assume your knowledge and try…
-
Angular Animations
What Does ngAnimate Do? The ngAnimate module adds and removes classes. The ngAnimate module does not animate your HTML elements. However, when ngAnimate notices certain events, such as hiding or showing an HTML element, the element receives some pre-defined classes that can be used to create animations. The directives in AngularJS that add/remove classes are:…
-
AngularJS AJAX
AngularJS provides a $http service for reading data and remote servers. It is used to retrieve the desired records from a server. AngularJS requires data in JSON format. Once the data is ready, $http gets the data form server in the following manner: Here the file “data.txt” is employee’s records. $http service makes an AJAX…
-
AngularJS Form Validation
AngularJS provides client-side form validation. It checks the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state. It also holds the information about whether the input fields have been touched, or modified, or not. Following directives are generally used to track errors in an…
-
AngularJS Forms
AngularJS facilitates you to create a form enriches with data binding and validation of input controls. Input controls are ways for a user to enter data. A form is a collection of controls for the purpose of grouping related controls together. Following are the input controls used in AngularJS forms: AngularJS provides multiple events that…