#javascript

Set-up #ssl in #nodejs and Express using OpenSSL
▻https://hackernoon.com/set-up-ssl-in-nodejs-and-express-using-openssl-f2529eab5bb?source=rss---

https://cdn-images-1.medium.com/max/1024/1*49glYe-285UPvYW9xp7JFw.jpeg

This a simple, easy-to-follow tutorial on how to serve pages over https in NodeJS using Express Framework.Tools/Frameworks we would be using for this tutorial, are:NodeJS: You should’ve basic knowledge on how to program in NodeJS.OpenSSL: A tool to generate key and certificate.ExpressJS (npm i express): Back-end framework for writing web servers in NodeJS. More about Express.https : Comes with NodeJS.Let’s set-up our project directory. It’s not a directory with lots of files. Instead, it contains only 4 files which are package.json, key.pem, cert.pem and server.js. So, create a new directory node-https, cd node-https and run npm init -y to create package.json file.Now install express using npm i —save express. Create a server.js file and type the following code in it.Our server.js should (...)

#javascript #ssl-certificate #expressjs

Managing React modals with singleton component design
▻https://hackernoon.com/managing-react-modals-with-singleton-component-design-5efdd317295b?sourc

(This post was originally posted to my personal blog)Controlling modals of all kinds (informational modals, custom alerts, image lightboxes, …) across an application is a frustrating problem that we all face when developing apps. When the app is simple, it’s sufficient to place a single <Modal /> component and have a state to toggle it on/off. However, things get complicated when you have different places to present the same modal or different kinds of modal to display in your app.There have been a couple of design solutions for this such as using the React Context API (this blog is an example) or manipulating react-navigation’s StackNavigator (as described in this blog post). In this post, I would like to share my own design for this problem using a singleton <Modal /> (...)

#react-native #javascript #manage-react-modals #react-modal #reactjs

DIY #redux with RxJS : Part 3
▻https://hackernoon.com/diy-redux-with-rxjs-part-3-87eaf23d4092?source=rss----3a8144eabfe3---4

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

Photo by Steve Halama on UnsplashSo far, in the previous two posts, I covered the topics “How to Create a Redux Library with RxJS” and “How to Write Redux Middlewares”. Before starting the 3rd and the last part of the series, I would recommend you to check the first 2 parts below:DIY Redux with RxJS => RxDxDIY Redux with RxJS: Part 2In this part, I will create a HOC (Higher Order Component) to connect RxDx with #react.Component. I assume that you already know about React.Component, so that I won’t be explaining it again. But I need to explain HOCs which is the heart of what I will demonstrate below.What the heck are these Higher-Order Components?Basically, HOC is a class decorator. But what is a class decorator? Sometimes while we are coding we start feeling that all classes we create have (...)

#front-end-development #javascript #frontend

‍️ 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

How to Create a File Storage #mobile App with #nativescript 5
▻https://hackernoon.com/create-a-file-storage-mobile-app-with-nativescript-5-f14ee3be5bd0?source

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

In our previous NativeScript article, we previewed the Framework. For this article, let’s create a small demo project. To start with, let’s set up a scenario for the demo.SimpleFileTransfer is a virtual file locker. Users can sign up for the service and get 100 MB of free virtual storage space. Users can then download and upload files on a server. Users will be able to increase their storage space by filling a form.Let’s jot down the App functionalities before moving ahead:Signup: User can signup for the app.Login: Authenticates user.Details Page: Provides user details like current quota and total space. Also, we can display a list of files.Download file: Download file from the server to a device.Upload file: Upload files from a device to the server.Increase Quota: Increases storage quota of a (...)

#mobile-development #javascript #mobile-app-development

Top 10 #javascript Trends to Watch in 2019
▻https://hackernoon.com/top-javascript-trends-to-watch-in-2019-3ff6dd3cbf48?source=rss----3a8144

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

Take a deep breath. 2018 is over. If you’ve been buried up to your neck in projects, this article will bring you up to speed with the biggest JavaScript developments of 2018, and some predictions as to what 2019 will bring.You can use this to understand which frameworks would be good to learn next. And if you want even more context, have a look at last year’s JS Trends post.React vs Vue (oh, and Angular Too)Facebook had its worst year ever politically, but you wouldn’t know it by looking at React. The front-end framework is still by far the most dominant of all frameworks, and it’s still the most-loved too.React introduced a new context API, more accurate error reporting, and Hooks, a feature where you can use state and other React features without writing a class (currently in beta).That’s (...)

#web-development #javascript-trends #software-development #coding

How I switched career and what I have achieved in the last 4 years as a developer
▻https://hackernoon.com/how-i-switched-career-and-what-i-have-achieved-in-the-last-4-years-as-a-

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

My last 4 years, from zero knowledge to software developerCareer path aheadMedium — meeting place for hungry minds: some sharing their stories, experiences and passions, some just browsing through and reading. Today, I decided to switch to the first category and start sharing with you, community. It’s already been some times that I get my daily dose of reading: new technologies, web development, data science, AI, machine #learning, etc… Yes I am definitely a passionate!How it all began…Seven years ago, as a recent Parisian MSc graduate in applied Mathematics and Actuarial Science, I joined a large international insurance company as a junior actuary. Great experience but, two years in the job, and I needed a change: I was up for a new learning/life experience. And just because “Why not?” I also (...)

#life-lessons #web-development #software-development #javascript

Progressive Web Apps (PWAs) FTW — Pt. 2
▻https://hackernoon.com/progressive-web-apps-pwas-ftw-pt-2-31c2779e55c4?source=rss----3a8144eabf

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

Progressive Web Apps (PWAs) FTW — Pt. 2IntroductionIn part 1 of this series we looked at what Progressive Web Apps are and discussed how they can improve user experiences in mobile web. These articles are based on the talk I gave at the Reversim Summit. If you prefer to watch the video you can see it here:▻https://medium.com/media/2c31b3cbe49e18762f4820b486c62234/hrefLet’s continue where we left off last time and dive into Web Workers. Web Workers are the core technologies that enable PWAs.Web WorkersIf you’ve worked a bit with #javascript before you may have noticed that it is single threaded. This is evident if you do any expensive computations on the client side. In these cases the page becomes unresponsive until the script running the computations is finished. A web worker comes to solve (...)

#web-development #coding #pwa #progressive-web-app

How to make a #terminal like Portfolio #website for yourself
▻https://hackernoon.com/how-to-make-a-terminal-like-portfolio-website-for-yourself-27d7a7030004?

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

Let’s code a portfolio website that looks like a Terminal.Are you a coder? Do you enjoy programming? Have you ever used Terminal? Do you wish to have a portfolio website that looks like a Terminal?Well, this is what we are going to make in this article.Let’s start with the result itself, what we are going to build here, is what I use for my creative portfolio website. Go and check the following link out, Open the following link in a new tab, I’ll wait…It looks like this.Don’t want to go to a new link? You’ll miss something great, but anyways here is the image.terminal based portfolio websiteDid you like it? Want to build this for yourself? Then read along…So this is my personal website portfolio that I’ve hosted on GitHub Pages. You can also host it on GitHub Pages, or you can use another service (...)

#javascript #terminal-like-portfolio #web-development

Integrating #api-first optimized video using a Headless #cms
▻https://hackernoon.com/integrating-api-first-optimized-video-using-a-headless-cms-47968e70fb0?s

https://cdn-images-1.medium.com/max/1000/1*TO7UrNELUIsrDmZ3sSUE0g.jpeg

Integrating high quality, API-first video into a Headless CMSVideo is hard. Encoding, serving the right version to the right browser, device optimization, bandwidth consideration, it’s all pretty daunting. Thankfully there’s Mux and the new Mux Videos Extension, which allow you to add best-in-class video delivery to your application without the headache.In this overview, I’m going to show you how to use the Mux Videos Extension to power video content in your application in just a few clicks using the Cosmic JS Headless CMS. As a bonus, I’ll show you how to create your own Cosmic JS Extension to connect to your favorite API services in your Cosmic JS Dashboard.TL;DRInstall the Mux Videos ExtensionCheck out the Mux Videos Extension codebaseIf you’re not yet a Mux customer, they’re offering a (...)

#javascript #web-development #video-marketing

Set up #eslint in Atom
▻https://hackernoon.com/set-up-eslint-in-atom-83dfb3d34fdf?source=rss----3a8144eabfe3---4

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

Atom LogoSo you set up ESLint, either globally or in specific projects, but you can’t get the warnings to show up directly in Atom? You’ve come to the right place.Install linter-eslint + peer dependencies$ apm i linter-eslint linter linter-ui-default intentions busy-signalCustomize ESLint SettingsOpen Atom’s Preferences to see your Packages. Under Community Packages, open linter-eslint’s settings and make the below changes.Don’t Point to Global (do the opposite if you want global)Check “Disable when no ESLint config is found” (Disabling)Uncheck “Use global ESLint installation” (Global ESLint)Silence Some Rules While Typing (optional)Check “Ignore fixable rules while typing” (Automatic Fixes)Fix on save (optional)Check “Fix errors on save” (Automatic Fixes)NOTE: you must disable/uninstall any other (...)

#javascript #web-development #programming #coding

A Progressive Web App in Vue #tutorial , Part 1 — The Vue App
▻https://hackernoon.com/a-progressive-web-app-in-vue-tutorial-part-1-the-vue-app-f9231b032a0b?so

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

The BasicsBuild a Progressive Web App In #vuejs, from Zero to Hero!The concept of Progressive Web Apps (PWAs) is a framework agnostic approach which seeks to combine discoverability and accessibility of a website with the functionality of a native app.Since couple of years I see an increasing interest technologies which bridge the gap between web- and native-apps.In 2018 PWAs have made a great step towards mainstream adoption. By now, plenty of companies like Pinterest, Uber, Twitter, Trivago, The Washington Post, Starbucks, have already created PWAs to run parallel to their native apps.The reason is obvious, plenty of these companies report very promising numbers, mostly as astonishing as the 97 percent of increase in conversions Trivago has seen.Why should we start developing PWAs now?In (...)

#web-development #pwa #javascript

A Simple Linter Setup…Finally!
▻https://hackernoon.com/a-simple-linter-setup-finally-d908877fa09?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/690/1*Ttb7nUmRHpZffiwlhdYkmA.jpeg

Mr. LinterA linter flags anything in your code that breaks its pre-defined rules.Each “style guide” has different opinions/rules about what constitutes “good” #javascript code. This post uses Airbnb’s style guide; Google’s is also popular.Some developers install their linter globally, but I’m going to show you how to be more precise by creating a custom configuration for each project.First, let’s set up #eslint (one of the most popular linter tools). Luckily, ESLint has a magical tool built right in! 🎩$ cd PROJECT$ npx eslint —initThis will ask a series of questions about your desired set up. My choices:Use a popular style guideAirbnb(depends if using React)JavaScriptYesI’m using yarn, why did it create a package-lock.json file!? 😡$ rm package-lock.json$ yarn installSkip to ⚛️ if you used Create (...)

#programming #linter-setup #web-development

Which Top #javascript IDEs to Seek in 2019 ?
▻https://hackernoon.com/which-top-javascript-ides-to-seek-in-2019-a5095b55ca3e?source=rss----3a8

Which Javascript IDEs(Popular) To Seek In 2019?As we have entered in 2019, everybody must be expecting new web development trends since this field is continuously evolving and changing. So, there are plenty of JavaScript trends to look for in this year.Also, it is a good for every business to look for top Javascript IDEs for all their web development needs. The reason is simple as the Javascript is dynamic a language and retains high-level style. Moreover, it’s frameworks have played an important role.In this blog, we will discuss top 5 JavaScript IDEs and this is a highly subjective list too. The IDEs listed below are all cross-platform compatible and lets you create an amazing business application in no time.Check out the list here:-1) Atom IDEThere are a number of reasons why this IDE (...)

#javascript-frameworks #javascript-development #javascript-library #web-development

#react Native Bridge for #ios and #android
▻https://hackernoon.com/react-native-bridge-for-ios-and-android-43feb9712fcb?source=rss----3a814

https://cdn-images-1.medium.com/max/600/1*FxPFgst2EC5MBA0bx0OcJA.gif

One of the biggest reason for the popularity of React Native is that we can create a bridge between the Native language and #javascript code. Which means we can reuse all the reusable libraries created in iOS and Android world.To create a production grade application some point of time you need to use Native Bridge. There are very less article and tutorial on cross-platform React Native bridge which works on both iOS and Android. In this article, we will create a Native Bridge to access Swift and Java class from JavaScript.The code of this article can be found here -> ▻https://github.com/nalwayaabhishek/LightAppCreate the LightAppTo better understand Native Module we will create a simple LightApp example using #react-native CLI.$ react-native init LightApp$ cd LightAppNext, we will (...)

Major #programming Trends to Prepare for in 2019
▻https://hackernoon.com/major-programming-trends-to-prepare-for-in-2019-169987cc75f4?source=rss-

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

The new year is always a great time for reflection on the past year, but also a time to look forward to the next year and to imagine what’s to come.For programmers, this is a good time to think about new skills you want to learn or interesting projects you want to take part in. Here at Indorse, we recently had a group discussion about what’s to come in 2019, and the team came up with some interesting ideas.Below we present some of the major programming trends to prepare for to help you stay at the top of your game in 2019 — but not before taking a look back at the key programming themes of 2018.A Look Back at Programming Trends in 2018Stack Overflow and GitHub both have extensive datasets on the most-used or most popular programming languages.The chart below from Stack Overflow shows the most (...)

#technology #python #javascript #coding

Getting Started with React Native in 2019: Build Your First App
▻https://hackernoon.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc061

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

Learn how to build your first React Native app with important basic concepts and where to go from here!Credit: ▻https://unsplash.com/@nateggrantWe live in the world of a variety of mobile devices majorly dominated by two platforms, iOS, and Android. It is a two-horse race and I am sure we can all agree on that. Building a mobile application is not an easy task though.For iOS, you write code using Objective-C or Swift and for Android, you will find yourself using Java. Apart from different #programming languages used to create a mobile that can run on each of the two platforms, the toolchains are entirely different too for both of these mobile platforms.Many modern-day developers use a specific set of #technology that is used to build web applications: HTML, CSS, and #javascript. There are (...)

#react-native #software-development

Pass Props to #react Router’s Link Component
▻https://hackernoon.com/pass-props-to-react-routers-link-component-2eebda7a63e1?source=rss----3a

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

Often times when building an app with React Router you’ll need to pass props through a Link component to the new route. In this post, we’ll break down how that process works.▻https://medium.com/media/eb462541b0d3521ddc9fc898011a053d/hrefThere are two different ways to pass data from a Link component through to the new route that’s being rendered. The first is through URL Parameters and the second is through state.First, let’s take a look at URL parameters. If you’ve read our URL Parameters post, you’ll be familiar with this example. Say we were in charge of building out the Route that renders Twitter’s profile page. If created with React Router, that route may look like this<Route path=’/:handle’ component=Profile />Notice that handle is going to be dynamic. It could be anything (...)

#react-router #javascript #web-development #software-development

String Reversal in #javascript
▻https://hackernoon.com/string-reversal-in-javascript-22651e20578d?source=rss----3a8144eabfe3---

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

Photo by Fancycrave on UnsplashString reversal is a very common interview question, and luckily it’s quite simple. There are many different ways to do this, but here are four methods, starting from the simplest and going to the most complex.Use arraysThis is a very straightforward method that leverages existing language features in order to accomplish a task. Most interviewers would ask you to perform the same task in a more ‘manual’ way if you tried this, but it demonstrates an awareness of Javascript, and is what I’d use in real life to accomplish this.Javascript allows you to call the reverse method on arrays. You can see some examples in the documentation here.So we would create a function that does the following:Converts the string to an arrayReverses the arrayTransforms the array back (...)

#algorithms #web-development #coding #string-reversal

Implementing AudioWorklets with #react
▻https://hackernoon.com/implementing-audioworklets-with-react-8a80a470474?source=rss----3a8144ea

https://cdn-images-1.medium.com/max/1024/1*xBAAzp2dbEan-3sRgVT6yw.jpeg

Photo by Steve Harvey on UnsplashWith the shipment of the #audioworklet feature in Chrome 64, it’s probably reasonable to say 2018 was a good year for the Web Audio API. Nearly a year later after its release, there are still relatively few examples outside of the resources at Google Chrome Labs and dsp.audio for developers to draw from. These serve as great introductions to the interface, but with relatively few user-created examples to learn from, we’re left to our own devices when figuring out how to implement it out in the wild. The reality is, the task of getting AudioWorklets to play nice with React and other UI frameworks isn’t as straightforward as it might seem. The aim of this article is to show programmers already familiar with the Web Audio API how they can connect AudioWorklets (...)

#javascript #web-audio-api #audioworklets-with-react

How to build a simple Front End for your #eos smart contract
▻https://hackernoon.com/how-to-build-a-simple-front-end-for-your-eos-smart-contract-3f9289e8146c

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

We are going to build a simple Front End that interacts with an EOS smart contractOur simple front end: Login PageI have always been a big fan of React from the very beginning, but lately I have been playing around with Vue and have to admit that I really fell in love with it for it’s simplicity. To keep things simple as possible for you, I have decided to use Vue to build our front end this time.NOTE: If you have not tried out Vue, their official documentation is the best place to start.Create a Vue ProjectStart by installing Vue, open up terminal and type this:npm i -g @vue/cliNow that Vue is installed we are going to use it’s CLI to create our projectvue create eos-loginWhen prompted choose “Manually select features” then, use the space bar to select Babel, Router and Vuex feature. For the (...)

#smart-contracts #vuejs #blockchain #javascript

Fetching Crypto price with #react
▻https://hackernoon.com/fetching-crypto-price-with-react-3a49f41bf80c?source=rss----3a8144eabfe3

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

Fetching Crypto Price with ReactBefore we dive into the code, let’s talk a bit about the project we’re going to do and few requisites.You’ll need the knowledge on:HTML: Only very basic knowledge.JavaScript: Intermediate level to write functions (ES6).CSS: Optional but preferred. We won’t talk about why it looks so and so. That’s where CSS comes to play. You can start with the provided starter template which includes all required CSS.Familiarity with any API, Node or react will be a great advantage as you follow the tutorial.Setting Up the tools:NodeJS: Install from here. LTS version is recommended. We won’t be running any #javascript for the node, but we need Node to run the react app.Make sure to verify npm is also installed with it. You can also use yarn, an npm alternative, if you are (...)

#fetching-crypto-price #reactjs #cryptocurrency-react

Beyond #solidity, part 1: Setting up the #monorepo
▻https://hackernoon.com/beyond-solidity-part-1-setting-up-the-monorepo-8db094ebbee5?source=rss--

https://cdn-images-1.medium.com/max/500/1*JwmYx3GZXG0oaLYjIv72TQ.jpeg

After developing the smart contracts for 8x, I thought it was all over. That was far from the truth. The requirements for a decentralized protocol are slowly increasing over time with the need for:An easy to use JS libraryUp to date place of contract addresses and ABIsDocumentation (dynamic, because who actually updates static documentation)Developer utilitiesdApp/widget to interact with the underlying protocolMarketing website that integrates or includes your dApp/widgetEach of these requirements, more or less, requires its own repo. Before you know it you’ll be managing over 7 different repos with version control on each of them. Suddenly, making a small change in one package will require an npm install in at least another 2 packages (best case).So what’s the answer to this madness? A (...)

#developer #javascript #setting-up-the-monorepo

Hands On: Creating Your Own Local Private Geth Node (Beginner Friendly)
▻https://hackernoon.com/hands-on-creating-your-own-local-private-geth-node-beginner-friendly-3d4

https://cdn-images-1.medium.com/max/1000/0*f0Pkk4RmFwUz3Hsj.jpg

Source: ▻https://altcointoday.com/If you’re new to the blockchain sphere and want to get a hands-on feel of this ground-breaking yet a-tad-bit arcane #technology, this tutorial is for you.This will be a comprehensive step-by-step tutorial for you to get started with #ethereum blockchain. So, don’t worry I will cover each and every step.Source: ▻https://tenor.com/What will we build?A local testnet Ethereum blockchain using Geth.Local: This blockchain will be running only on your computer (formally, node) locally.Testnet: This will not mine real Ethers. Only fake ones. It is perfect for testing dApps, or for just playing around.PrerequisitesMacOSHomebrew (Download link: ▻https://brew.sh/)XCode (Get from AppStore)Setting Up Development EnvironmentStep 0: Download Geth using HomebrewFire up your (...)

#bitcoin #solidity #javascript

#javascript 2018 — TOP 20 HACKERNOON ARTICLES OF THE YEAR
▻https://hackernoon.com/javascript-2018-top-20-hackernoon-articles-of-the-year-9975563216d1?sour

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

JAVASCRIPT 2018 — TOP 20 HACKERNOON ARTICLES OF THE YEARPhoto by Jingda Chen on UnsplashMany great articles have been posted this year on Hacker Noon, but you — busy programmers and developers — can’t possibly hope to find the time to read even half of them half as thoroughly as they deserve. With this in mind, I have gone through the trouble of picking the best ones for your reading pleasure.2018 has been a great year for JavaScript. In June, ES2018 has been introduced — bringing us new features such as asynchronous iteration, generators, and rest/spread parameters. The libraries and frameworks have got much smaller and faster. React, Angular and Vue have all got new features and are now going head-to-head when it comes to being the best choice for creating applications. What a time to be a (...)

#javascript-stories #software-development #javascript-2018 #read-about-javascript