JavaScript Archives - Timo Ernst https://www.timo-ernst.net/blog/tag/javascript/ Developer • YouTuber • Blogger Wed, 05 May 2021 18:20:58 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://www.timo-ernst.net/wp-content/uploads/2021/03/cropped-Timo-Ernst-Small-32x32.jpg JavaScript Archives - Timo Ernst https://www.timo-ernst.net/blog/tag/javascript/ 32 32 Parallax Beginner Tutorial: A Cool 3D Effect With HTML, CSS, JavaScript https://www.timo-ernst.net/blog/2021/05/05/parallax-beginner-tutorial-a-cool-3d-effect-with-html-css-javascript/ https://www.timo-ernst.net/blog/2021/05/05/parallax-beginner-tutorial-a-cool-3d-effect-with-html-css-javascript/#respond Wed, 05 May 2021 18:11:17 +0000 https://www.timo-ernst.net/?p=4546 I found this great Photoshop tutorial by Dev Ed which inspired me to create my own implementation of a parallax effect based on his video in order to create more depth to websites and hey – a bit of eye candy never hearts, right? :-) So, here is my implementation below. As you can see […]

The post Parallax Beginner Tutorial: A Cool 3D Effect With HTML, CSS, JavaScript appeared first on Timo Ernst.

Related posts:

  1. Build the Snake Game for Browsers with HTML and JavaScript Tutorial
  2. SwiperJS React Video Tutorial | 2020
  3. Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap
]]> https://www.timo-ernst.net/blog/2021/05/05/parallax-beginner-tutorial-a-cool-3d-effect-with-html-css-javascript/feed/ 0 Prettier Autoformat for TypeScript not Working https://www.timo-ernst.net/blog/2020/10/09/prettier-autoformat-for-typescript-not-working/ https://www.timo-ernst.net/blog/2020/10/09/prettier-autoformat-for-typescript-not-working/#comments Fri, 09 Oct 2020 12:57:58 +0000 https://www.timo-ernst.net/?p=4251 For me Prettier has been doing an awesome job when auto-formatting JavaScript code on save. However, when using TypeScript files (.tsx) it didn’t work. Here is how to fix it: First, press shift + cmd + p (Mac), enter “settings” and choose “Preferences: Open Settings (JSON)”. Then add the following: "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, […]

The post Prettier Autoformat for TypeScript not Working appeared first on Timo Ernst.

Related posts:

  1. Experiment: An iPhone app built with Framework7, TypeScript, and Angular 1.x
  2. Framework7 template with TypeScript and AngularJS
  3. .remove() and .contains() not working on your Java set?
]]> https://www.timo-ernst.net/blog/2020/10/09/prettier-autoformat-for-typescript-not-working/feed/ 3 SwiperJS React Video Tutorial | 2020 https://www.timo-ernst.net/blog/2020/07/12/swiperjs-react-video-tutorial-2020/ https://www.timo-ernst.net/blog/2020/07/12/swiperjs-react-video-tutorial-2020/#comments Sun, 12 Jul 2020 19:42:03 +0000 https://www.timo-ernst.net/?p=4209 After many years of being tied to 3rd party React versions of SwiperJS the official team has now created its own version of SwiperJS for React. In this tutorial I will explain how to use it. Find source code here:https://github.com/valnub/swiper-react-demo Follow me on Twitter:https://www.twitter.com/timo_ernst

The post SwiperJS React Video Tutorial | 2020 appeared first on Timo Ernst.

Related posts:

  1. Arrows in React Swiper Js: How to Customize Prev/Next Button
  2. How to Set Responsive Breakpoints in Swiper React
  3. Tutorial: Auto-Complete Search with React, Node and Framework7
]]> https://www.timo-ernst.net/blog/2020/07/12/swiperjs-react-video-tutorial-2020/feed/ 2 What’s All The Buzz About SvelteJS? https://www.timo-ernst.net/blog/2019/06/25/whats-all-the-buzz-about-sveltejs/ https://www.timo-ernst.net/blog/2019/06/25/whats-all-the-buzz-about-sveltejs/#respond Tue, 25 Jun 2019 05:19:00 +0000 https://www.timo-ernst.net/?p=4171 I noticed a lot of tweets lately regarding SvelteJS, so I thought – why not check it out and see what all the buzz is about? In this video I’ll go through the fundamentals of the framework and also show a simple live coding example using it. What is your take on Svelte? Would you […]

The post What’s All The Buzz About SvelteJS? appeared first on Timo Ernst.

Related posts:

  1. Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap
  2. How to get started with Framework7, VueJS and Webpack
  3. Build the Snake Game for Browsers with HTML and JavaScript Tutorial
]]> https://www.timo-ernst.net/blog/2019/06/25/whats-all-the-buzz-about-sveltejs/feed/ 0 Build the Snake Game for Browsers with HTML and JavaScript Tutorial https://www.timo-ernst.net/blog/2019/01/03/build-the-snake-game-for-browsers-with-html-and-javascript-tutorial/ https://www.timo-ernst.net/blog/2019/01/03/build-the-snake-game-for-browsers-with-html-and-javascript-tutorial/#respond Thu, 03 Jan 2019 10:38:37 +0000 https://www.timo-ernst.net/?p=4148 Happy new year everyone! This tutorial is based on the previous Canvas Particle Animation tutorial and introduces simple gaming mechanics by showing how to create Snake for browsers. Enjoy! :-) Source code: https://github.com/valnub/snake

The post Build the Snake Game for Browsers with HTML and JavaScript Tutorial appeared first on Timo Ernst.

Related posts:

  1. hcal: An iOS inspired HTML-based calendar
  2. Build a Calendar in 5 mins with HTML and Framework7 | Video Tutorial
  3. Are ES6 modules ready for browsers?
]]> https://www.timo-ernst.net/blog/2019/01/03/build-the-snake-game-for-browsers-with-html-and-javascript-tutorial/feed/ 0 Particle animation with HTML5 Canvas and JavaScript Tutorial https://www.timo-ernst.net/blog/2018/11/05/particle-animation-with-html5-canvas-javascript-tutorial/ https://www.timo-ernst.net/blog/2018/11/05/particle-animation-with-html5-canvas-javascript-tutorial/#respond Mon, 05 Nov 2018 18:59:06 +0000 https://www.timo-ernst.net/?p=4130 In this video I’ll show you how to create something like this: Source code available on GitHub: https://github.com/valnub/particle-animation-javascript

The post Particle animation with HTML5 Canvas and JavaScript Tutorial appeared first on Timo Ernst.

Related posts:

  1. Build the Snake Game for Browsers with HTML and JavaScript Tutorial
  2. Create AppleTV UI Animation with AtroposJS | HTML CSS JavaScript Tutorial
  3. Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap
]]> https://www.timo-ernst.net/blog/2018/11/05/particle-animation-with-html5-canvas-javascript-tutorial/feed/ 0 Tutorial: Auto-Complete Search with React, Node and Framework7 https://www.timo-ernst.net/blog/2018/11/02/tutorial-auto-complete-search-with-react-node-and-framework7/ https://www.timo-ernst.net/blog/2018/11/02/tutorial-auto-complete-search-with-react-node-and-framework7/#respond Fri, 02 Nov 2018 22:48:21 +0000 https://www.timo-ernst.net/?p=4126 In this tutorial I will explain how you can easily use Framework7’s autocomplete feature for search input fields using React and web services with Node.js Source code on GitHub: https://github.com/valnub/f7-node-autocomplete-search-demo

The post Tutorial: Auto-Complete Search with React, Node and Framework7 appeared first on Timo Ernst.

Related posts:

  1. Arrows in React Swiper Js: How to Customize Prev/Next Button
  2. SwiperJS React Video Tutorial | 2020
  3. How to use Framework7 V2 Router Tutorial
]]> https://www.timo-ernst.net/blog/2018/11/02/tutorial-auto-complete-search-with-react-node-and-framework7/feed/ 0 How to use Framework7 V2 Router Tutorial https://www.timo-ernst.net/blog/2018/04/11/how-to-use-framework7-v2-router-tutorial/ https://www.timo-ernst.net/blog/2018/04/11/how-to-use-framework7-v2-router-tutorial/#respond Wed, 11 Apr 2018 17:52:40 +0000 https://www.timo-ernst.net/?p=4015 I’ve been getting a lot of requests on how to use the new V2 Router of Framework7, so here are two episodes covering the absolute basics of routing in F7. Have fun, enjoy and let me know if anything is unclear or you want other specific topics covered. Video playlist: Episode 1: Basics Episode 2: […]

The post How to use Framework7 V2 Router Tutorial appeared first on Timo Ernst.

Related posts:

  1. Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap
  2. Tutorial: Auto-Complete Search with React, Node and Framework7
  3. What is Vuex?
]]> https://www.timo-ernst.net/blog/2018/04/11/how-to-use-framework7-v2-router-tutorial/feed/ 0 Find Dead CSS in React using Radium https://www.timo-ernst.net/blog/2018/01/21/find-dead-css-in-react-using-radium/ https://www.timo-ernst.net/blog/2018/01/21/find-dead-css-in-react-using-radium/#respond Sun, 21 Jan 2018 18:04:51 +0000 https://www.timo-ernst.net/?p=3984 When a project grows it often gets harder to find out which css styles are still required and which can be removed. There are post-processors which analyse your bundle and can remove code that it thinks can be deleted, but this is just the same as treating the symptom instead of curing the disease. In […]

The post Find Dead CSS in React using Radium appeared first on Timo Ernst.

Related posts:

  1. Tutorial: Auto-Complete Search with React, Node and Framework7
  2. SwiperJS React Video Tutorial | 2020
  3. Arrows in React Swiper Js: How to Customize Prev/Next Button
]]> https://www.timo-ernst.net/blog/2018/01/21/find-dead-css-in-react-using-radium/feed/ 0 What is Vuex? https://www.timo-ernst.net/blog/2017/08/10/what-is-vuex/ https://www.timo-ernst.net/blog/2017/08/10/what-is-vuex/#respond Thu, 10 Aug 2017 21:39:01 +0000 https://www.timo-ernst.net/?p=3929 This is a new video on my ongoing Vuex series on YouTube explaining the core concepts. I know, I know, I already posted two videos about Vuex before but I felt like I dove a little but to fast into the code and kinda missed to explain the basics about the framework. So, here is […]

The post What is Vuex? appeared first on Timo Ernst.

Related posts:

  1. How to log in to Twitter API using oauth
  2. Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap
  3. Port a Vue.js webapp to PhoneGap tutorial
]]> https://www.timo-ernst.net/blog/2017/08/10/what-is-vuex/feed/ 0