Author Archives: te-bachi

AliExpress Linear Guide Rail

Leave a reply

Langzeitfett

LM 47 LANGZEITFETT + MOS2

Google Coding Interview

Leave a reply

Medium Google Coding Interview With Ben Awad

Vue.js: The Documentary

Leave a reply

Vue.js: The Documentary

Wikipedia

Ember.js
Vue.js
React
Laravel
Meteor
GraphQL
Backbone.js
AngularJS

ember.js

LinkedIn – Sarah Drasner
github.com/sdras
CSS-Tricks – Sarah Drasner
Sarah Drasner’s Website

Fusion 360 Cheatsheet

Leave a reply

Create

Edit-in-Place

Component

Assembly

Select Component Drag

Revert Movement

Create Component from Body

Ground Component

As-Built (better than Ground)

STEP Import

Capture Design History

Master Model Workflow

Component with Bodies Assembly with Components

Offset Face

Offset Plane

Surface

Fusion 360 Videos

Leave a reply

Strategy how your sketch entities relate to one other at the beginning of each model
Design Intent
Pencil and paper before you start sketching anything out in Fusion 360
Square washer plate with a hole cut out

Learn the Fusion 360 User Interface (2021)

Ümit Acku

Fusion 360 Kaufteil / Katalogteil einfügen und fixieren – Baugruppe – Gelenke – Skizze – Zep To

Riesen Consulting

Autodesk Fusion 360 – STEP-, / SAT-Dateien bearbeiten – Deutsch Tutorial Schulung

LearnItDoItMakeIt

Joint (Face-to-Face) – Day 42 of 100 Autodesk Fusion 360 Journey

Autodesk Fusion 360

Using As Built Joints
QUICK TIP: Ground vs As-Built Joint

Fusion 360 School

Fusion 360 | Master Model Workflow
Fusion 360 – Master Model | Top Down Design
Fusion 360 – Master Model Workflow

Fusion 360 – Case Studies (Playlist)

NYC CNC

Joints in Fusion 360: A Comprehensive Tutorial! FF117

Chong Siu

Replacing a Component and Managing its Dependencies in Fusion 360

Aircraft & HElicopter

TEX – Design & Engineering

How to Model a Car | Fusion 360 Tutorial Series
How to Model a Helicopter | Fusion 360 Tutorial Series
How to Model an Aircraft | Fusion 360 Tutorial Series

Omega Fusion

Boeing 757
A350 Designing
How to Design a Aircraft
Model Rocket

JavaScript Videos

Leave a reply

YouTube

MaxSandelin

Learn to code a to-do list app in JavaScript – Part 1
Learn to code an API in JavaScript – Part 1
github.com/themaxsandelin/todo
maxsandelin.com

The Coding Train

9.19: Prototypes in Javascript – p5.js Tutorial
Coding Challenge #65.1: Binary Search Tree
1.4: JSON – Arbeiten mit Daten und APIs in JavaScript

Traversy Media

Async JS Crash Course – Callbacks, Promises, Async Await

Level Up Tutorials, LLC.

Level Up Tutorials Website
Level Up Tutorials Playlist

Programming with Mosh

ES6 Tutorial: Learn Modern JavaScript in 1 Hour

Fun Fun Function

Object Creation in JavaScript (Playlist)
Must-know JavaScript Features
var, let and const – What, why and how – ES6 JavaScript Features

Web Dev Simplified

MutationObserver – This Is Unbelievably Powerful
Async vs Defer – What Is The Fastest Way To Load JavaScript

ES6

The ES6 Guide
JavaScript ES6 Features
These are the features in ES6 that you should know
Understanding Destructuring, Rest Parameters, and Spread Syntax in JavaScript
ES6 Handbook: Everything You Need to Know
JavaScript ES6 (ECMAScript 2015)

Text

ECMAScript 2009	ES5
ECMAScript 2015	ES6
ECMAScript 2016	–
ECMAScript 2017	–
ECMAScript 2018	–

Learn JavaScript

Mozilla

JavaScript building blocks
Looping code
Introduction to events
Making decisions in your code — conditionals
Performance interface
Funktionen
Methoden Definitionen

Die Funktionsdeklaration (function Statement)
Der Funktionsausdruck (function Ausdruck)
Die Generatorfunktionendeklaration (function* Statement)
Der Generatorfunktionsausdruck (function* Ausdruck)
Der Pfeilfunktionsausdruck (=>)
Der Function Konstruktor
Der GeneratorFunction Konstruktor
Das arguments Objekt
Konstruktor vs. Deklaration vs. Ausdruck

var
Variablendeklarationen werden immer ausgeführt bevor Programmcode ausgeführt wird, egal wo sie im Programmcode vorkommen. Der Gültigkeitsbereich einer Variablendeklaration mit var ist der aktuelle Kontext. Dieser ist der Kontext der umschließenden Funktion oder für Deklarationen außerhalb von Funktionen der globale Kontext.

let
let ermöglicht es Variablen zu deklarieren, deren Gültigkeitsbereich auf den Block, den Befehl oder den Ausdruck beschränkt ist, in dem sie deklariert sind. Der Unterschied zum var Schlüsselwort ist, dass der Gültigkeitsbereich auf Blöcke und nicht auf Funktionen bzw. Global beschränkt ist.

ES6 In Depth: let and const
Explaining JavaScript Scope And Closures

Hoisting
Hoisting

MutationObserver

JavaScript modules
Express/Node introduction

// Load HTTP module
const http = require("http");

<script type="module" src="main.js"></script>
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

dofactory

JavaScript Objects
JavaScript Advanced Objects
JavaScript Function Objects

academind

JS Functions Are Objects

javascript.info

Object methods, “this”

Raycasting Videos

Leave a reply

Coding Challenge #145: 2D Raycasting
Super Fast Ray Casting in Tiled Worlds using DDA
Make Your Own Raycaster Part 1
Wolfenstein 3D’s map renderer

Vue.js Videos

Leave a reply

Vuex Explained Visually by Adam Jahr
Vuex Crash Course | State Management
Vue JS Crash Course (2019)
Vue JS Crash Course 2021
Angular vs React vs Vue [2020 Update]
Vuex Crash Course | State Management
Vue 3 & A First Look at the Composition API

LevelUpTuts

VueJS For Everyone Preview

CSS Videos

Leave a reply

YouTube

Online Tutorials

Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects 02
Colorful Rain Animation Effects using Html CSS & Vanilla Javascript
Top CSS & Javascript Animation & Hover Effects | January 2021
Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects
CSS 3D Text Animation Effects | Html CSS Animated Cigarette

Coding – kurz und knapp

Responsive Navigationsleisten | HTML, Flexbox, JavaScript, CSS Tutorial Deutsch

Kevin Powell

Learn CSS Grid the easy way
Amazing 3D CSS creations from my community
Flexbox design patterns you can use in your projects
Responsive navbar tutorial using HTML CSS & JS
Simplify your CSS with these 3 grid layout solutions

Rachel Andrew

The fundamentals of CSS layout | Workshop
CSS Layout Workshop

The Net Ninja

CSS Flexbox Tutorial (Playlist)
github.com/iamshaunjp
github.com/iamshaunjp/css-flexbox-playlist

Unleashed Design

CSS3 Grid/Flex Layout richtig nutzen! [TUTORIAL]
Dieser CSS Card Effekt macht süchtig! Spotlight Border Animation [DE/Tutorial]

Web Dev Simplified

Learn CSS Display Property In 4 Minutes
Learn CSS Position In 9 Minutes
Learn CSS Media Query In 7 Minutes

HTML und CSS Tutorial für Anfänger | Eigene Webseite erstellen

The Morpheus Tutorials

CSS 3 Tutorial #24 – Animationen Grundlagen

Cod Mark

Border Animation CSS | Quick Animation

LearnWebCode

CSS Layout: Flexbox & Grid Basics

Text

Mozilla

Grundlegende Konzepte der Flexbox

CSS-Tricks Text

A Complete Guide to Flexbox
Intro to Vue.js: Animations
Intro to Vue.js: Vuex
Creating Vue.js Component Instances Programmatically
Creating Vue.js Transitions & Animations
Vue Design System
Getting Started with Vue Plugins
How the Vue Composition API Replaces Vue Mixins
Vue 3

vscode

Vue VSCode Snippets

CSS Cheatsheet

Leave a reply

Collapsed Margins

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
        <div class="flexelement">Box 5</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px 0 15px 0;
}

Why does this CSS margin-top style not work?

Float left

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
        <div class="flexelement">Box 5</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px;
    float: left;
}

background vom Parent ist transparent?

Parent hat nun auch float left! Background wieder da!

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    float: left;
}

Letztes div nicht mehr float left

        <div class="flexelement-clear">Box 4</div>
        <div class="flexelement">Box 5</div>

.flexelement-clear
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px;
    clear: left;
}

Flexbox kein Wraparound?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
        <div class="flexelement">Box 5</div>
        <div class="flexelement">Box 6</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Flexbox Menu-Punkte mit justify-content: flex-end

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px;
}

Flexbox align-items

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1 asdf sasdf asdf sd fasdf asf sadfas fasdf asdfasdf saafd</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 0 0 1% 0;
    padding: 15px 0 15px 0;
    width: 20%;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Nav</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement box1">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 0 0 1% 0;
    padding: 15px 0 15px 0;
}

.box1 {
    font-size: 50px;
}

Langzeitfett

Wikipedia

Create

Edit-in-Place

Component

Assembly

Select Component Drag

Revert Movement

Create Component from Body

Ground Component

As-Built (better than Ground)

STEP Import

Capture Design History

Master Model Workflow

Component with Bodies Assembly with Components

Offset Face

Offset Plane

Surface

Mistermestro

Kristian_Laholm

Product Design Online

Ümit Acku

Riesen Consulting

LearnItDoItMakeIt

Autodesk Fusion 360

Fusion 360 School

NYC CNC

Chong Siu

Aircraft & HElicopter

TEX – Design & Engineering

Omega Fusion

YouTube

MaxSandelin

The Coding Train

Traversy Media

Level Up Tutorials, LLC.

Programming with Mosh

Fun Fun Function

Web Dev Simplified

ES6

Text

Learn JavaScript

Mozilla

dofactory

academind

javascript.info

LevelUpTuts

YouTube

Online Tutorials

Coding – kurz und knapp

Kevin Powell

Rachel Andrew

The Net Ninja

Unleashed Design

Web Dev Simplified

The Morpheus Tutorials

Cod Mark

LearnWebCode

Text

Mozilla

CSS-Tricks Text

vscode

Collapsed Margins

Float left

Flexbox kein Wraparound?

Flexbox Menu-Punkte mit justify-content: flex-end

Flexbox align-items