Don't wanna be here? Send us removal request.
Statistics
We looked inside some of the posts by ixdveronicacodes and here's what we found interesting.
Average Info
Notes Per Post
0
Likes Per Post
0
Reblog Per Post
0
Reply Per Post
0
Time Between Posts
2 days
Number of Posts By Type
Text
15
Last Seen Tumblr Blogs
Fun Fact
Users from the US are the majority of Tumblr visitors.
Text
async...await
ES8 provides a new syntax for handling asynchronous action.
The command await means “just wait for the promise to resolve”.
Await is only valid in async function.
It will return a promise asynchronously after however many calls of await. Meaning, one can set async once and within that function as many awaits as one wants, thus avoiding to write then for every time.
One makes the function asynchronous by adding the modifier async before declaring the function, like:
Ok, this was pretty hard to wrap my head around, but I get the general idea of this syntax: it doesn’t add an additional function, it just makes the code more readable, economical and scalable, meaning the async...await syntax is syntactic sugar.
0 notes
Text
Promises
“JavaScript is single threaded, meaning that two bits of script cannot run at the same time; they have to run one after another.“*
This rule I learned hands-on while working on the API Lab and trying to assign two different functions to be called at the same time through DOM and Annyang voice recognition API. I intended to activate to function calls simultaneously: a string of text to appear on the screen and a div with graphics as its background - it didn’t work. Then, I was googling what was wrong and I found out that was not possible, so I just combined those two functions into one.
“JavaScript is in the same queue as painting, updating styles, and handling user actions. Activity in one of these things delays the others. Events are great for things that can happen multiple times on the same object. But when it comes to async success/failure, you want to use a promise instead
At their most basic, promises are a bit like event listeners except:
A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa.
If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier.
Promises Terminology
A promise can be:
fulfilled - The action relating to the promise succeeded
rejected - The action relating to the promise failed
pending - Hasn't fulfilled or rejected yet
settled - Has fulfilled or rejected
Here's how you create a promise:
var promise = new Promise(function(resolve, reject) { // do a thing, possibly async, then… if (/* everything turned out fine */) { resolve("Stuff worked!"); } else { reject(Error("It broke")); } });
Here's how you use that promise:
promise.then(function(result) { console.log(result); // "Stuff worked!" }, function(err) { console.log(err); // Error: "It broke" });
”*
* By Jake Archbald: https://developers.google.com/web/fundamentals/primers/promises
0 notes
Text
JS Libraries
howler.js
ifttt.com
greensock.com
cdnjs.com/libraries
0 notes
Text
API
https://earthquake.usgs.gov/earthquakes/
Take the code, and try changing data, see how it works.
Assignment: put new data and change graphics, try building interactions.
Gradually expose information on the graph.
0 notes
Text
Data and APIs in JavaScript
https://www.youtube.com/watch?v=rJaXOFfwGVw&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r
How to manifest data through GUI.
Data can come in a variety of formats:
CSV - tabular data (data in a table), raw format for tabular data
XML -
JSON
CSV, XML and JSON are standardised formats fro data.
Text file
PDF
Webpage
API - making two applications talk to each other to send and receive data
What is JSON?
Basically, if you have a huge amount of data, you don’t want that in your code, but rather stored somewhere else in a separate file, so you could call upon it whenever you need it.
So, .js is JavaScript file and it’s code file whereas .json is DATA file, there is no code there, nothing to execute, only information that can be loaded. In JSON there are no variable names, it’s just an object that starts with curly brackets and ends with curly brackets. In JSON, you want that property names would also be strings in quotes (those objects consist of key-value pairs, like “name” : “sunflower”).
Check if the syntax is correct for your JSON file: JSON Formatter and Validator.
Take data from the JSON file in your JS file with the loadJSON(); function.
Data set in JSON:
0 notes
Text
Local Storage with JavaScript
Source: https://www.taniarascia.com/how-to-use-local-storage-with-javascript/
Web storage is data stored locally in a user’s browser. There are two types of web storage:
Local storage – data with no expiration date that will persist after the browser window is closed.
Session storage – data that gets cleared after the browser window is closed.
This is useful for saving data such as user preferences (light or dark color theme on a website), remembering shopping cart items, or remembering a user is logged into a website.
Previously, cookies were the only option for remembering this type of local, temporary data. Local storage has a significantly higher storage limit (5MB vs 4KB) and doesn’t get sent with every HTTP request, so it can be a better option for client-side storage.
0 notes
Text
JSON
JSON, short for JavaScript Object Notation, is a format for sharing data. This format is easy to transmit between web server and client or browser.
Some general uses of JSON:
Storing data
Generating data structures from user input
Transferring data from server to client, client to server, and server to server
Configuring and verifying data
JSON’s format is derived from JavaScript object syntax, but it is entirely text-based. It is a key-value data format that is typically rendered in curly braces.
You may expect to see JSON both as a .json file, OR within JavaScript as an object or a string.
How to work with JSON:
https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript
More > Introduction to JSON:
https://www.digitalocean.com/community/tutorials/an-introduction-to-json
0 notes
Text
Data Structures: Objects and Arrays
From Eloquent JavaScript:
0 notes
Text
GitHub README.md
GitHub Markdown Format
Learning md format for README.md – that’s how you are handing in documentation.
Contains information about:
What the project does
Why the project is useful
How users can get started with the project
Who maintains and contributes to the project
Where users can get help with your project
https://help.github.com/articles/about-readmes/
0 notes
Text
Node.js
Makers of Node.js took JavaScript that is confined to a browser and they allowed to run it on your computer.
What you do with node.js:
utilities on your machine
a web server
The introductory video to node.js didn’t explain much to me at this point, I still feel confused about what it is.
Node tutorials: nodeschool.io/#workshoppers
The purpose of node is to be able to run JavaScript on local server and for development of communication that is not meant for a browser.
_________________________________________
What is npm?
npm (Node Package Manager) is the world's largest Software Registry. The registry contains over 800,000 code packages. Open-source developers use npm to share software. Many organizations also use npm to manage private development.
0 notes
Text
JavaScript and the Browser
In Eloquent JavaScript:
A computer can use Internet to shoot bits at another computer and the computers on both ends must know what the bits are supposed to represent.
A network protocol describes a style of communication over a network. There are protocols for sending email, for fetching email, for sharing files etc.
The Hypertext Transfer Protocol (HTTP) is a protocol for retrieving named resources (chunks of information, such as web pages or pictures). It specifies that the side making the request should start with a line like this, naming the resource and the version of the protocol that it is trying to use:
GET /index.html HTTP/1.1
HTTP treats the network as a streamlike device into which you can put bits and have them arrive at the correct destination in the correct order.
To be able to listen for different kinds of communication at the same time on a single machine, each listener has a number (called a port) associated with it. Another computer can then establish a connection by connecting to the target machine using the correct port number. If the target machine can be reached and is listening on that port, the connection is successfully created. The listening computer is called the server, and the connecting computer is called the client.
The World Wide Web (not to be confused with the Internet as a whole) is a set of protocols and formats that allow us to visit web pages in a browser.
Each document on the Web is named by a Uniform Resource Locator (URL), which looks something like this:
http://eloquentjavascript.net/13_browser.html | | | | protocol server path
(encrypted HTTP, which would be https://)
Machines connected to the Internet get an IP address, which is a number that can be used to send messages to that machine, and looks something like 149.210.142.219 or 2001:4860:4860::8888. A domain name replaces the IP address.
HTML, which stands for Hypertext Markup Language, is the document format used for web pages.
Look up: Tim Berners-Lee, The World Wide Web: A very short personal history
0 notes
Text
Mark Weiser – The Computer for the 21st Century (1999)
Weiser in his 1999 article about the future of computer writes about how computing is still war away from being approachable by the general public as opposed to the written word. He argues that computers are stil not an integral part of peoples lives and there is a need to integrate computers in such a way so that they would “vanish into the background”and we would “use them without thinking”.
The article does present many accurate prophesies on how the computer world will look like in 20 years. Weiser complains that VR simulation still takes up an enormous apparatus instead of invisibly expanding the world that already exists, but in the future, he says, the text we see on various surfaces will be replaced by “hardware of embodied virtuality: hundreds of computers per room.” as well as “these hundreds of computers will come to be invisible to common awareness”. He then names many of the devices that we now actually use everyday and compares those future perspectives with the current usability of computer technology.
Weiser narrates a fiction story about a typical day of a human in the future and in what ways they will be using and interacting with technology.
0 notes
Text
codeCademy GIT
wGit is a software that allows you to keep track of changes made to a project over time. Git works by recording the changes you make to a project, storing those changes, then allowing you to reference them as needed.
.txt file
git init
init means initialize. The command sets up all the tools Git needs to begin tracking changes made to the project.
Git Workflow
A Working Directory: where you'll be doing all the work: creating, editing, deleting and organizing files
A Staging Area: where you'll list changes you make to the working directory
A Repository: where Git permanently stores those changes as different versions of the project
git status
Check status of the changes on the working directory.
git add
In order for Git to start tracking the document, the file needs to be added to the staging area.
git add filename
git diff
Since the file is tracked, we can check the differences between the working directory and the staging area with get diff.
get diff changes.txt
The staging area is indicated in white. Changes in the file are indicated in green and marked with a +.
Add the changes to the staging area in Git:
git add scene-1.txt
So the changes are saved.
git commit
A commit is the last step in our Git workflow. A commit permanently stores changes from the staging area inside the repository.
However, one more bit of code is needed for a commit: the option -m followed by a message:
git commit -m "Complete first line of dialogue"
git log
Often with Git, you'll need to refer back to an earlier version of a project. Commits are stored chronologically in the repository and can be viewed with git log.
In the output, notice:
A 40-character code, called a SHA, that uniquely identifies the commit. This appears in orange text.
The commit author (you!)
The date and time of the commit
The commit message
WRAP-UP: Git is the industry-standard version control system for web developers. Use Git commands to help keep track of changes made to a project:
git init creates a new Git repository.
git status inspects the contents of the working directory and staging area.
git add adds files from the working directory to the staging area.
git diff shows the difference between the working directory and the staging area.
git commit permanently stores file changes from the staging area in the repository.
git log shows a list of all previous commits.
0 notes
Text
Creating a simple p5.js sketch
The first task for the Programming II course is to create a simple sketch using P5 libraries combining code from a few examples on the P5js.org page. At the first glance it looks fairly easy, but many of the examples sets up a canvas on the JavaScript file, thus making it difficult to layer different functions as the code overlaps. I will watch some introductions to creating with p5 on YouTube to get an understanding what is possible with p5. Maybe I could manage to create a video and graphics application? This is something that I found out about processing and p5.js:
Processing is a project from 2001 bringing the idea of creative coding (creative applications/expression through programming). Processing was first built on Java, though today browsers listen to JavaScript. p5.js is a processing project and it is a simple environment to help learn JavaScript and make interesting creative applications to run on a browser. It is a library of functions and an online editor to code in.
Created by Lauren McCarthy, her projects can be found here: http://lauren-mccarthy.com/
I got caught by one tutorial on how to make the browser take a video of you and paint the pixels in real time on the web browser screen. It uses the idea similar to the Video Capture and Video Pixels example on p5js.org, but instead of a local video, it broadcasts live video from computer camera.
The sketch uses a live video and a single particle that moves randomly and draws a trail of itself. The video is shown on the browser via a video dom element from p5.js library. The particle grabs color from the video and then the particle is multiplied to create the full image. In the HTML doc I used CDN links for dom and sound libraries.
(insert screenshot)
Later in the week I will work on creating a simple CSS GUI for the application. Also I will try to allow the user to pick the background color with sliders.
0 notes