/wdg/ Web Development General is back

Is this how user auth is done in the real world with React?

>Use Redux to store a global loggedIn property
>Check loggedIn property in every subscribed component before rendering
>log in by dispatching a login action to the store
>sending an HTTP request from within the store via axios or superagent
>use passportJS server side
>update state based on response from server

If not, how is it done in the real world?

now days everybody wanna talk like they got something to say but nothing comes out when they move their lips just a bunch of gibberish and mother fuckers act like they forgot about dre

What's a good text editor for web-dev? I'm just starting out.

>>61248026

VSCode, Sublime, NotePad++, etc

Vim if you really wanna get balls deep

>>61248053
I've tried VS, Sublime, NP++, Atom, Geany, and many others. Out of those, my favorite was Sublime. My only issue was the constant nagging to buy a license.

I'm playing with Brackets right now.

>>61248143

youre wasting too much time figuring out what editor to use. Just fucking pick one. A free one then.

learn how to program

>>61248143
With sublime text you can literally reuse license keys multiple times, just google it for a key and stick it in, it'll work.

>>61248327
Wow. I'm surprised that actually worked. I feel kind of bad now too. I pirate all the time but this feels different somehow. Oh well.

Thanks for your help!

>>61248026


Atom has the best experience to me, really easy to install plugins and themes, but its slow as fuck. I think it's moving to c++ or some shit at least for rendering files so I'll try it again in the future.

Right now my favourite is vscode, its almost identical to atom but a lot faster. Sublime is similar too I guess.

File: colst.jpg (28KB, 356x373px) Image search: [Google]

28KB, 356x373px

Is this course content + 3-5 months part time study + some independent projects enough to get a foot in the door somewhere? Any suggestions not listed here to add to the curriculum?

>>61249508
php

>>61249508
>jquery
kys

>>61249606

Cool thanks for helping me update my list I bet they love you at the office

File: tired.jpg (33KB, 575x556px) Image search: [Google]

33KB, 575x556px

>reading a story on a news website
>go to scroll to the bottom or even 3/4 of the way through the story
>accidentally scroll too far
>it scrolls and autoloads a completely different story instead
stop this fucking shit right now you fucking mouthbreathers, i swear to god if you dont

>>61249508
SQL, some front end javascript framework like react or vue, some basic programming design stuff like MVC and SOLID. Also you have a stuff that goes under other subject or is kinda abstract - like DOM manipulation is basically javascript and auth stuff is kinda general. Also best way to learn is actually do stuff - try to create some SPA CRUD app.

File: mustresist.jpg (59KB, 600x805px) Image search: [Google]

59KB, 600x805px

How do you deal with website design? Do you pay for mockups? Or do you do them yourself? How much do those tend to cost?

I having a really hard time creating a "design" for a website, any suggestion would be appreciated, thanks.

Where is the best resource to help learn and memorise regular expressions?

>>61249824
I guess everyone has to go through it, i was developing a react app last week and yesterday was reassigned creating html newsletters in html3 with lots and lots of nested tables circa 1995

>>61249914
https://regexone.com/
I learnt there, I know there's more to it but I don't need more than that right now

>>61249914
I think this is good for reference:
regexr.com

>setInterval crashes Chrome

LOL WHAT?!

If I run my setInterval clock for more than 10 hours in Chrome it crashes Chrome.

Apparently it doesn't let go of any data from within setInterval, so you have to either regularly clear and restart the interval or have nothing going on in the interval.

Also console.logs fuck Chrome's memory too.

Funny thing is I have a VB.NET browser source running the page and it's memory increased by 0 in the past 3 hours.

Is Chrome really worse than vb .net?

File: 1496784402276.gif (893KB, 200x150px) Image search: [Google]

893KB, 200x150px

>>61246469
>a VB.NET browser source

Thinking of designing and building a blog for my website from scratch since I'm not happy with wordpress or other alternatives. I know CSS/HTML and vanilla JS, what should I pick up to do this? I've got my domain and hosting and all that already taken care of since it's my own site.

Can I add dependencies in my npm package json file from packaged installed globally, or I need to install locally every package each time?

how do i pass {{id}} to html href attribute
i want to do something like
<a href="something.php?{{st.id}}">asd</a>

>>61246469
what happened and why is it back

>tfw no job

>>61251313
no

>>61251325
what do you mean by "{{id}}"?

>>61251784
id is some value
example
if is like if wanted to add 'st.course_name' to be part of url of hre=""

<div id="app">
        <div id="list" v-for="st in status">
            <p v-text="st.course_name"></p>
            <p v-text="st.professor"></p>
<i want href="something.php?{{st.course_name}}">
</div>
</div>

i may have some error in code above, i just wrote it

File: QgUdxgJ.jpg (436KB, 1920x1080px) Image search: [Google]

436KB, 1920x1080px

angular y/n?

>>61251889
My health insurance site (anthem.com) is all angular, so there's at least one legit site that uses Angular.

For my personal project, I went with React since it seems like it was meant to be a whole-site solution (including routing and such) from the beginning, whereas Angular seems to have originally been for parts of a site.

>>61251889
I like it, but then again I'm just me. I entirely accept that I may be wrong.

>>61251852
Are you using a framework (like Angular or Vue)? If so, it SHOULD just interpolate the value.
So you'd have something like

$scope.st = {
    id:1138,
    name:'Introductory Shitposting',
    prof:'Professor Pepe',
    creds:4
}

And then you'd just do

<a href='something.php?id={{st.id}}'>Check out my course on introductory shitposting</a>

If you're NOT using a library, you'll have to explicitly update it. The easiest way to do that would be to assign your <a> an id (something like "course-link") and then just do:

//or however you wanna update the link
var updateCourseLink = function(st){
    //assume the arg 'st' has a property 'id'
    document.querySelector('#course-link').href= `something.php?id=${st.id}`
}

>>61251852
use v-bind. moustaches doesn't work inside html tags

<a v-bind:href="'something.php?' + i.id">asd</a>

>>61252054
>I like it, but then again I'm just me
To clarify, since I realize that's a bit of a vapid response: I like AngularJS mainly because I'm used to it. That being said, there are areas where it is definitely lacking. It's generally slower than react, but react can be slower than Angular2, and so on... It's really more a question of which framework you enjoy using (or are paid to enjoy using).

>>61252086
For Vue, yes. If this is Angular, then just simply using moustaches will work.

let's say I'm writing a single page web app in react, where the react is essentially displaying a whole lot of information (data) and manipulating it (just on the page), and this comes from a single API call that produces a json response that react would make on page load

is this a bad idea if the api call is going to produce a json structure of like several thousand objects? is there a better way that I'm not thinking of?

>>61246781
Pretty much, I like to use a higher order component that just passed props and checks if the user state is authed, as well as checking for a valid JWT on each route

>>61252295
is there really no way to paginate this or categorize it and lazy load sections? I can't even imagine what you'd be doing with thousands of individual objects

guys why learn web dev when you can just use a CMS?, looks like too much trouble...

>>61252295
Lack of ability to paginate requests in an API that's spitting back thousands of results is a problem with the API. If you have the ability to change it then you should.

If you don't and the API is just what it is then there's not much you can do. The majority of time-to-paint is almost certainly going to be that request and unmarshalling. If you benchmark find that rendering is slow you could build up the rendering component's state over time, react should be able to figure out it doesn't need to rerender previous elements, but that's not something you want to do until you have benchmarks showing conclusively that it's one big render that's causing problems.

>>61251889
I've done a couple projects with it. It's not bad, the OOP-ness of it and all the IoC machinery is, uhh, not really my thing but some people like it. Angular2 has a better overall architecture but I resent that it pretty much forces you to use typescript (nothing wrong with typescript, just sometimes I don't want to bring on the whole compiler to every project) so I still use 1 more.

>>61252472
>higher order component
you mean like a smart/container component?

>>61253101
He means a component factory, a component that makes components.

>>61253101
Here is an example I've used before

import React, { Component } from 'react';
import { toastr } from 'react-redux-toastr';
import { connect } from 'react-redux';

export default function (ComposedComponent) {
  class Authentication extends Component {
    static contextTypes = {
      router: React.PropTypes.object
    }

    componentWillMount() {
      if (!this.props.authenticated) {
        toastr.error('You need to be logged in');
        this.context.router.push('/');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        toastr.error('You need to be logged in');
        this.context.router.push('/');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(Authentication);
}

File: stock-vector-vector-cartoon-of-man-on-laptop-web-ui-developer-sitting-and-looking-at-laptop-web-banner-with-486343720.jpg (30KB, 450x293px) Image search: [Google]

30KB, 450x293px

>>61246469
Can I get some help with my front-end dev process? I work on files that are hosted on a local nginx server running browsersync. That way I can live preview changes to the design in my browser. I would like to start using Sass instead of vanilla CSS. If I do so, however, then it breaks that workflow. Is there a way to have Sass compile to CSS on save which itself would trigger a browsersync refresh? I think webpack is part of the answer, but I don't see how it could compile to CSS on save of a Sass file?

>>61254123
You could use a task runner like Gulp to watch the files and build on saves

>>61249365
atom has 0 code intelligence. It cant even show symbols/definitions in files if you dont generate your own ctags files.

thats the main reason i switched to vscode..

>>61254123
just get sass from ruby's package manager. it has the ability to watch files for changes out of the box. you can open up a ruby shell in the background and have it watch your files for changes on save. you don't need a task manager like gulp or grunt or punt or cunt or whatever the fuck

>>61251784
>no
Woah, what a retarded system then

File: 1488263562325.jpg (152KB, 800x649px) Image search: [Google]

152KB, 800x649px

when you're asked to learn deprecated angular 1 because thats what the company sites use

File: b71db743778a88a10dea10fa24da4b9c.jpg (15KB, 300x400px) Image search: [Google]

15KB, 300x400px

does anyone actually sign up for newsletters?

I mean "intentionally", without it being forced on you, when you create an account somewhere

>>61255287
yeah, its pretty much retarded.. do 10 websites, have 10 node_module fodlers wit same shit in them on your precious SSD

I used to do symlinks, but for some reason i stopped.. probably some errors

>>61251996
>I went with React since it seems like it was meant to be a whole-site solution (including routing and such) from the beginning

That's literally the opposite of what react is. All react deals with is rendering. The developer has to bring in routing logic, models, etc.

>>61255287
like the other anon said, symlinks are an option

A while ago someone also posted about using subfolders inside the folder, that holds your package.json
This works since node checks up the directory tree for a node_modules folder to use, if there is none in your current one.

>>61256507
Only to be notified when something is is released or whatever.

No one reads articles and 99.99% of those emailed articles exist solely to advertise shit.

How do I convert Fahrenheit to Celsius in React?


I got

            <div class="temperature">{toCelsius({props.channel.item.condition.temp})} <span className='deg'> °C </span></div>

Which doesn't work. Can anyone give me an example of this.
(toCelsius is global; not in any component.)

>>61258127

<div class="temperature">{toCelsius(props.channel.item.condition.temp)} <span className='deg'> °C </span></div>

how pathetic is $18/hr for a full time JS/SQL/PHP developer? I asked for a pay raise but nothing yet

>>61249606
>>jquery
>kys
kys retard

>>61258656
>>>jquery
>>kys
>kys retard
kys

is this the sickest README.md you've ever seen https://github.com/chiru-no/chiru.no

>>61258661
>>>>jquery
>>>kys
>>kys retard
>kys
get fucked cunt

>>61258665
I scrolled through it. looks like a 15-year-old's failed attempt at humour

>>61258452
Are you in the US?

>>61258691

yea WA state

How competent do I need to be in the big 3 to get a junior front end job?

I see always that you must 'learn' HTML, CSS & JS (and maybe a library or two). But what is the bare minimum I should be able to do?

Is a Python backend a good idea? Which one should I use if so?

>>61248712
Don't worry, sublime text 3 is in beta anyway.
Pretty sure author will make all the st2 license key invalid afterward.

>>61259263
>Is a Python backend a good idea?
it's okay, although I can't understand why people choose to subject themselves to using a dynamically typed language for anything non-trivial
>Which one should I use if so?
if you mean "which framework" then django

>>61259588
>sublime text 3 is in beta anyway
will it ever not be?

>>61248053
>>61249365
>>61254716
What's the difference between VSCode and Virtual Studio?

Is VSCode less bloated?

>>61259807
they're two separate tools with two separate usecases that were named similarly because apparently microsoft finds joy in confusing people

>>61259807

you mean visual studio? visual studio is a full blown IDE. VSCode is just a free text editor. It's pretty much just a better version of Sublime (and free).

>>61259894
Yeah I meant Visual Studio. Thanks. I love Sublime so I'll dl VSCode and see how it compares.

How did you make the transition from learning front end to back end?

>>61259807
Visual Studio is a full-blown IDE with a lot of tools built into it. IMO it's pretty bloated, since every time I'm using Windows, and I accidentally double click an XML file or something, it takes at least 2 full minutes to start up, just so I can shut it down.

VSCode is basically a text editor with syntax highlighting and also I think a built in JS command prompt.

>>61260042

by learning how data is stored, manipulated, read, and inserted/updated.

>>61260042
by learning programming

>>61258666
>>61258661
>>61258656
>>61249606
>All this kyssing
would you two just get a room already?

>>61259075
HTML and CSS you need to know pretty much like the back of your hand. You won't necessarily remember all of the CSS properties, but you DO need to know enough to, generally, get shit done without constantly going back to the books.
As for JS, consider it as exactly what it is: a language that you can 'speak' (or 'write'). Now, imagine you're hiring someone to use that language. You don't wanna hire someone who's just learned how to read See Spot Run.You wanna hire someone who at the very least has a useful understanding of the language.
To that end, learn at least ONE framework (not jQuery, since that's a little dated), tho I'd strongly push for 2 or 3. Even if you intend to be fully front-end, learn SOME back-end stuff. This both makes you more sellable (an employer can be like 'hey, i'll pay you extra if you help with back-end problem X!'), and affords you a bit of bullshit insurance. If your coworker moot says, "I can't fix the server because of problem Y!', it'll help you to know whether he's being truthful or just yanking your dongle.
I'd suggest Angular, React, and either NodeJS or Python.

>>61258656
this, jquery is god tier until all browser support modern javascript

also, kys idiot >>61249606

>>61260973
browsers will never support "modern javascript" because there will be a new ecmascript standard every couple of years

>>61258452
I would suck dick for $18/hr.

>>61261157
$npm install dick --save-dev
$git push dick

how slow is node.js compared to other frameworks?

>>61248327
Or don't be a dick and just buy the license...

>>61259750
I like Python more than PHP, that's why. Also what I'm about to do does not need node.js at all.

File: ecmascript-6-and-beyond-27-638.jpg (18KB, 638x479px) Image search: [Google]

18KB, 638x479px

Can someone please explain this to me? This shit is confusing as fuck.

>>61261741
>I like Python more than PHP
that's very reasonable

>Also what I'm about to do does not need node.js at all
who's talking about node?

File: 1494447211496.jpg (9KB, 248x233px) Image search: [Google]

9KB, 248x233px

>>61261157

best react guide???

Preferably a text book I can go through, or a textbook-like webpage.

>>61261908
It's just a guaranteed unique object, that can't be accidentally duplicated.

Think of it as if you're using a uuid.

var a = "7a828712-c64e-49d5-9415-f12031fcf8e7"
...
if (a === "7a828712-c64e-49d5-9415-f12031fcf8e7") {
...

Except it's even better than Uuid, because it's guaranteed to be collision-free, and you can actually keep sane by not having to use extremely long and unique strings. A symbol is useful for providing keys to objects that will never be overwritten, or even known, for example (unless you know the symbol name)

var arr = [];
var s = Symbol();
arr[s] = function () { console.log("I'm invisible!"); }
arr[s]();
>>> I'm invisible!
arr;
>>> Array [ ]
arr.length;
>>> 0

Should I use a CSS framework for a management dashboard? If so which one? Also flex or old school CSS?

Reposting from /dpt/:

In HTML5 with JS I would like to have a ton of <div>s, maybe a hundred at a given moment. There would be cases when I would like to refresh every single <div>'s innerHTML and style attributes at ones.

What is the faster method to do this? Iterating trough all the <div>s by ID and reset their parameters, or have one big container <div> and add the rest as a concatenated string? In the latter case, I think there would be a lot of string manipulation to get the results, but only one innerHTML change in the end, while the former case has more attribute changes, but doesn't create a long string in the memory beforehand.

>>61262574
I would expect the second approach to be faster, because you're not forcing a re-rendering every time you change a single div. Got to experiment though, try with 10000 divs.

>>61262338
Not a book, but this helped me a lot. React stuff starts around 1hr 45m

https://www.youtube.com/watch?v=1MOJdx_yZ0w&t=9474s

>>61254123
No one knows how to do this with webpack/browsersync?

>>61262233
What else am I supposed to use for a backend then, if not php or javascript?

>>61263206

php has a shit load of docs and has been around for awhile, probably the best back end languages to start out with. Doesn't really matter. Just learn how to program please

>>61263206
java

>>61249943
>nested tables
Thank Christ those days are gone

>>61263206
>>61263296
but also
>Just learn how to program please
this >>61263220

>>61262574
> Iterating trough all the <div>s by ID and reset their parameters
nah, just select by class name and apply the change to that htmlcollection in one stroke

getElementsByClassName(), or simply $(".myClass") if using jquery

>>61262612
Thanks for the tip!

>>61263342
Sadly all of the elements have different attributes, so changing them in a batch is not an option.

What is the best method to measure these things? Should I simply measure the delta time for both approaches?

>>61263206
PHP isn't all that bad. But it's easy to write bad, hard to maintain code, so watch out.

JavaScript/Node.js isn't that bad either. You can do things at a surprisingly low level, and if you want a framework on top, you can use Express or something.

If you want a scripting language with frameworks that have relatively large communities, then for Python use Django, and for Ruby, use Rails. There's also Flask for Python and Sinatra for Ruby, but I don't know as much about those.

If you want something new and fancy but maybe not a ton of support, then use Go with one of their frameworks, or Elixir with Phoenix.

If you want something enterprisey, then C# with ASP or Java with Spring or J2EE.

There are a lot of other options, but I think these are the most popular. Anyway, pick one, learn the basics like rendering pages, connecting to a DB, etc.

>>61263206
Python is a great choice. There's really two 'go to' choices for the backend framework as >>61263638 pointed out: Django, and Flask. (There's also bottle which is super minimal but don't bother with that right now)

Flask is more flexible than Django, leaves more decisions up to the programmer, comes with very straightforward templating engine built in called Jinja2. If you're learning, Flask would take you longer to finished your app than Django but you would learn so much more in the long run and be better off for it. For example you would need to learn something about databases, data abstraction, ORM, etc because Flask doesn't have that built in like Django does.

I'd recommend using Sqlalchemy for your ORM layer. Sqlalchemy website has great tutorials and documentation. Also, there's actually a package that brings Sqlalchemy into your flask app for you http://flask-sqlalchemy.pocoo.org/2.1/ that is quite popular if you wanted to check that out. And just use Sqlite for your db. Saves db in a single file, no configuration necessary.