Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

Jimlit: Jun 30, 2005

nevermind.

# ¿ Dec 5, 2013 03:25

Adbot: ADBOT LOVES YOU

# ¿ May 2, 2024 07:25

Jimlit: Jun 30, 2005

Sorry for the double post, but I'm having issues setting something up with Angular's $http features.

So what i'm trying to do is pass form values on the page to a .json document on the server. Not that it needs to be said, but I'm extremely green with angular.

The code I'm working with:

HTML

code:

<body ng-controller="testCtrl">

<form>
<div><input name="name1" ng-model="testdata.0.name" ><span>{{testdata.0.name}} </span><br></div>
<div><input name="name2" ng-model="testdata.1.name" ><span>{{testdata.1.name}} </span><br></div>
<div><input name="name3" ng-model="testdata.2.name" ><span>{{testdata.2.name}} </span><br></div>
<div><input name="name4" ng-model="testdata.3.name" ><span>{{testdata.3.name}} </span><br></div>

<button ng-click="save()" >Submit</button>
<br>
<p>{{msg}}</p>
</form>

JSON

code:

[
		{"name": "bob"},
		{"name": "cindy"},
		{"name": "frank"},
		{"name": "linda"}

]

Controller

code:

var testApp = angular.module('testApp', []);

testApp.controller('testCtrl', function($scope, $http){
	$http.get('/springboard/testing/data.json').success(function(data) {
		$scope.testdata = data;
	});   
	
	$scope.orderProp = 'name';

	$scope.save = function() {
		$http.post('/springboard/testing/data.json', $scope.testdata).then(function(data) {
		$scope.msg = 'Data saved';
    });
	};
	
});

The idea was to take the form values from the html and update the .json document on the server. Right now it is pulling from the document successfully but the ".post" function is not writing the values back to the document. I'm a bit over my head and fairly certain i'm missing a few (or a lot) of vital steps.

What is the issue here?

# ¿ Dec 5, 2013 21:16

Jimlit: Jun 30, 2005

Stoph posted:

Forgive me if this is too elementary, but you need a server-side language like PHP to process your form submission. You can't just post data to a file and expect the file contents to change.

No its not too elementary, it's a huge help. I'm just cutting my teeth on all of this, and that's basically the answer I was looking for.

# ¿ Dec 6, 2013 17:09

Jimlit: Jun 30, 2005

Opulent Ceremony posted:

What other people said is way important but I don't think those bindings are going to link to testdata in your controller since the .json file looks like it will return an array. ng-model="testdata.0.name" should be ng-model="testdata[0].name", etc.

They were working fine but the php code I wrote returned it as a one line IE:

code:

[{"name1":"greg","name2":"gill","name3":"franklin","name4":"bob"}]

So this was really helpful.

I finally got it all to work as intended with this php script in case anyone had similar questions:

code:

<?php 

$name1 = $_REQUEST['name1'] ;
$name2 = $_REQUEST['name2'] ;
$name3 = $_REQUEST['name3'] ;
$name4 = $_REQUEST['name4'] ;

$jsonString = file_get_contents('/home4/arcdaddy/public_html/springboard/testing/data.json');
$data = json_decode($jsonString);

$data = array(
			array(
			"name1" => $name1,
			"name2" => $name2,
			"name3" => $name3, 
			"name4" => $name4 
			)
		);

$newJsonString = json_encode($data);
file_put_contents('/home4/arcdaddy/public_html/springboard/testing/data.json', $newJsonString);

?>

Thank you all for your help

Jimlit fucked around with this message at 19:40 on Dec 6, 2013

# ¿ Dec 6, 2013 19:37

Jimlit: Jun 30, 2005

Anyone tried YUI?

Just from looking over the website it seems to have a huge amount of features. Just like to get some opinions of it in practice if anyone has experience with it.

# ¿ Aug 7, 2014 19:40

Jimlit: Jun 30, 2005

Thermopyle posted:

Is there anything that Angular is better at?

Maluco Marinero posted:

Rapid development for people who want to stick to a more conventional model/controller/view-template approach for their application, and want that structure enforced by the entire framework.

This.

Also the demand for knowledge of Angular is pretty high. I'm currently in the middle of a job search and i'm seeing Angular dropped a ton in job listings.

# ¿ Mar 10, 2015 19:12

Jimlit: Jun 30, 2005

If my boss creates the following less mix-in am I within my rights to savage him in the PR.

code:

 
.tt-upper() {
  text-transform: uppercase;
}

# ¿ Jun 14, 2019 21:42

Jimlit: Jun 30, 2005

Holy poo poo though......

code:

<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

code:

/* App.svelte generated by Svelte v3.6.6 */
import {
	SvelteComponent,
	append,
	detach,
	element,
	init,
	insert,
	noop,
	safe_not_equal,
	text
} from "svelte/internal";

function create_fragment(ctx) {
	var h1, t0, t1, t2;

	return {
		c() {
			h1 = element("h1");
			t0 = text("Hello ");
			t1 = text(name);
			t2 = text("!");
		},

		m(target, anchor) {
			insert(target, h1, anchor);
			append(h1, t0);
			append(h1, t1);
			append(h1, t2);
		},

		p: noop,
		i: noop,
		o: noop,

		d(detaching) {
			if (detaching) {
				detach(h1);
			}
		}
	};
}

let name = 'world';

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, null, create_fragment, safe_not_equal, []);
	}
}

export default App;

# ¿ Jul 9, 2019 21:05

Jimlit: Jun 30, 2005

VagueRant posted:

Anyone have any tips for messing with Google's dataLayer? I feel like I keep getting really inconsistent results adding events through dataLayer for Tag Manger and Analytics, where I set an event in JS, then set a Trigger and a Tag in GTM then set a goal in Google Analytics. Like half of my form submissions aren't captured and a bunch of onclicks aren't registered.

Google's UI is TERRIBLE for arranging these things, wondering if there's a design pattern or something I'm missing.

Do you have an example of how your events are set up? There are a million ways to screw yourself over with GTM / dataLayer stuff.

# ¿ May 21, 2021 18:31

Jimlit: Jun 30, 2005

VagueRant posted:

Am a simpleton, so not too sure what info I can provide here, but I intially used the following for phone number events:
code:
const phonelinks = document.querySelectorAll("a[href^='tel:']");
if (phonelinks) {
  for (const phonelink of phonelinks) {
    phonelink.addEventListener('click', () => {
      dataLayer.push({
        "event": "clickedPhoneNumber",
      });
    })
  }
}
Then when that failed to work, I switched from an event trigger to a "Click -Just Links" trigger in GTM with Click URL-"Starts with tel:", that checked Wait For Tags (max wait time 200ms) in case that was a factor.

That references a Tag typed to GA that triggers an action I expect to see in GA.

On form submission inconsistency, we have a redirect on submission and I'm guessing the datalayer change is failing to fire before that kicks in, so I was maybe going to use session storage and trigger the data layer on the thank you page.

Your guess for the form submit is right. The solution would be to write a custom submit function that fires after datalayer push completes. The same might be true for the tel links, but I would just keep the solution you have in GTM since you really are only sending one event.

Jimlit fucked around with this message at 17:39 on May 26, 2021

# ¿ May 26, 2021 17:28

Jimlit: Jun 30, 2005

Analytic Engine posted:

Anyone have a recommendation for courses in React/Redux/performant JS/frontend/??? My boss wants to spend up to around $1000 on training but I haven't found anything popular that's more than the cost of a few books. Money is no object and I don't know how to leverage that

He wants to spend $1000 to teach someone frontend from the ground up instead of just hiring somebody? This is oozing dumb rear end small business boss energy.

# ¿ Jun 4, 2021 12:26

Jimlit: Jun 30, 2005

Analytic Engine posted:

I already know frontend and am mediocre at React, it's more about reaching an expert level in something

in that case, go with this if you absolutely need to burn the budget.

smackfu posted:

Maybe the Kent C Dodds course? $600. I generally consider him to be a smart guy about React stuff.
https://epicreact.dev

Otherwise he would be better off getting a business account with udemy for all his employees. Honestly though, no online course is going to give you the level of expertise that plugging holes in your own lovely react app will. If he has a project in mind I'd say take the time you would dedicate to online training and just use it to get started on that.

# ¿ Jun 4, 2021 18:25

Jimlit: Jun 30, 2005

fsif posted:

So say I have a pretty simple React app—one where you go through a short survey and are given a recommendation at the end. I don't care about SEO or things being server side generated or really routing.

If I know this app is going to be accessed almost exclusively on mobile devices with varying connection speeds, is there still a benefit in using Next.js over just a simple Vite/React build? Like, if the code is statically or server side generated, will it load more quickly or be more performant than just loading everything on the client? Or would the differences be largely negligible? Or any other considerations I'd need to account for?

I would consider not using a big framework like react for a "pretty simple" quiz app/widget. Unless this is a stand alone thing id start by asking what the existing front end stack looks like? Has there been any similar projects at your company that you could leverage or reference?

# ¿ May 30, 2022 07:48

Jimlit: Jun 30, 2005

prom candy posted:

You should definitely use React or another front end library for almost everything interactive because rolling your own poo poo with vanillaJS will slow you down significantly, assuming you're a competent React developer and don't normally work in vanilla JS.

Alternatively, don't be the guy using react for everything interactive. Frontends passionately over-engineering poo poo is the single worst thing in webdev

# ¿ Jun 1, 2022 20:39

Jimlit: Jun 30, 2005

camoseven posted:

Actually the worst thing in webdev is senior backends thinking "oh it's just JS it's obviously easy" and then coming in and loving all my poo poo up!

Like just to gently caress with you?

Usually it's the CSS that gets the backend devs where I work. They are all super adorable and humble about it though.

# ¿ Jun 1, 2022 20:54

Jimlit: Jun 30, 2005

Protocol7 posted:

React is a fantastic framework especially since the introduction of functional components. I'll use it for just about everything because I think it's amazing and I'm not apologizing for that.

React is amazing! Some of the projects I'm most proud of I've done in react. But if you are using it for everything you should apologize

lunar detritus posted:

https://alpinejs.dev is a neat alternative if you just want to add a sprinkle of interactivity.

I love this.

# ¿ Jun 2, 2022 00:13

Adbot: ADBOT LOVES YOU

# ¿ May 2, 2024 07:25

Jimlit: Jun 30, 2005

Obfuscation posted:

God I hate Angular, I spent the entire day today figuring out this poo poo which obviously isn't documented anywhere and produces totally incomprehensible error messages. How can it be so loving hard to make a dynamic form that is configurable at runtime? Isn't that why we have all this frontend poo poo in the first place? And let's not even talk about splitting a form in two or more components, I don't even know if that is theoretically possible. Angular is just a horrid pile of complexity piled on top of complexity, and there's no reward to any of it.

Big razor html helper energy.

# ¿ Sep 15, 2022 20:19

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT