HTML Archives - Timo Ernst https://www.timo-ernst.net/blog/tag/html/ 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 HTML Archives - Timo Ernst https://www.timo-ernst.net/blog/tag/html/ 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 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 Build a Calendar in 5 mins with HTML and Framework7 | Video Tutorial https://www.timo-ernst.net/blog/2018/12/05/build-a-calendar-in-5-mins-with-html-and-framework7-video-tutorial/ https://www.timo-ernst.net/blog/2018/12/05/build-a-calendar-in-5-mins-with-html-and-framework7-video-tutorial/#respond Wed, 05 Dec 2018 22:32:38 +0000 https://www.timo-ernst.net/?p=4143 In this quick video tutorial I will explain how to use the calendar component in Framework7. Template download: framework7-simplest

The post Build a Calendar in 5 mins with HTML and Framework7 | Video Tutorial appeared first on Timo Ernst.

Related posts:

  1. Build the Snake Game for Browsers with HTML and JavaScript Tutorial
  2. hcal: An iOS inspired HTML-based calendar
  3. Tutorial: Auto-Complete Search with React, Node and Framework7
]]> https://www.timo-ernst.net/blog/2018/12/05/build-a-calendar-in-5-mins-with-html-and-framework7-video-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 Make Your Website Look Perfect on iPhoneX https://www.timo-ernst.net/blog/2018/05/22/make-your-website-look-perfect-on-iphonex/ https://www.timo-ernst.net/blog/2018/05/22/make-your-website-look-perfect-on-iphonex/#respond Tue, 22 May 2018 06:53:58 +0000 https://www.timo-ernst.net/?p=4096 In this video tutorial I will explain how to make your website/-app look good even with the iPhoneX’s notch in the way. On the next episode we’ll go a step further dealing with the same issue on PhoneGap/Cordova apps with Framework7. Enjoy! Ps: You’ll find the source code from the video on Gist. iPhoneX Anti-Notch […]

The post Make Your Website Look Perfect on iPhoneX appeared first on Timo Ernst.

Related posts:

  1. Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap
  2. How to use Framework7 V2 Router Tutorial
  3. Port a Vue.js webapp to PhoneGap tutorial
]]> https://www.timo-ernst.net/blog/2018/05/22/make-your-website-look-perfect-on-iphonex/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 Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap https://www.timo-ernst.net/blog/2017/01/09/tutorial-create-a-twitter-app-with-vuejs-framework7-phonegap-and-webpack-episode-01/ https://www.timo-ernst.net/blog/2017/01/09/tutorial-create-a-twitter-app-with-vuejs-framework7-phonegap-and-webpack-episode-01/#comments Mon, 09 Jan 2017 13:14:03 +0000 https://www.timo-ernst.net/?p=3587 In my last post I showed you how to kick-off a new project with Framework7, VueJS and Webpack. So, I thought in the next video I could show you a real-world example on how to create an app based on these technologies. In this screencast we will create a Twitter client for iOS and Android […]

The post Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap appeared first on Timo Ernst.

Related posts:

  1. How to post tweets via Twitter API with Vue.js and Framework7
  2. How to log in to Twitter API using oauth
  3. Port a Vue.js webapp to PhoneGap tutorial
]]> https://www.timo-ernst.net/blog/2017/01/09/tutorial-create-a-twitter-app-with-vuejs-framework7-phonegap-and-webpack-episode-01/feed/ 13 Why I do not use Ajax Pages in Framework7 https://www.timo-ernst.net/blog/2016/11/07/not-use-ajax-pages-framework7/ https://www.timo-ernst.net/blog/2016/11/07/not-use-ajax-pages-framework7/#respond Mon, 07 Nov 2016 19:54:38 +0000 http://www.timo-ernst.net/?p=3552 In this new screencast I explain why I don’t like using Ajax Pages in Framework7. Also, I explain how I split pages into multiple files without Ajax Pages. You can download the code from the video on Github here.

The post Why I do not use Ajax Pages in Framework7 appeared first on Timo Ernst.

Related posts:

  1. Video Screencast: How to use Framework7 with Angular 1.x
  2. Should I use Angular’s ngRouter in Framework7?
  3. How to use ajax pages with Angular 1.x in Framework7
]]> https://www.timo-ernst.net/blog/2016/11/07/not-use-ajax-pages-framework7/feed/ 0 How we became the 2nd fastest online retail shop in Germany https://www.timo-ernst.net/blog/2016/11/04/how-we-became-the-2nd-fastest-online-retail-shop-in-germany/ https://www.timo-ernst.net/blog/2016/11/04/how-we-became-the-2nd-fastest-online-retail-shop-in-germany/#respond Fri, 04 Nov 2016 12:17:53 +0000 http://www.timo-ernst.net/?p=3500 I’ve been working for my client HSE24 for quite some time now on optimizing their website’s load performance with their team. In this article I’d like to share how and what we optimized to become the 2nd fastest retail online shop in Germany according to Dynatrace Performance Benchmark. Actions to improve website performance Disclaimer: This […]

The post How we became the 2nd fastest online retail shop in Germany appeared first on Timo Ernst.

Related posts:

  1. ZK user group conference in Mannheim, Germany
  2. How to lazy load images in Framework7 with AngularJS
  3. Simple iPhone5 detection with JavaScript
]]> https://www.timo-ernst.net/blog/2016/11/04/how-we-became-the-2nd-fastest-online-retail-shop-in-germany/feed/ 0 How to add dots every 3 digits in currency values with JavaScript https://www.timo-ernst.net/blog/2015/07/10/how-to-add-dots-every-3-digits-in-currency-values-with-javascript/ https://www.timo-ernst.net/blog/2015/07/10/how-to-add-dots-every-3-digits-in-currency-values-with-javascript/#comments Fri, 10 Jul 2015 13:30:16 +0000 http://timo-ernst.net/?p=3271 If you’re European like me, you’re probably used to this notation: € 366.432 instead of 366,432 or 366432. In order to get this done in JavaScript you want to do the following: // Number var money = 366432; // Convert to String and add dots every 3 digits var moneyDots = money.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1."); // Set […]

The post How to add dots every 3 digits in currency values with JavaScript appeared first on Timo Ernst.

Related posts:

  1. Object inspector for JavaScript
  2. Simple iPhone5 detection with JavaScript
  3. Instant Flash player engine in JavaScript?
]]> https://www.timo-ernst.net/blog/2015/07/10/how-to-add-dots-every-3-digits-in-currency-values-with-javascript/feed/ 2