React Tutorial // The easiest way to learn React

React Tutorial // The easiest way to learn React

Auf react-tutorial.app könnt ihr live und interaktiv React erlernen indem ihr eine Online Shop App erstellt. Alles was ihr dazu benötigt ist ein kostenloser Git-Account. Und falls euch noch das nötige JavaScript Knowhow fehlt, kann man das hier auch nachholen: https://learnjavascript.online Learn modern React from scratch, and practice in an intuitive environment. Throughout this course, you will build an online supermarket shopping app with Stripe integration. Weitere Themen die der Kurs beinhaltet: React.createElement JSX Advanced JSX ReactDOM React Elements React Components Functional Components Props State Hooks Destructuring UI Kit UI Library DOM Events Custom Events Lifting state Using APIs Immutability Error Boundaries Accessibility Folder structure Create React App Virtual DOM Context Provider React Dev Tools React Router Forms Class Components Composition Inheritance  

IsoCity // An isometric city builder in JavaScript

Ein nettes, kleines City Builder JavaScript Experiment von Victor Ribeiro. Hier geht’s direkt zur Live Version: https://victorribeiro.com/isocity Github: https://github.com/victorqribeiro/isocity A simple JavaScript city builder with no simulation at all. No budget, no goals. Just build your tiny city. This would work on a phone, but it wasn’t designed with phones in mind.

Memory Game ala Super Mario mit JavaScript // Tutorial

In dem Tutorial „How to Create a Memory Game (ala Super Mario 3) with Plain JavaScript“ erklärt Tania Rascia wie man ein einfaches Memory Spiel mit JavaScript und Basis-Wissen von HTML und CSS realisiert. Hier die fertige Demo. Kann man mit individuellen Grafiken sicherlich auch auf der eigenen Website als Schmankerl einbinden.  

Yo! Weekly by Rob Hope // Design News Webcast Serie

Der neue Yo! Weekly Webcast von Rob Hope bringt jede Woche in komprimierter Form Video-News rund um Design, Webdevelopment, Freebies und einer Auswahl der besten Websites als Inspiration. Alle vorgestellten Links finden sich dabei unter dem jeweiligen Video oder direkt über den Yo! mailer Newsletter. Feine Sache für alle, die im Kreativ- oder Tech-Bereich arbeiten. Teil 2 ist inzwischen auch online: Credits:  Personal Website: https://robhope.com Newsletter: https://robhope.com/yo Twitter: https://twitter.com/robhope Instagram: https://instagram.com/hitdelete Facebook: https://facebook.com/robhope One Page Love: https://onepagelove.com

Universal Paperclips // Browser Clicker Game gone mad

Das Browser Game Universal Paperclips von Frank Lantz fängt wie ein typisches Clicker Game an: Wir spielen eine künstliche Intelligenz, die mit einem Klick Büroklammern herstellen kann, welche sich zu einem bestimmten Preis (abhängig von Angebot und Nachfrage) verkaufen lassen. So weit so banal. Haben wir genug Klammern hergestellt, können wir AutoClipper kaufen, die automatisiert Klammern herstellen. Bemerkt man, dass der Draht langsam aus geht, versuchen wir diesen für einen günstigen Preis zu kaufen um so den Profit noch weiter zu maximieren. Relativ schnell stellen wir nicht mehr manuell Klammern her oder kaufen Draht ein, sondern kümmern uns nur noch um den Verkaufspreis abhängig von Marketing, Output und Nachfrage. Nach und nach lassen sich weitere Prozesse optimieren und automatisieren und das Spiel wird trotz all seiner grafischen Nüchternheit immer schräger. Irgendwann werden Abertausend Klammern pro Sekunde hergestellt und wir passen nur noch den Ertrag pro Sekunde an, während wir uns um Quantencomputer, Prozesse und Speicher kümmern oder automatisiert am Aktienmarkt teilnehmen. Ganz nebenbei bestechen wir die Konkurrenz, kümmern uns um ein Heilmittel für Haarausfall, Krebs und natürlich den Weltfrieden. Man erhält dabei vielleicht sogar eine grobe Ahnung was, gestützt von künstlicher Intelligenz, mit automatisierter Produktion und Aktien-Trades, Bitcoins und Co. weltweit in Sekundenbruchteilen passiert. Man spielt quasi […]

Moving Letters // Animated Text with JavaScript and anime.js

Moving Letters ist ein schönes, kleines Side-Projekt von Tobias Ahlin: Animierte Text Effekte via JavaScript und anime.js, die sich vor allem für Headlines in diversen Projekten eignen. Den Sourcecode gibt’s kostenlos unter MIT Lizenz. If you’re into animation, I made a collection of open source text effects animated with JavaScript & anime.js https://t.co/wsMTHwSswx ❤️ pic.twitter.com/rTN3SFddtH — Tobias Ahlin (@tobiasahlin) October 3, 2017

Isometric & 3D Grids

Tolles, neues isometrisches 3D-Experiment von Codrops: Isometric and 3D Grids Vielleicht kann das ja jemand in einem zukünftigen Web-Projekt gebrauchen?

Vanilla List // The Vanilla Javascript Repository

Es muss nicht immer jQuery sein. Gerade bei kleineren Projekten, die nur ein paar JavaScript „Schmankerl“ benötigen, kann man gut auf ein aufgeblähtes Framework verzichten. Das dankt einem nicht nur der PageSpeed Score, sondern letztendlich jeder einzelne Benutzer einer Website oder Landingpage. Das Vanilla List Repository führt zahlreiche, reine JavaScript-Lösungen auf, die ohne jQuery klar kommen.

Chrome Music Lab // Website of the day

Chrome Music Lab ist eine Sammlung von schönen, interaktiven Webexperimenten in Zusammenarbeit mit Musikern und Webentwicklern. Zum Einsatz kommen dabei unter anderem Web Audio, WebGL, Tone.js und Pixi.js. Music is for everyone. So this year for Music In Our Schools month, we wanted to make learning music a bit more accessible to everyone by using technology that’s open to everyone: the web. Chrome Music Lab is a collection of experiments that let anyone, at any age, explore how music works. They’re collaborations between musicians and coders, all built with the freely available Web Audio API. These experiments are just a start. Check out each experiment to find open-source code you can use to build your own.

A Short Journey // Website of the day

Einfach mal zwei Minuten Abschalten und schauen, was mit Html5 und JavaScript inzwischen so alles möglich ist: www.ashortjourney.com „Take a deep breath to begin 2016 and enjoy the ride“ Credits: Interactive Direction & Production: Cher Ami 3D & Illustration: Benoit Challand Music: Klimperei & GNG – Alfred Très En Vacances Album „Alfred“ released on MonsterK7 » via TheFWA