Blogs
Blogs
ESP32 AM312 motion sensor automation
DIY 5 minutes : Connect esp32 to the motion sensor am312 and create an automation. In the last article, we’ve seen how to turn on/off the smart light depending on the presence of your smartwatch. In this article, we will see how to turn on/off the light using the PIR motion sensor AM312. Requirements Before starting the tutorial, you should have these materials. Aliexpress: ESP32-DevKit board: Buy it here AM312 PIR Motion sensor: Buy it here Tuya wifi bulb: Buy it here Wiring the components AM312 has 3 pins: 5v, GND and DATA.
DIY 5$: deploy Wordpress + free SSL with letsencrypt and haproxy
If you are starting your new business or want to have your own blog, hosting your website is something are looking for. But you are asking yourself: “What is a cheap and good way to host my website?”. Well, I have asked myself the same question and I got the answer. I had already an Orangepi ( Orangepi3 LTS: Buy it here ), so I have decided to use it and deploy my website on it.
How to turn off the light automatically when you go out using esp32
Everytime you go out and you forget to turn off the light ! Don’t worry, you are not alone in this situation. We are all LAZY. In this article, we will make it simple and easy to make some economy on your electric bill, but we will also contribute to save the planet. Requirements Before starting the tutorial, you should have these materials. ESP32-DevKit board: Buy it here Tuya wifi bulb: Buy it here Xiaomi MiBand: Buy it here Finding the Mi band MAC adress if you know already your band bluetooth MAC adress, you can skip this part.
ESP32 cam tutorial: Setup a 5$ live streaming camera for your house with esphome
Yes you can monitor your house with live streaming for only 5$. How? In this article, I will show you my test with esp32 camera. In addition, you will see how to configure it using esphome. Finally, I will show you how to connect esp32 cam to home assistant. Requirements Before starting the tutorial, you should have these materials. Aliexpress: ESP32-Cam: Buy it here Jump wires FDTI: Buy it here If you find any problem during this tutorial: Please leave a commment and I will reply very soon!
HAProxy LetsEncrypt Docker Tutorial: Create and Renew HTTPs Certificates for free
If you are looking to secure your website/API for free and found yourself on this page, that means you are on the good path :) Securing pages are required for security reasons, but also improve your ranking on search engines and can impact your social visibility. This tutorial will show how to secure a golang API using HAProxy and letsencrypt. What’s LetsEncrypt LetsEncrypt is a free certificate authority launched on 2016.
How to connect ESP32 to home assistant in 5 minutes
How to connect ESP32 configured with ESPhome to home assistant. In the last article, we’ve seen how to configure an ESP32 chip with ESPhome and how to connect it to Xiomi Mijia thermometer. Now, we will discover how to have a good graphical interface to monitor the temperature of the room. What is home assistant? Home assistant is an open source software that let you monitor IoT devices in your home.
Esphome Tutorial: for 4$ monitor your home temperature with esp32 and xiaomi mijia
We live in a world where everything is connected. One day, I wanted to know the temperature of my house when I’m outside to check if the heating regulator is working or not. Already having a bluetooth Xiaomi Mijia lywsd03mmc thermometer, I was looking for something cheap and tiny to do connect to the thermometer and do the job. I did some research and found a chip called ESP32. This chip has integrated bluetooth and WIFI.
Align div to the bottom of the page in 3 steps
Aligning an element at the bottom of the page is a very common issue in web development and css. You will find the best practices for aligning the div at the bottom of the page. Step 1 : Setting the parent position to relative. If you want to align a div at the bottom of a parent div, the parent should have a position : relative. <style> .parent { position: relative; /* Set parent position to relative */ } </style> <div class="parent"> <div class="bottom"></div> </div> Step 2 : Setting the div position to absolute.
Srcset Tutorial : Responsive Image HTML
Responsive images are images that adapt to the width of screen to fit it perfectly and to improve the performance of the site. If you like this post feel free to share it with your colleagues. Why reponsive images? I’m pretty sure that, until now, all the images you have inserted in your websites looks like this: <img src="imageURL" width="360px" height="auto" max-width="100vw" /> Let’s say the image has 1024px width : 768px height.
How to create a sliding menu bar
In this tutorial, I will show you how to create a sliding left panel easily using css and javascript only. <div class="container"> <div class="slider open">Left Panel</div> <button class="toggle-button" onclick="toggleSlider()">< Close</button> </div> <script> function toggleSlider () { var slider = document.querySelector('.slider') var buttonSlider = document.querySelector('.toggle-button') if (!slider.classList.contains('open')){ slider.classList.add('open') buttonSlider.innerHTML = '< Close' } else { slider.classList.remove('open') buttonSlider.innerHTML = '> Open' } } </script> <style> .container{ position: relative; width: 400px; height: 400px; background: #145677; } .