Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
awesomeolion
Nov 5, 2007

"Hi, I'm awesomeolion."

I started working on an Electron app, building on electron-boilerplate. After neatly organizing and separating a few js files by their functionality I've realized that each individual js file gets wrapped with

code:
(function () {'use strict';

}());
So I can't access any functions or global variables between files. I'm thinking I could concatenate all my source files into one file in my gulp task but I don't want one large js file in my app that will be annoying/unwieldy to debug in the future. Any advice would be appreciated. First electron project and I am still a noob so please go easy.

awesomeolion fucked around with this message at 00:37 on Sep 29, 2016

Adbot
ADBOT LOVES YOU

Met48
Mar 15, 2009

awesomeolion posted:

I started working on an Electron app, building on electron-boilerplate. After neatly organizing and separating a few js files by their functionality I've realized that each individual js file gets wrapped with

code:
(function () {'use strict';

}());
So I can't access any functions or global variables between files. I'm thinking I could concatenate all my source files into one file in my gulp task but I don't want one large js file in my app that will be annoying/unwieldy to debug in the future. Any advice would be appreciated. First electron project and I am still a noob so please go easy.

Haven't worked with electron, but judging by that readme it intends for you to write modules. With ES6 module syntax in the src directory and CommonJS module syntax in the app directory.

Edit: the boilerplate has a gulp task called bundle which will handle concatenation for you and generate a sourcemap so you can still debug it. The main entry files for that are src/app.js and src/background.js, so those two files will have to import anything you want to use from the src directory.

Met48 fucked around with this message at 01:37 on Sep 29, 2016

awesomeolion
Nov 5, 2007

"Hi, I'm awesomeolion."

Met48 posted:

Haven't worked with electron, but judging by that readme it intends for you to write modules. With ES6 module syntax in the src directory and CommonJS module syntax in the app directory.

Thanks a lot Met48! I will give this a try :)

Re. your edit, I got 'er tooled up and jewelled up with your help. First promise is all my various scripts for functionality and then background and app to round it off. Thanks again!!

code:
gulp.task('bundle', function () {
    return Promise.all([gulp.src('src/scripts/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(concat('all.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('app')),
        bundle(srcDir.path('background.js'), destDir.path('background.js')),
        bundle(srcDir.path('app.js'), destDir.path('app.js'))
        ]);
});

awesomeolion fucked around with this message at 20:56 on Sep 29, 2016

BobFossil
Jun 17, 2005

Note to self: I hate whites.

Kekekela posted:

You want getDate (which returns the day part of the date) not getDay, which returns 1 for Monday, 2 for Tuesday, 3 for Wednesday etc

got it, thanks for the hint. https://jsfiddle.net/2jktgxjo/1/

huhu
Feb 24, 2006
I'm building a website with a django backend with basic html/js running the front end.

For some reason, two of my plugins randomly stopped working and I cannot figure out why. There are no errors displayed in the console. The first is Smooth Scroll which I have setup for the first 3 links on the page.

HTML:
code:
		<div class="section-content">
			<ul>
				<li><a data-scroll href="#filter-page">Engineering & Design Projects</a></li>
				<li><a data-scroll href="#about-page">Travis Himself</a></li>
				<li><a data-scroll href="#contact-page">Getting in Touch</a></li>
			</ul>		
		</div>
Footer:
code:
<script src="{% static 'js/smooth-scroll.min.js' %}"></script>
<script>
	smoothScroll.init({
	    speed: 1000, // Integer. How fast to complete the scroll in milliseconds
	    selector: '[data-scroll]', 
	});
</script>
The second issue is I have a plugin that displays a second nav when the page scrolls past the "home" page which is triggered by scrolling past the #filter-page. It won't trigger anymore.
code:
<script>
	//Function for displaying nav menu after home page
	(function($) {          
	    $(document).ready(function(){                    
	        $(window).scroll(function(){
	        	var home = $('#filter-page') .offset().top;                        
	            if ($(this).scrollTop() > home) {
	                $('.fixed-nav').fadeIn(250);
	            } else {
	                $('.fixed-nav').fadeOut(250);
	            }
	        });
	    });
	})(jQuery);
</script>

huhu fucked around with this message at 20:19 on Sep 29, 2016

Master_Odin
Apr 15, 2010

My spear never misses its mark...

ladies
Remove the height: 100% property to your body tag and it'll fix both issues, but it'll break your background.

Video Nasty
Jun 17, 2003

I'm writing a tampermonkey script as a utility that scrapes the text from a scrolling AJAX-loaded log (PaperTrail, for those familiar), and creates a URI-encoded string from a regex match and writes it to the console. I'll admit that the scripting is very amateur at this point, but it works for its purposes to create hyperlinks to an external source for additional investigating. I'm including jQuery to make writing it easier, as the overhead doesn't seem to affect responsiveness in the page.

After an indeterminate amount of scrolling, it suddenly fails to keep writing to the console on new matches. Is this due to a browser\memory limitation? Are there design patterns I should be familiar with for this situation? I'm pretty sure I can re-factor to vanilla JS now that the proof-of-concept is working, but I'd like to make sure it's more reliable.

e:
JavaScript code:

(function() {
    'use strict';
  jQuery(document).ready(function(){
		  // build regular expression to track  -XXX-  IDs.
        var orig = jQuery("li span.message"), re = new RegExp(/\d{3}\/\d{3,5}\/[\d\D]{15,18}\/[\d\D]{30,32}/, "gi"), arr=[],
			str = orig.text().match(re);
	  console.info(" -XXX-  Plugin initialized!");

  // function to acquire  -XXX-  ID and morph it to URI in console log.
    function getIDs() {
	    jQuery.each(str, function(replacement){
  // get distinct items for the array.
	     str = jQuery.unique(str);
          for(var i=0; i < str.length; i++) {
		    var URI = encodeURIComponent(str[i]);
            replacement = str[i].replace(/\d{3}\/\d{3,5}\/[\d\D]{15,18}\/[\d\D]{30,32}/, 'http://www.APICALL.scrub&session=/'+ URI);
			  arr.push(replacement);
			  arr = jQuery.unique(arr);
			  if (jQuery.inArray(replacement, arr) ){
				 // -- DO NOTHING
                 // console.clear();
			  } else {
				  var result = JSON.stringify(arr.sort(), null, 4);
                 // console.log(" -XXX-  Results("+ arr.length +"): " + result);
                console.table( result ); // log all unique instances of URI captured.
			   }
          }
		// Exit FOR loop

	    });
	// Exit FOREACH loop 

	}
	  var last_known_scroll_position = 0;
      var ticking = false;
// evaluate window scrolling and re-run function if unique match is found.
    function doSomething(scroll_pos) {

     //  scroll position triggers event firing
	   if( str !== null ){
        console.group(" -XXX-  IDs");
		   getIDs();
	   } else{
           console.error("Could not match str: "+ str);
         }
	    console.groupEnd();
    }

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
  }
  ticking = true;
});

  });
})();

Video Nasty fucked around with this message at 17:38 on Oct 3, 2016

an skeleton
Apr 23, 2012

scowls @ u
Hi, does anyone have experience with or suggestions for measuring stuff like load times and other user-related metrics in the browser (to send back to the server for analysis)? I'm interested in any libraries, platforms, roll-your-own techniques or whatever you've got.

Anony Mouse
Jan 30, 2005

A name means nothing on the battlefield. After a week, no one has a name.
Lipstick Apathy
I'm pretty sure Google Analytics measures load times, along with a thousand other things.

Analytic Engine
May 18, 2009

not the analytical engine

an skeleton posted:

Hi, does anyone have experience with or suggestions for measuring stuff like load times and other user-related metrics in the browser (to send back to the server for analysis)? I'm interested in any libraries, platforms, roll-your-own techniques or whatever you've got.

window.performance

Honest Thief
Jan 11, 2009
Am I swimming against the current by avoiding transpilers like Babel for development, or something else will come up down the road?
I've been trying to focus on the basics to better learn Javascript but just seems every boilerplate or react guide has a poo poo ton of dependencies attached to it.

necrotic
Aug 2, 2005
I owe my brother big time for this!
You can get buy writing a decent amount of modern JS without transpiling. One of the biggest things you'll lack is a proper module system, though.

It's unlikely babel will get replaced, at least anytime soon. Hopefully they won't completely rewrite the core again.l and break everything. Lol who an I kidding of course they will.

BobFossil
Jun 17, 2005

Note to self: I hate whites.
Can anyone point me in the direction of a tutorial or something.

How can I save a text field from a form to a cookie and then have the text field value populate a field a couple of page loads later?

BobFossil fucked around with this message at 13:53 on Oct 6, 2016

Ranzear
Jul 25, 2013

BobFossil posted:

Can anyone point me in the direction of a tutorial or something.

How can I save a text field from a form to a cookie and then have the text field value populate a field that a couple of page loads later?

You could drop it in window.sessionStorage. .localStorage if you want it to persist across sessions.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

BobFossil posted:

Can anyone point me in the direction of a tutorial or something.

How can I save a text field from a form to a cookie and then have the text field value populate a field a couple of page loads later?

Do you want/need the value to be passed to the server? Because that is what will happen with a cookie.

If you just want to save the value in JS and then reuse it on a later page, use sessionStorage.setItem('key', 'value'); or localStorage.setItem('key', 'value'); (and then .getItem('key'), to get the value back later)

sessionStorage will clear when the session closes, localStorage will persist browser restarts.

Also, the storage is restricted by same origin policy. So you can't store a value on http://onesubdomain.example.com/firstpage.html and then retrive it on http://anothersubdomain.example.com/laterpage.html

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

Wheany posted:

Do you want/need the value to be passed to the server? Because that is what will happen with a cookie.

If you just want to save the value in JS and then reuse it on a later page, use sessionStorage.setItem('key', 'value'); or localStorage.setItem('key', 'value'); (and then .getItem('key'), to get the value back later)

sessionStorage will clear when the session closes, localStorage will persist browser restarts.

Also, the storage is restricted by same origin policy. So you can't store a value on http://onesubdomain.example.com/firstpage.html and then retrive it on http://anothersubdomain.example.com/laterpage.html

LocalStorage is great for these kinds of things. Also, you can store more than strings by first serializing your object then storing that. You can potentially cache 100s of mb if you want to (don't do this, you'll surely upset someone).

MrMoo
Sep 14, 2000

Analytic Engine posted:

window.performance

Things are getting better too: https://www.w3.org/TR/navigation-timing-2/

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Honest Thief posted:

Am I swimming against the current by avoiding transpilers like Babel for development, or something else will come up down the road?
I've been trying to focus on the basics to better learn Javascript but just seems every boilerplate or react guide has a poo poo ton of dependencies attached to it.

What Babel does is let you learn basic javascript that isn't yet supported by all browsers but will be in the future. So, if you want to learn JS, Babel is a good way to do it. If you want to only learn the parts of JS that are implemented in the browsers of today, then there's no need for Babel.

necrotic
Aug 2, 2005
I owe my brother big time for this!

Skandranon posted:

You can potentially cache 100s of mb if you want to (don't do this, you'll surely upset someone).

The spec defines a (suggested) "arbitrary limit of 5 megabytes per origin", and most browsers default to around this.

https://html.spec.whatwg.org/multipage/webstorage.html#disk-space-2

I think Opera and FF let users change this limit, but Chrome doesn't.

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

necrotic posted:

The spec defines a (suggested) "arbitrary limit of 5 megabytes per origin", and most browsers default to around this.

https://html.spec.whatwg.org/multipage/webstorage.html#disk-space-2

I think Opera and FF let users change this limit, but Chrome doesn't.

I did not know this... and this is actually very consequential. Thanks!

necrotic
Aug 2, 2005
I owe my brother big time for this!

Skandranon posted:

I did not know this... and this is actually very consequential. Thanks!

Imagine the poo poo show if there was no limit. Webdevs endlessly caching dumb data and never purging it, oh poo poo its using 5gb of my HDD for one website!

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
hello, I write vanilla JavaScript because I hate the idea of running a compiled instead of pressing F5 in my browser. I really should get around to babel or typescript but, it's just, ugh...

I tried webpack and while it was good for the first five minutes, anything after that just started sucking because of the plugins/extractors and nothing made any sense. I don't want to set up a dev environment on my windows machine that sounds like a horrible universe...

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe

necrotic posted:

Imagine the poo poo show if there was no limit. Webdevs endlessly caching dumb data and never purging it, oh poo poo its using 5gb of my HDD for one website!

no worries though, on chrome you can use the deprecated requestFileSystem API to store unlimited amounts of data on the user's computer

lunar detritus
May 6, 2009


Suspicious Dish posted:

hello, I write vanilla JavaScript because I hate the idea of running a compiled instead of pressing F5 in my browser. I really should get around to babel or typescript but, it's just, ugh...

I tried webpack and while it was good for the first five minutes, anything after that just started sucking because of the plugins/extractors and nothing made any sense. I don't want to set up a dev environment on my windows machine that sounds like a horrible universe...

It's already annoying on macs which is the primary target for most of those tools, I don't even want to think what a shitshow it must be to set them up on a windows machine.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
I dunno, all it took for me to get my dev environment working on windows is using the cross-env and npm-run-all npm packages instead of the bash commands for running tasks in parallel and setting environment variables. Webpack itself is platform-agnostic, if you can run node you can run webpack.

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

gmq posted:

It's already annoying on macs which is the primary target for most of those tools, I don't even want to think what a shitshow it must be to set them up on a windows machine.

Pretty much all these tools run on Node, and Node works fine in Windows. I do all my TypeScript development on Windows with VS Code, never any issues setting up whatever Node tools I've wanted.

lunar detritus
May 6, 2009


Skandranon posted:

Pretty much all these tools run on Node, and Node works fine in Windows. I do all my TypeScript development on Windows with VS Code, never any issues setting up whatever Node tools I've wanted.

That's great. I remember a couple of years ago npm was unusable due to the path length limit that Windows has, I'm guessing npm 3 fixed it thanks to its flat dependency tree?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
It's more or less, they work, but don't consider yourself first class if you're on windows because the majority won't be dogfooding the windows dev experience. If you have a windows specific issue, you may have much less documentation with which to sort out your problem.

Kekekela
Oct 28, 2004
I use Powershell/Sublime for npm projects on Windows. I used to use an Ubuntu vm or try to do more stuff on my mac instead but no longer feel the need. The only place I've run into problems is weird file locking stuff when I used to run multiple Powershell windows with webpack-dev-server, but restricting myself to a single console window fixed that. I guess that does kind of suck, but the server is WebAPI so having Visual Studio running that in the same environment is pretty convenient.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
I cannot work with virtual machines because they hijack my alt-tab <:mad:>

Xik
Mar 10, 2011

Dinosaur Gum
I haven't used "seamless mode" of virtual box for years but I'm pretty sure that's what it's for.

Strong Sauce
Jul 2, 2003

You know I am not really your father.





did windows 10 already get bash or are they still working on it? seems like that will fix a lot of the non-specific windows/macosx issues of an npm module.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Strong Sauce posted:

did windows 10 already get bash or are they still working on it? seems like that will fix a lot of the non-specific windows/macosx issues of an npm module.

Windows 10 gets bashed all the time - somewhat unfairly IMO

It's one of the optional OS features you have to explicitly install like IIS, as of the anniversary update

IronDoge
Nov 6, 2008

Would you like a package manager on top of your package manager? Then Yarn is just the thing you need! :hurr:

I get that npm could use some extra features, it just seems real dumb adding an entirely new layer to manage your packages.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



IronDoge posted:

Would you like a package manager on top of your package manager? Then Yarn is just the thing you need! :hurr:

I get that npm could use some extra features, it just seems real dumb adding an entirely new layer to manage your packages.

They say it replaces NPM, so I think it's just Facebook trying to clean off the legacy crust of poo poo that, frankly, needs it.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

I don't think it is another layer. Think of it as an alternative client to the npm registry that you can use to replace the npm client.

Kekekela
Oct 28, 2004
I think he means because you use npm by default to install Yarn.

Master_Odin
Apr 15, 2010

My spear never misses its mark...

ladies

IronDoge posted:

Would you like a package manager on top of your package manager? Then Yarn is just the thing you need! :hurr:

I get that npm could use some extra features, it just seems real dumb adding an entirely new layer to manage your packages.
Quote from the article that highlights a really good reason to not use npm:

quote:

However, this file structure can differ from the actual dependency tree as duplicate dependencies are merged together. The npm client installs dependencies into the node_modules directory non-deterministically. This means that based on the order dependencies are installed, the structure of a node_modules directory could be different from one person to another. These differences can cause “works on my machine” bugs that take a long time to hunt down.
If in using a dependency manager you're ending up with different installs across machines, that's just a bad dependency manager, though FB could have probably submitted some patches to do this instead of non-deterministically.

Strong Sauce
Jul 2, 2003

You know I am not really your father.





npm install is not the "default" it's literally just the easiest way if you're already using npm.

tried it out on my company's install time. saved me over a minute doing a full install but almost no saved time for single library installs. the only problem however, was it missed some dependency and i'm a missing library. it's not ready for primetime but i'm pretty excited about it.

Adbot
ADBOT LOVES YOU

Kekekela
Oct 28, 2004

Strong Sauce posted:

npm install is not the "default" it's literally just the easiest way if you're already using npm.

Ok thank you for clarifying. I was just thinking of what you would call the way everyone's going to do it, what's the word for that?

Kekekela fucked around with this message at 03:23 on Oct 12, 2016

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply