DEV Community: DhiraNegi

Svelte + Webpack + Sass

DhiraNegi — Fri, 25 Feb 2022 07:58:36 +0000

Solving this particular solution took me quite some more time than expected. So, I thought of sharing it here.

Starters

npx degit sveltejs/template-webpack svelte-app (for svelte installation with webpack)
cd svelte-app
npm install
npm run dev

After running npm run dev, Svelte will compile and build your application. It will start a local server at localhost:8080.

Main Course

To begin, you'll need to install sass-loader

npm install sass-loader sass webpack --save-dev

Now, if you get an error regarding 'style-loader' . Run the below command to install style-loader

npm install style-loader --save

Further, you have a starter pack of svelte with webpack and your folder structure have default files and folders.

If you wish to explore more about the details of the files.
Check it out here

You will have webpack.config.js instead of rollup.config.js

Make a few changes to webpack.config.js

Refer the image:

For now, I have renamed my global css file as global.scss and made some changes in the code.

Also, change the import statement in main.js file.

Dessert

You can now see the changes in your localhost with the scss we wrote in global.scss.

If you want to see Sass with rollup, you can find it here

Do have a look at this repo https://github.com/markoboy/svelte-webpack-babel-scss#get-started (An extension of the webpack template)

HAPPY LEARNING 😄

ESP with Google Assistant

DhiraNegi — Sun, 02 Aug 2020 19:00:43 +0000

Google Assistant is amazing. Isn't it?
I tried to control my esp with google assistant. Here's how I did it.

Setting up Adafruit IO

Go to https://io.adafruit.com/ and sign up.
Go to Feeds and create a new feed. Feeds hold data that devices push to Adafruit IO.

Select some name and write some description.

Setup a new dashboard.

Select a name and some description.

Click on the created dashboard and add a new block (I have taken a toggle block).

Select feed you would like to add and add block settings. For now I am adding a button to control the builtin led of nodemcu.

Setting up ESP

Install Adafruit MQTT library. Sketch>Include library>Manage libraries and search for adafruit mqtt

Goto File>Examples>Adafruit MQTT Library>mqtt_esp8266
Update SSID/password and Adafruit IO user name and user key.(You will find your Adafruit IO username and key from your dashboard)

Replace feed name from onoff to espControl
You need to write the code for the actions you want to perform. Here is a piece of code for controlling builtin led of nodemcu.

Get the complete code : https://github.com/DhiraNegi/esp-with-google-assistant

Google Assistant Integration

Just enable this IFTTT applet and you are ready to go.

Try some more stuff as there is always more to learn.

HAPPY LEARNING 😄

Server Optimization

DhiraNegi — Fri, 31 Jul 2020 08:35:29 +0000

For better performance of the webservers, server optimization is done.
Checkout the previous post for adding web contents to arduino sketch https://dev.to/dhiranegi/web-contents-in-arduino-sketch-3o0c for a webserver running in esp8266.

Simple minification techniques can be used for removal of tabs and whitespaces. Many online tools are available for that. I use https://htmlcompressor.com/compressor/
Compress your html and custom js and css file.(graphics and text files can't be compressed using this)

Using GZIP compression Techinque

Download 7-zip https://www.7-zip.org/download.html .

It's good to make a GZIP folder to keep all your zipped versions of files. To minified versions of files, apply gzip compression.
(7-Zip>add to archive).

For adding GZIPPED files to arduino sketch, replaces C String with HEX values(convert the files to HEX values with any online tool like http://tomeko.net/).

Server has to inform clients that the data being sent is in GZIP format, that is done with content-encoding header by using server.sendHeader() function. Sending "content-encoding" "gzip" header for all server files. Here is one handler function and should be done for all the handler function in the code.

You can verify Content compression and server response time reduction with wireshark.
It is possible to further speed up server response time and reduce bandwidth usage by using cache control or expires header.

ESP Arduino core has some flash memory reserved for file system
called SPI Flash file system. You can choose from Tools>Flash Size

Flash Layout:

Follow the installation process from https://github.com/esp8266/arduino-esp8266fs-plugin

Make a folder "data" inside arduino sketch folder and place all GZIPPED files inside that. Do Sketch Data Upload.
You can remove arrays and handler functions from arduino sketch.

Reading files with file system library

You can find an examples here :
File>Examples>ESP8266WebServer>FSBrowser and study it.

Include FS.h library in your arduino code and initialize it by calling begin function in setup(SPIFFS.begin();)
Call handleFileRead() inside server onNotFound(). You can also send expires header before stream file function is called.

Get the code https://github.com/DhiraNegi/server-optimization

The method is same for mikroC TCP/IP libaray. Add HTTP header in simple uncompressed form on Start of Gzipped array, then use

Net_Ethernet_Intern_putByteTCP()

for sending only single array that contains both HTTP header and Gzipped data.
Use exactly same technique for STM32 or any other ARM chip with Lwip TCP/IP stack.

HAPPY LEARNING 😄

Web contents in arduino sketch

DhiraNegi — Thu, 23 Jul 2020 12:17:53 +0000

Prerequisites

Basics of arduino.
Installed IDE with esp8266 libraries.

Introduction
Taking a simple web server example here. I am editing "HelloServer" program you can find in "File>Examples>Esp8266WebServer>HelloServer".

Whenever server root is requested, this web server sends message, i.e "Hello from ESP8266"

Adding HTML and CSS

Now, try to put some html to arduino sketch. To achieve that we need to convert html to C string format.(Use any online tool or software). I am using https://tomeko.net .

Declare a const char array to store the string.

Using "PROGMEM" keyword to put this array in program memory, because micro controllers usually have small amount of data memory and putting all static web pages in data memory is just wastage of resources.

We can send index page from esp with the type "text/html".
Replace "server.send" by "server.send_P" which will sends webpage from program memory instead of data memory.

Do the same for adding css.
For handling "style.css" request, we need to create a function let's say handleCss.

ESP has to call this function(handleCss) whenever "style.css" is requested by client.

Handling Graphic Files

Let's take a simple example. I took this one from w3 schools where the bulb changes its state when clicked.
So, for inserting images in the arduino code we need to convert those image to HEX values.

Now, write functions to handle these graphic files.

There may be many null characters in the image data and server.send() function may transfer only few bytes if we don't specify the file size.

Whenever bulbon or bulboff image request is received, these funcions should be called.

Handling JS

Do the same process of conversion for js files too.
I have two js file i.e, jquery.min.js and main.js.
main.js contains a function which requests server to change digital output status, depending on HIGH or LOW response from ESP server. Depending on that response, it will change the bulb state.
Connect relay or any other device with pin D4.

Instructing ESP to call handler functions whenever respective request is received from client.

Handling Multiple Files

Try running the server with multiple files following the steps mentioned above and stay connected for compression techniques for optimization .

Get the code here
https://github.com/DhiraNegi/web-contents-in-arduino-sketch

HAPPY LEARNING 😄

Logon Scripting with Powershell

DhiraNegi — Wed, 22 Jul 2020 09:48:24 +0000

Hi,

Trying out some solution for logging to a website with a powershell script and downloads the contents in a file to the specified location.

Just put the url of the website login page and the id's which can be obtained by the developer tools.

Edit valid username and password in the script.
Your file will be downloaded at the specified location which is D:\powershell here.

You can get the script here.

https://github.com/DhiraNegi/powershell

HAPPY LEARNING 😄

JavaScript Console Object

DhiraNegi — Mon, 20 Jul 2020 10:22:27 +0000

I was learning something more about the console object we always use in js.
So, here are some more functions of the console object I wanted to share which can used for debugging.

Starting with it, there is the console.log() which we frequently use. Here, I am making an ajax call to get the response from an api.

You can view the response in console.

console.clear() is used to clear the console.

console.count() or console.count(label) is used to count number of times an event has occurred (like exception occurrence or function called).

console.assert(Assertion,Error message) is used to test whether an expression is true or not.

console.dir() is used to represent object in javascript object notation.

console.dirXml() is used for XML representation. {console.log() also can be used}

console.error() shows errors and can trace the error in error style.

Group functions are mainly used for making a group for other console functions with a title to create a block for debugging more clearly.
console.group(), console.groupCollapsed() and console.groupEnd()

console.info() displays information of the message.It shows an info icon before the message.

console.table() displays data in console as table.

console.time() and console.timeEnd() tracks the time elapsed for any operation.

console.trace() is used to display a stack from the point where the method was called and understand and diagnose the problem that occurs in the code.

console.warn() is used to warn the users.

Of course, there is always more to learn.

Happy learning.😄