#typescript

#angular Universal On Firebase Hosting: A Tutorial
▻https://hackernoon.com/angular-universal-on-firebase-hosting-a-tutorial-721f25eb13be?source=rss

https://cdn-images-1.medium.com/proxy/1*BZ1IMWrjdIGuQzcRXA5cDg.png

In this Angular Tutorial, I’ll tell you how you can make you a normal Angular app to support Server-side rendering using angular universal and deploy it on firebase hosting with firebase functionsI am assuming you already have an angular projectFirst, you have to Add angular universal support to your Angular application for that we will run one cmd Note you can find your project name in angular.json in your root folderOnce it is done you will see numerous changes in your project to know more about this transition visit Angular universal officialng add @nguniversal/express-engine —clientProject <project name>Next step is to make some changes in your server.ts 1. ) you need to add export in front of app variable2. ) You need to comment the listening of your app which is typically at (...)

#angular-tutorial #javascript #programming #typescript

ArraySort in #typescript
▻https://hackernoon.com/arraysort-in-typescript-5f3b10263b4a?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/1024/1*LHEJDzSSwVoyRlVrDN6soQ.png

Array #sort in typescriptIn this article, we will see How we can sort #arrays in typescript in a typed mannerby the end of this article, you will knowHow array sort works in typescriptUse of readonly arraysort function return typecase sensitive sortingsComparer functionHow array sort works in typescriptLet us see how we can sort an array in typescript.Suppose we have an array arr mentioned below, and I want to sort it.arr = [’vue’,’angular’,’react’]The easiest way is the [].sort function.arr = [’vue’,’angular’,’react’] console.log(arr.sort()) //result //[’angular’,’react’,’vue’]Sort function return typeSo the surprising part is that the sort function has actually manipulated our original array. It does not (...)

#javascript #functional-programming

Standardizing HTTP API testing
▻https://hackernoon.com/standardizing-http-api-testing-cc7e513d4823?source=rss----3a8144eabfe3--

https://cdn-images-1.medium.com/max/1024/0*3HWqx0wUjJalpfEk.jpg

This blog post is actually a draft for a standard operating procedure for my software development and consulting business. I’ve come across the task of writing tests for HTTP APIs for three or four times in the last couple of months. I’ve tried multiple ways of writing automated tests and this is the method I’ve converged on. #typescript, #jest, and supertest appear to work well together and are sufficient to implement concise tests.Background and the need for standardizationYears ago most of my programming for the web was limited to PHP. Tests on those project were done by using PHPUnit and Guzzle. Later we also used Behat for more readable tests. After Docker became popular the PHP monolith evolved into an application built with multiple programming languages. Some small services are now (...)

#javascript #rest-api-testing #http-request

#ionic Currency Converter
▻https://hackernoon.com/ionic-currency-converter-8f33d3d76d2d?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/1024/1*dKKXkrZz1CJ6I7RAXvtvCA.png

Let’s learn ionic by creating a simple real-world application.Credits: PexelsI have been developing web applications using #angular in recent past days. Since I decided to expand my knowledge not only in web development but also in mobile application development. I decided to go with the Ionic framework first.The reason I wanted to go with ionic is its all about #javascript (Well yeah I love JavaScript). Also ionic follows the same concepts as in Angular.It has its own UI components structure as in Angular.It uses #typescript which is a superset of JavaScript.It contains the features of Angular.Now let’s jump to the topic. You can not learn anything by reading or following tutorials. In order to learn any programming language or framework, you should try it out in the real world. That’s how I (...)

#currency-conversion

Implementing Quicksort in #javascript
▻https://hackernoon.com/implementing-quicksort-in-javascript-45cb83ab1aa0?source=rss----3a8144ea

https://cdn-images-1.medium.com/max/280/0*VjZIPczKGld2lm_W.gif

Quicksort is one of the most efficient methods for sorting an array in computer science. For a thorough breakdown, it has its own Wikipedia article.This article will cover implementing quicksort in JavaScript. Quicksort is not built in to JavaScript. Due to the sort method on the Array prototype, sorting is rarely questioned or optimized in the language. Despite that, Quicksort is still an important algorithm to at least comprehend, whether or not you use it.How does it work? ?Quicksort works by picking an element from the array and denoting it as the “pivot.” All other elements in the array are split into two categories — they are either less than or greater than this pivot element.Each of the two resulting arrays (array of values less-than-the-pivot and array of values (...)

#typescript #programming #algorithms #web-development

Deploying a DAPP’s frontend using #ipfs and Pinata SDK
▻https://hackernoon.com/deploying-a-dapps-frontend-using-ipfs-and-pinata-sdk-b0f975381b32?source

https://cdn-images-1.medium.com/max/398/1*RjkgyldRlu-ZjhU2wiCjbA.png

This article will walk you through deploying your first DAPP, or more specifically it’s frontend part, through IPFS with help of Pinata — the IPFS pinning service.What are we building?By the end of this article, you’ll be able to take your single-page frontend app, and host it within the Inter Planetary File System (IPFS) network.What is Pinata used for?In our scenario, we’ll use Pinata, to keep our files alive (pinned) in IPFS. Our setup features a short-lived IPFS node, that is online only for a short period of time — until our deployment is finished — by successfully pinning our files with Pinata.Pinata offers a free tier up to 1GB of pinned dataWhich frontend frameworks can we use?In theory, any. As long as they provide a static file output like Angular, React or Vue does, most likely through (...)

#docker #decentralization #typescript #reasonml

Building isomorphic #javascript packages
▻https://hackernoon.com/building-isomorphic-javascript-packages-1ba1c7e558c5?source=rss----3a814

https://cdn-images-1.medium.com/max/1024/1*nuyNVh5c4xjsb9zcdw0xYA.png

Building Isomorphic JavaScript PackagesI had to look up isomorphic in a dictionary the first time I came across this word in web development. Wikipedia reports that Isomorphic JavaScript, also known as Universal JavaScript, describes JavaScript applications which run both on the client and the server.Building a package that works out of the box in both the server (ie Node) and the client (ie a browser) is hard. As soon as you start mixing in dependencies, if even one of them makes a call to a node-only package (think fs) or browser-only object (think window) , it will tank your whole build. Worse yet, you may not even be able to reasonably infer this problem exists, as they may be buried in sub-sub-sub-dependencies that have no bearing on the code you are writing.This document describes (...)

#universal-javascript #nodejs #typescript #isomorphic-javascript

‍️ The 7 Pro Tips To Get Productive With #angular CLI & Schematics
▻https://hackernoon.com/%EF%B8%8F-the-7-pro-tips-to-get-productive-with-angular-cli-schematics-b

https://cdn-images-1.medium.com/max/1024/1*BmpWBv6AoWdbs3wffmIz_g.jpeg

As productive as mother Earth! (Original ? by Markus Spiske)Angular Schematics is a workflow tool for the modern web — official introduction articleQuick IntroThere are many articles on how to build your own Angular schematics but in this one we’re going to focus on using available schematics to the fullest! ?Most of the time we will be using @schematics/angular which are provided in Angular CLI out of the box.What are we going to learnUse shortcuts, they are much faster and easier to type, duhhh ?!Skip creation of an initial applicationGenerate multiple applications and libs to promote code reuseUse schematics from different npm packagesSet schematics defaults in angular.json file so that we don’t need to specify all the flags all the timeGenerate services — providedIn: ’root’ vs —module (...)

#typescript #frontend #angular2 #javascript

State management with #react Context, #typescript, and #graphql
▻https://hackernoon.com/state-management-with-react-context-typescript-and-graphql-fb6264314a15?

https://cdn-images-1.medium.com/max/1024/1*NfwIkP-5SfAzIrhfG_hqzg.jpeg

Tired of debugging type errors in your state? Want up-to-date documentation for your React apps? Read on!Side effects of type errors: Lost dev time and increased irritabilityWhen I first encountered TypeScript, I felt a decent amount of despair: Why did I have to write what felt like more boilerplate code? When using it with React, why did I have to determine the type of every single React prop, and the request and response objects for async calls? And what the hell were intersection and union types?After spending time working with TypeScript, however, I quickly fell in love with it. It saves me from wasting time on dumb type errors, provides dynamic self-documentation, and makes it far easier for my colleagues to understand the expectations set for the code at first glance.My interest (...)

#javascript #redux

#typescript inheritance deep dive
▻https://hackernoon.com/typescript-inheritance-deep-dive-9a53989af5a6?source=rss----3a8144eabfe3

https://cdn-images-1.medium.com/max/1024/1*jGRprTaT-LcmMcw2K1zmDw.png

How inheritance in Typescript actually works behind the curtain?Typescript and #javascript are both awesome languages. To a lot of developers Typescript feels more familiar because it offers concepts we normally encounter in traditional #programming languages. Inheritance is one of them.Due to backwards compatibility we generally transpile our code to Javascript. ES5 itself doesn’t contain classes nor an extend keyword.So how does this work then? Typescript uses syntactic sugar to “mimic” the class and inheritance behaviour. It creates kind of an illusion of those concepts. Let’s see what I mean by that.In this blogpost we will dive deep. On our way we will encounter a lot of concepts. It is important to wrap your head around those concepts. Take your time and make some breaks if necessary. You (...)

#programming-languages #front-end-development

Forgetting to set environment variables in nodejs apps
▻https://hackernoon.com/forgetting-to-set-environment-variables-in-nodejs-apps-1f45ff113ce5?sour

https://cdn-images-1.medium.com/max/1024/1*jghuaY17zF8MbE7eKY2RAw.gif

tl;dr yarn add —dev faceplantYou’ve developed your killer express app. It’s passing unit tests, integration tests, end-to-end tests... You’re so content that you print the code out and pin it to your fridge. You deploy to production, but in a few hours, you get complaints that the service is more or less completely useless. You dig through debug logs, but to no avail — there’s nothing obviously wrong, and tests are passing, so your users must just be exaggerating. All of them.Or maybe you forgot to set an environment variable in production.From my experience, this is the #1 source of service failure in well-tested production apps, and this has reared it’s ugly head at #meeshkan as well.To fix this, we made faceplant, a #tslint plugin for production workloads. The goal is to replace start (...)

#typescript #environment-variables #expressjs

Why I no longer use #typescript with #react and why you shouldn’t either
▻https://hackernoon.com/why-i-no-longer-use-typescript-with-react-and-why-you-shouldnt-either-e7

https://cdn-images-1.medium.com/max/548/1*TppGK-TN4aFrtf55JRWbzA.png

Don’t get me wrong, I absolutely love TypeScript. #javascript code can get messy, and strict type checking has saved me countless hours of debugging. However, there are two main reasons why I don’t use it in my react apps and I’ll get into that soon.Why we use TypeScriptThere are quite a few great benefits of using TypeScript, especially:Instant type error detectionBetter IDE experienceMore self-documenting codeMore readable & easier to understandHowever, this comes at a cost. TypeScript, requires much more time to compile. Let’s take React as an example. I set up the default create-react-app project with and without typescript (for typescript, I usednpx create-react-app my-app —typescript ). The difference?Benchmarked on i5 7200UTo me, the time taken to create the project and the (...)

#react-native #typescript-with-react

Why #angular Made Me Quit Web Dev
▻https://hackernoon.com/why-angular-made-me-quit-web-dev-f63b83a157af?source=rss----3a8144eabfe3

One of the most reliable ways to discern whether a corporation has begun to rot is to gauge the derivative of the utility its products provide over time. A company like Apple witnessed a huge spike in average product utility when they released the iPhone, which increased for some time, but eventually plateaued when they started removing vital phone functions like the 3.5mm jack. Generally speaking, most companies experience either an S-curve or a parabolic curve of this kind of utility: the former types generally find their niche, fill it, and operate in comfortable profit without innovating much more; the latter types manage to muck things up and crash and burn having failed to understand their product.Angular. Its mere name is a hostile form on the tongue. Pronounce it slowly. (...)

#google #react #typescript #javascript

Les nouveautés de #TypeScript 3.0
▻https://makina-corpus.com/blog/metier/2018/les-nouveautes-de-typescript-3.0

Typescript 3.0 vient de sortir, voici quelques nouveautés... et des exemples !

#JavaScript #Typescript #News_Item

4 Future Challenges for #typescript
▻https://hackernoon.com/4-future-challenges-for-typescript-e3ae90563d7e?source=rss----3a8144eabf

https://cdn-images-1.medium.com/max/500/0*f1XyOIDGLUROS0R3.png

Typed #javascript brings a new level of sanity to web development. Better autocomplete, refactoring with a lot more confidence, less bugs — having a typechecker is great. There’s several typed language flavours that transpile to javascript. There’s TypeScript, Flow, Elm, ClojureScript, Reason, Kotlin, etc. Most popular of them, is TypeScript.While I think TypeScript is great — it’s not all sunshine and rainbows. Here’s the four biggest challenges I see TypeScript facing in the future.Configuring TypeScript can be overwhelmingThis is a general problem in the JavaScript world. Build systems are not easy to figure out for newcomers. Webpack being impossible to configure is a running joke, and there’s also babel — and now TypeScript, which comes with its own setup difficulties.I think that this (...)

#typescript-challenges #challenges-for-typescript #programming

Writing Better #redux’s Code with #typescript
▻https://hackernoon.com/writing-better-reduxs-code-with-typescript-b7a3c1209bca?source=rss----3a

https://cdn-images-1.medium.com/max/1024/1*qL8u7G5aLhMT1zNJBJKV7Q.png

TypeScript typings power, when used properly, could help us write better code. This article is about how to use TypeScript type system with Redux to create fully typed state management store.I assume that you already know redux and maybe a little bit of TypeScript. I appreciate any inputs, I only tried implementing this recently and I am open to any improvements. This is a highly opinionated and subjective article.I used to write Redux in JS, and then define its actions and types as constants. It is not unusual for me to see something like this.▻https://medium.com/media/35bec13bf0ddb0af1fe08dca69855d07/hrefThe problem with the code above was, well, AUTH_TYPES can’t be changed as a whole, but this could happen.▻https://medium.com/media/510154afa7c8e27bf94b324d4e7eb728/hrefWell, we can fix (...)

Small Team, Big Success. Part 1: amCharts is Building the Future of Data Visualization on the Web
▻https://hackernoon.com/small-team-big-success-part-1-amcharts-is-building-the-future-of-data-vi

https://cdn-images-1.medium.com/max/1024/1*X_R85rZMEE-NTXqnQiGxmA.jpeg

Martynas Majeris (left) and Antanas Marcelionis (right)For the last 5 years I’ve been dreaming about starting a podcast where I would interview indie developers who made it big and still decided to stay small and frugal rather than shoot for some imaginary stars just because our society considers it to be the “right” way. Why after creating a successful “indie” product developers would decide to prioritize freedom and happiness over a chance to manage thousands of people is a question I can relate to and like to explore.From dabbling in podcasting in the past I was reluctant to do it again — preparing, juggling meetings, producing, etc. is a lot of work. Additionally, no one probably wants to hear my Eastern European accent in audio-only form and I don’t have the time or determination to try (...)

#javascript #web-development #small-business #typescript #data-visualization

#react with #typescript and #webpack
▻https://hackernoon.com/react-with-typescript-and-webpack-654f93f34db6?source=rss----3a8144eabfe

https://cdn-images-1.medium.com/max/1024/1*sVEFEYd1sDqen7YrIrGgtw.png

The feeling, when you react, script and pack.Why am I writing thisAt the time of writing this article, the popularity of React has already shot off the roof, that of Typescript is on the rise and it is safe to say that Webpack is the most preferred modern module bundler for an application. However, there is still an underlying dearth of a good example of the best possible way to start a project in React with Typescript and Webpack. Having said that, there are good resources out there if you want to use create-react-app cli or any other react starter kit out there. But there are very few ones if you want to have control over the configurations of your application.The downside of using a cli like create-react-app are that you have to rely on the following tools the same way (...)

#web-development #javascript

The Fantastic 4: #typescript features I’ve come to know and love
▻https://hackernoon.com/the-fantastic-four-typescript-features-ive-come-to-know-and-love-eab5b1d

https://cdn-images-1.medium.com/max/1024/1*PZxi_uZXiHbBmCuxUQ9OHw.png

The chat interfaceThis article will showcase the usage of these four great features in the context of creating a chat app:Async/AwaitUnion typesType guardsReadonly propertiesAsync/AwaitThis feature enables you to define and call asynchronous code simply and concisely.In the context of the chat app, users need to logon to the chat room via a network call. To keep the UI responsive you need to:Make the call asynchronouslyInform the user that the logon is pendingUpdate the UI once the user is successfully logged on as below:Logon processThe code to carry this out is very straightforward:▻https://medium.com/media/435d28d1e5942e87a259640b2854449d/hrefUnion typesThis feature enables you to define a family of types using a lightweight syntax. You are able to do so without defining a class (...)

#javascript #react #html #vuejs

The 7 Biggest Lessons I’ve Learned By Building A Twitter Bot
▻https://hackernoon.com/the-7-biggest-lessons-ive-learned-by-building-a-twitter-bot-59fee84a9ed9

https://cdn-images-1.medium.com/max/1024/1*1eutc7Qqi17u6Ll0E4wKoA.jpeg

Sometimes you have to be smart as a fox and being cute doesn’t hurt too… (? by Jonatan Pie)Today, I am going to share with you the most important lessons I have learned by building Release Butler — a Twitter bot that tweets beautifully styled changelogs of popular frontend frameworks and libraries like #angular, React, Vue or Webpack…Example of a tweet made by Release ButlerRelease Butler got very positive welcome from the community with lots of engagement and more than 600 followers during the first month after it’s release in the beginning of April 2018.Release Butler got pretty good traction during the first month after its release!The lessons (tldr)⌛ Don’t try to save time by skipping #typescript? Async /await is great until it isn’t & exception handling can be tough? Logging is the key? Going (...)

#nodejs #bots #javascript

#debugging #javascript/TypeScript Node apps with Chrome DevTools, VS Code and WebStorm
▻https://hackernoon.com/debugging-javascript-typescript-node-apps-with-chrome-devtools-vs-code-a

https://cdn-images-1.medium.com/max/1024/1*E_E66nsHbbTqSvSDy2intg.jpeg

This article covers using the Node Inspector to debug both JavaScript and #typescript Node.js applications using Chrome DevTools, Visual Studio Code and WebStorm.As described in the Node.js debugging guide, Node.js 6.3 introduced the “inspect” and “inspect-brk” CLI arguments (node —inspect [file] or node —inspect-brk[file] ) that make node to listen via WebSockets for diagnostic commands as defined by the Chrome Debugging Protocol. This protocol has replaced the V8 Debugging Protocol (Now known as Legacy Protocol), which became obsolete on Node 7.7.Additionally, the Node CLI also provides a “require” argument meant to preload modules (node —require [file]), but most importantly, for debugging purposes, it allows 3rd party libraries to hook into the “require.extensions” module and make Node (...)

#debugging-typescript-node #debugging-javascript

#typescript — #javascript with superpowers — Part II
▻https://hackernoon.com/typescript-javascript-with-superpowers-part-ii-69a6bd2c6842?source=rss--

https://cdn-images-1.medium.com/max/1024/1*ijxYcfk-rHyfAWLq6bPr1Q.png

Welcome back to Part II! For a more articulated experience — read Part I first.TypeScript — JavaScript with superpowersEnums (enumerations) allow you to group values together with friendlier names. Imagine you had a list of names.Here’s how you would structure the enum:You can grab the values from the enum like so:But wait. It returns the integer which represents the index of the value. Like arrays, enums begin indexing their members starting at 0.How do we get the value "Indrek" instead of 0 ?Notice how the values are presented as a string.Another great example would be using enums to store the application states.In case you’re interested in learning more about enums— I found a great answer going in the nitty gritty of enum.Let’s say we fetched some data from an API. We always expect the (...)

#tech #web-development #programming

Patterns — Generic Repository with #typescript and Node.js
▻https://hackernoon.com/generic-repository-with-typescript-and-node-js-731c10a1b98e?source=rss--

https://cdn-images-1.medium.com/max/911/1*dffdGxirQfDyHJjWM3p47Q.png

Patterns — Generic Repository with Typescript and Node.jsBecome a master of CodesIf you work with Node.js/Javascript and you have many replicated codes for different data models or create CRUDs (Create, Read, Update and Delete) at all times, then this post is for you!Generic Repository PatternWorking with #javascript applications, we have some problems to share similar code between the application, and in many times we create the same code for different applications. That pattern gives to you a power to write an abstraction of data, when we have one abstract class (or many classes) and reuse the implementations independent of your Data Model, passing only your types to someone classes.Talking about the Repository pattern, it is a representation where you can keep all operations of your (...)

#design-patterns #generic-repository #nodejs

Künstliche Intelligenz: Google bringt eine Machine-Learning-Bibliot...
▻https://diasp.eu/p/5913618

Künstliche Intelligenz: Google bringt eine Machine-Learning-Bibliothek für das Web ▻https://www.heise.de/developer/meldung/Kuenstliche-Intelligenz-Google-bringt-eine-Machine-Learning-Bibliothek-fuer-da #JavaScript #KünstlicheIntelligenz #MachineLearning #TypeScript

Mise en pratique de #RxJS dans #Angular
▻https://makina-corpus.com/blog/metier/2017/premiers-pas-avec-rxjs-dans-angular

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular 2 et 4.

#TypeScript #News_Item