#javascript

How to get started with Sanity as a headless #cms
▻https://hackernoon.com/how-to-get-started-with-sanity-as-a-headless-cms-b755a9de1770?source=rss

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

Sanity is the perfect companion for when you want to get started with the JAMstack, or just need API for your project. In this tutorial you’ll learn how to get started with using Sanity — from configuring the #react editor with #javascript, to querying the API and migrating the #content datasets.If you find yourself in need of some backend, the chances are that Sanity is one of the quickest ways to get started without later punishing you. Spin up a new Sanity project for your weekend project. For that time you need an API to test something quickly. Or you can use it for more serious stuff. For example, when you need a conduit between a legacy system and the technology you prefer to use. And when you need humans to be in control of digital content, Sanity has an open source editor, that you (...)

#headless-cms

Package #lambda Functions The Easy Way With #npm
▻https://hackernoon.com/package-lambda-functions-the-easy-way-with-npm-e38fc14613ba?source=rss--

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

Package Lambda Functions the Easy Way with NPMPhoto from ▻https://unsplash.com/@chuttersnapI’ve recently settled on a clever use of npm pack to prep #aws Lambda Functions for deployment. I’d like to tell you how I’m using NPM and why it’s better than Webpack or #serverless Framework.If you’re deploying #javascript to AWS Lambda you’re likely aware there’s more than one way to do it. JavaScript and Serverless do not suffer from a lack of packaging tools. So far I’ve tried:ServerlessServerless + Webpack plugin + BabelSAM + WebpackSAM + NPM (lately)Why I use SAM instead of ServerlessServerless Framework is great if you’re new to the AWS ecosystem, especially CloudFormation. It also manages packaging and deployment of your JavaScript. After some time with Serverless I discovered a few things:I found myself (...)

The 2018 #react JS RoadMap
▻https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02?source=rss----3a8144eabfe3---4

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

An illustrated guide to becoming a Read JS Developer with links to relevant coursesThe React JS or simply React is one of the leading #javascript libraries for developing front-end or GUI of web applications.Backed by Facebook, React JS, also known as just React is has grown by leaps and bounds in recent years and became the de-facto library for component-based GUI development.Though there are other front-end frameworks like Angular and Vue.js available, what sets React apart from others is maybe the fact that it just focuses on component-based GUI development and doesn’t invade on other areas. For example, Angular is a complete framework and gives you a lot of features out-of-the-box, such as a Dependency Injection, Routing system, Forms handling, HTTP requests, Animations, i18n (...)

#software-development #programming #web-development

Simple #i18n for Create #react App with ttag
▻https://hackernoon.com/simple-i18n-for-create-react-app-with-ttag-4c2892343201?source=rss----3a

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

This article will describe how you can set up the translation process for Create React App with ttag in a few minutes with 5 simple steps.First of all, there are at least 4 reasons why you should choose ttag with CRA:Doesn’t require to execute eject.ttag is the framework agnostic solution that works everywhere where #javascript and babel works. Supports jsx out of the box.ttag works with gettext standard, that is very common to translators and can be integrated with any workflow and translation services like transifex, weblate e.t.cttag does not require you to use some ‘alien’ formatting rules like sprintf. You just simply use native javascript template literals for formatting like:tHello $ name At the end of this tutorial, we will setup i18n for CRA starter page.Demo site —  (...)

#create-react-app #localization

Install and Deploy a #react Book App in 3 Steps
▻https://hackernoon.com/install-and-deploy-a-react-book-app-in-3-steps-4b0062284ee?source=rss---

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

Cosmic JS makes it easy to manage content for your React applications. Cosmic enables developers to build modern, content-powered applications without the hassle of maintaining installed CMS infrastructure. The Cosmic Dashboard gives the content creator an unmatched, delightful experience to create content.In this tutorial I’ll demonstrate using the Cosmic JS CLI to install a new Cosmic-powered React app recently debuted by the Cosmic JS Community. The Book App was built using React and Redux with content powered by Cosmic JS. Content creators can manage #books including images, titles, content, authors, and book genre/category. Search functionality is included by typing author name or book title. Sort by book categories and publish a book card from the custom admin dashboard.You can (...)

#web-development #javascript #nodejs

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

Demystify The Multi-threading in Node.JS
▻https://hackernoon.com/demystify-the-multi-threading-in-node-js-4ff07eae9abe?source=rss----3a81

https://cdn-images-1.medium.com/max/837/1*0h5zICLQ8zZMpwey2PFJUg.jpeg

Node.js, one of the popular programming languages for a web software engineer, has a drawback — by default it only runs on a single thread. By using a single thread, Node.js runs the #code by using a terminology called Event Loop.To understand how event loop works, I encourage you to read this official documentation. This terminology is essential to understand the performance issue in Node.JS.The Node.js Event Loop, Timers, and process.nextTick() | Node.jsTo give you a quick summary of how Event Loop works in Node.js, we could refer to this diagram below,If you look at this diagram, an issue could appear when you need to “pause and wait until all of this stuff is completed”. On this step, there are two kinds of output. First, the process is successfully executed and continue to the next step. (...)

#software-development #javascript #nodejs #backend-development

Complete Guide: Receive Push Notifications in #react-native #ios app
▻https://hackernoon.com/complete-guide-receive-push-notifications-in-react-native-ios-app-38b1ec

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

Image from OneSignalApp publishers can send push notifications at any time; users don’t have to be in the app or using their devices to receive them. They can do a lot of things; for example, they can show the latest sports scores, get a user to take an action, such as downloading a coupon or let a user know about an event, such as a flash sale. (by Urbanairship)Adding push notifications to your app is not only a great way to improve the user experience. If used smart, it also helps to:Stimulate user engagementRetain usersIncrease conversion ratesRecently our team implemented push-notifications for React-Native iOS app.We spent a couple days to get this fully working for most common scenarios. The goal of this article is to save this time for you.Apple Push Notification service (APNs) is (...)

#react-push-notifications #javascript #push-notification

The rapid web development toolkit
▻https://hackernoon.com/the-rapid-web-development-toolkit-4e0b274cb5db?source=rss----3a8144eabfe

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

If you are in #startup mode you need to move fast. Feedback cycles are your lifeblood. The quicker you can get something in front of users, the better.Here’s what you need to build real software that solves real problems — FAST.Plus, everything here is FREE.Stage 1: Marvel AppMarvel app let’s you rapidly prototype application functionality using a real phone - no code. The goal is to try out behavior and user flows and try ideas before you spend the time and money on software. It works great.Marvel - The design platform for digital productsStage 2: Quick UI with Vue, #react, Bootstrap, and JSON ServerOnce you’ve iterated a few times and have locked down a good first version of your app, it’s time to write some code. The fastest code in the world is the code you don’t have to write. The second (...)

#software-development #javascript #web-development

Better Ways to Build an E-learning website using #angularjs and #postgresql
▻https://hackernoon.com/better-ways-to-build-e-learning-website-using-angularjs-postgresql-455d8

https://cdn-images-1.medium.com/max/850/1*lUuk7j-gwGYH81i6Xz1N6A.png

Everyone talks about the huge possibilities of digital learning but is not so mindful about its biggest pain point, developing an efficient digital platform. However, with the recently rising urge towards e-learning business, we now have access to an abundance of front-end and back-end development technologies and tools that facilitates our efforts to create efficient e-learning platforms.When it comes to e-learning website development, our prime preference is Angular JS- the powerful #javascript framework developed by Google. Being an open source framework, it simplifies the process of development to a considerable extent. Here in this document, we ought to offer you some brief insights that might help you with your next e-learning web app development.Why Choose an Angular JS and (...)

#elearning #elearning-development

4 Free Resources for being an amazing #javascript developer
▻https://hackernoon.com/4-free-resources-for-being-an-amazing-javascript-developer-5e6b60c56cba?

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

4 FREE resources for becoming an amazing javascript developerThe internet is awash in information. What you probably need is quality, not quantity. Here are 4 resources that take you from zero to hero.1. Language FoundationsThis is a FREE course that covers all the critical aspects of javascript. It’s very thorough and most developers don’t know anywhere near all that is covered.Eloquent JavaScript2. Handling UIMost web UI these days is written with React. Learning React sometimes gets complicated with all the build tools, react/redux/storybook, plugins, and so on. Ditch all that and master the basics.Learn React By Itself - no NPM, no Webpack, no Redux, no Router - React ArmoryOnce you are done there, here is a good follow up:Hooks.guide3. Server sideFoundations and front end have been (...)

#software-development #software #nodejs #web-development

Read it when someone looks down at your Web site, saying “you should pay a designer”:

▻https://brutalist-web.design

“A website’s materials aren’t #HTML tags, #CSS, or #JavaScript code. Rather, they are its content and the context in which it’s consumed”

And

“By default, a website that uses HTML as intended and has no custom styling will be readable on all screens and devices. Only the act of design can make the content less readable” (for those who keep repeating “responsive” without understanding it)

#brutalist #brutalism #web_design

Scaling Node.js Socket Server with #nginx and #redis
▻https://hackernoon.com/scaling-node-js-socket-server-with-nginx-and-redis-d19bf5c07fa8?source=r

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

One of the most interesting topics in back-end development is server scaling and distribution.There are many ways to scale your app and to handle a lot of requests and connections. In this article, we will explain one of the most popular ways of scaling Node.js applications, especially Socket connections.Imagine you have a Node application which receives 300 requests per second. It works fine, but one day the requests count becomes 10 or 100 times more. Then, you will have a big problem. Node applications aren’t meant for handling 30k requests per second (in some cases they can, but only thanks to CPU and RAM).As we know Node is a single thread and doesn’t use the much resources of your machine (CPU, RAM). Anyway, it will be ineffective.You don’t have any guarantee that your application (...)

#web-development #nodejs #javascript

Guidelines for #testing #react components
▻https://hackernoon.com/what-makes-a-good-test-dff3df6058a2?source=rss----3a8144eabfe3---4

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

What makes a good test?Outline of this articlePt 1: Why do we write tests? To prove our code works To protect our code from breaking when we work on it* To document behavior* To help make design decisionsPt 2: Testing practices* TDD Watch modePt 3: Testing React Recommended libraries* Snapshots vs assertions Rules of thumb for assertions Rules of thumb for snapshots* Black Box testing What is the public API for a React component? What is not part of the public API for a React component?Pt 4: More testing practices* Testing async code* Testing library code* Quotes about testingWhy do we write tests?To prove our code worksTo protect our code from breaking when we work on itTo document behaviorTo help make design decisionsTo prove our code worksTests should capture the intent of a (...)

#snapshot #javascript #web-development

Brave’s Brendan Eich on Fixing Online #advertising
▻https://hackernoon.com/braves-brendan-eich-on-fixing-online-advertising-7a3a98809e4d?source=rss

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

Audio interview transcription — WBD045Note: the following is a transcription of my interview with Brendan Eich, the creator of #javascript and the Founder and President of Brave. I use Rev.com from translations and they remove ums, errs and half sentences. I have reviewed the transcription but if you find any mistakes, please feel free to email me. You can listen to the original recording here.You can subscribe to the podcast and listen to all episodes here.In this episode, I talk with Brendan Eich, the creator of JavaScript and founder of Brave and the Basic Attention Token. We talk about how Brave is attempting to change the broken online advertising model.▻https://medium.com/media/dbef713f3544680ed36a4fd34a46ed82/hrefConnect with What #bitcoin Did:Listen: iTunes | Spotify | Stitcher | (...)

#braves #bats

Go easy on the Technical Jargon ✋
▻https://hackernoon.com/go-easy-on-the-technical-jargon-73e5a357d269?source=rss----3a8144eabfe3-

https://cdn-images-1.medium.com/max/1000/1*ZWDtS_9JEu7zqLoaFcu38g.png

Teaching is not easy, especially in the technical space. There are so many acronyms, standards, and conventions that it’s easy to get lost in the jargon.“When sampling a signal from the continuous domain an ADC is used to convert the signal into the discrete domain. The higher the bit rate of the ADC the less quantization error occurs.”Ummm… What? Unless you have some exposure in electronics, chances are you don’t know what on earth is being said here. Your career may not expose you to such details. So, to you, it’s another language being spoken. Have you ever considered how you translate the details of your labor to your non-technical peers at work?I remember the days of sitting at college in a computer science lesson, glancing at the teacher with a look of discontent. It wasn’t because I (...)

#javascript #technical-jargon-easy #programming #easy-on-jargon #technical-jargon

How to Compile Node.js Code Using Bytenode?
▻https://hackernoon.com/how-to-compile-node-js-code-using-bytenode-11dcba856fa9?source=rss----3a

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

In this post, I will show you how to “truly” compile Node.js (JavaScript) code to V8 Bytecode. This allows you to hide or protect your source code in a better way than obfuscation or other not-very-efficient tricks (like encrypting your code using a secret key, which will be embedded in your app binaries, that’s why I said “truly” above).So, using bytenode tool, you can distribute a binary version .jsc of your #javascript files. You can also bundle all your .js files using Browserify, then compile that single file into .jsc.Check bytenode repository on Github.Long story short..Install bytenode globally:[sudo] npm install -g bytenodeTo compile your .js file, run this command:bytenode —compile my-file.js my-file.jscInstall bytenode in your project too:npm install —save bytenodeIn your code, require (...)

#electron #electronjs #nwjs #nodejs

Using #neovim for #javascript Development
▻https://hackernoon.com/using-neovim-for-javascript-development-4f07c289d862?source=rss----3a814

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

Courtesy of Fotis Fotopoulos on UnsplashFor many of us, Neovim has become an absolute necessity. Over the last couple of years, I’ve used Neovim to program, to write and even as a window manager. The last couple of weeks I felt the need to edit a lot of Javascript files, and with, the need to configure Neovim to deal with Javascript.This article details all the plugins and configurations I’ve used to configure Neovim for Javascript editing, completing and linting.First of all, we’ll need to have the Neovim package installed from Python. We’ll also need a recent version of Node and some basic knowledge of Neovim.I’ve been using Vim-Plug as my plugin manager for some time now, and I’ll be using it here, but you can use any of the other ones (like Vundle or Pathogen).First thing I did was to (...)

#javascript-neovim #javascript-development #neovim-for-javascript

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

QuickStart an API-powered Static Website
▻https://hackernoon.com/quickstart-an-api-powered-static-website-1cc140205df9?source=rss----3a81

https://cdn-images-1.medium.com/max/1024/1*kQ5dUoTms4LLdex31-0IeQ.jpeg

Cosmic JS is a decoupled, or headless, content management system that empowers teams to build apps faster, together. Cosmic JS provides a suite of APIs to help you build your project and manage content, regardless of your app’s programming language.In this tutorial I’ll introduce a static website that can give you the best of both worlds: A website that is both dynamically powered by the Cosmic JS API and also a static website that can be edited using Markdown files. As a bonus, you can also setup automatic builds using Webhooks. I’m going to use the Cosmic JS CLI to install this Static Website, and I encourage you to read the original article to see how it’s built. You can install, deploy and edit every part of this Static Website from your Cosmic JS Bucket Dashboard. 🔥TL;DR:API-powered (...)

#nodejs #javascript #bootstrap #static-site #web-development

#hyperledger Composer has been put on pause, what are your options now?
▻https://hackernoon.com/hyperledger-composer-has-been-put-on-pause-what-are-your-options-now-dfc

https://cdn-images-1.medium.com/max/756/1*uAv_ThkuNxOFUc5Xnnbahw.png

Pretty recently the team from Hyperledger Composer posted a relevant note for any software developer creating on top of Composer. Its content could be quite shocking for a lot people in the community, since the project has always proven to be so robust.Basically what Simon outlines in the note, posted on August 30, 2018, is that even though a lot of efforts has been invested in the Composer project, they will mostly stop bringing new features to it. In synthesis the main reasons are regarding its growing architecture and the difficulties to maintain it. According to the note, they will focus more on bringing more features straight to Fabric (which is great for all of us!).“The IBM team will continue to update Composer to maintain compatibility with the latest Fabric v1.x releases, and we (...)

#hyperledger-composer #javascript #blockchain #smart-contracts

Open source cryptography takes a step forward with the release of O...
▻https://diasp.eu/p/7656632

Open source cryptography takes a step forward with the release of OpenPGPjs 4.0 | #cryptography #streaming #web #openpgpjs #protonmail #javascript

Tricks in using #javascript Apply function
▻https://hackernoon.com/tricks-in-using-javascript-apply-function-148b1dcb9503?source=rss----3a8

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

Photo by Isis França on UnsplashDid you ever feel cumbersome when you use the built in JavaScript Functions Math.max and Math.min?Image from google.comWe already know that this two built functions accepts a variable argument-list. For instance when using the Math.max to get the highest value it may be written in this wayMath.max(5,2,1,3,4) // Outputs 5. Works pretty well. How about if we’re dealing with array of values we might write our code in this way.const list = [5,2,1,3,4];Math.max(list[0],list[1],list[2],list[3],list[4],list[5]);What’s wrong in this Implementation?I guess you know what’s wrong in this. As you may notice this implementation is not flexible. What if the size of array grows? We add more values in Math.max argument. As a developer we didn’t want to do that we do hard code (...)

#javascript-tips #es6 #javascript-development #es5

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

GitHub - alsacreations/pepin : Structure par défaut de plugin jQuery et plugins variés
▻https://github.com/alsacreations/pepin

Pepin est un modèle (parmi tant d’autres) de plugin jQuery modulaire, accompagné de plugins pratiques (voir liste ci-dessous), propres et respectant la plupart des bonnes pratiques d’accessibilité, avec l’usage d’ARIA.

Pour les plugins proposés : ▻https://github.com/alsacreations/pepin#plugins

#jquery #plugin #modulaire #javascript #tabs #modalbox #slider #scroll #sticky #accordeon #toggle #autocomplete