Forem: pixman92

Changing CSS By Device Screen Size - Javascript

pixman92 — Fri, 02 Apr 2021 21:28:46 +0000

Wrote a simple JS file that pre-defines Screen Media sizes (for mobile, for tablet and beyhond) by just the change of a paramater.

https://gist.github.com/pixman92/961887a7ab28877d1529d43616a18899

Breakdown:
CSSChange(query, property, newValue) - changes a CSS element
changingBasedOnScreenSize(dynamicVar, classOfDevice, elem, attribute, newValue)

changingBasedOnScreenSize() _ parameters defined
dynamicVar - makes a Dynamic Variable
classOfDevice - grabs a preset value and matches that to logic
elem - querySelector a DOM element
attribute - what CSS element to change
newValue - what attribute of the CSS to change

A Localhost Tunneling - CLI

pixman92 — Thu, 01 Apr 2021 04:03:07 +0000

I have spent the better part of the last 2 days trying, like a wild Google search-er, to get a development environment that pushes localhost to the network & internet. That will update and allow for rapid development.

Here's my findings!

To lay it simply - I went with Python.

===
1st Module - LiveReload
https://pypi.org/project/livereload/
This module allows for a localhost environment, one that refreshes after each Save.

This CLI is:
livereload -p 80

===
2nd Module - pyngrok
https://alexdlaird.medium.com/pyngrok-a-python-wrapper-for-ngrok-ceb2f25229fd
This module is a ngrok wrapper. Allowing for quick pushing of a localhost session, mentioned above.

This CLI is:
ngrok http 80

===
Running
To get up and going, run the LiveReload command, then the pyngrok command. (Within the directory of your project)

That's pretty much it!

For a bonus tip:
I use 'Pushbullet' (a Chrome extension) - to send my unique URLs to my phone or tablet!

Adding a New Feature

pixman92 — Mon, 21 Jan 2019 04:05:35 +0000

(I'm new to this community, but I thought I'd dive right in.)

I love to code but when you have a project that spans many functions across multiple files, I have a hard time isolating what I need to code up a new feature.

The way I do it now is to make a new file, determine the input I'm getting and the output I want.

Once I have the code that I want I cut/paste the function back into into my codebase.

I want to build something that will automate this process. Maybe an extension for a code editor??

I'm not sure where to even start. So I'm asking for help, or even just suggestions.

Thanks!