/wdg/ - Web Developer General

React is the hot new things for relatively young tech companies. What you'll learn is most companies are just a behind the curve relative to where they started.

alright. React it is

I'll repeat my question from last thread.
What is the most efficient backend language performance-wise with at least medium-tier comfy syntax?

Answers I got last time were Go and C#.
Go seems poor when it comes to anything more than simple CRUD.
C# is comfy, but not that fast, also I know it already and want to learn something new.

Depends on where you are and what companies are looking for.
It would be completely fucking retarded to learn React when all anyone uses in your area is Angular (or something else). It doesn't matter if it's better, it doesn't matter if it's all the rage online, figure out what the fuck is happening in your area.
If you're just doing it for fun, sure learn whatever, but overwhelming majority of posters here learn things to get hired.

Yes.

I'm learning node.js atm. In my area, there are positions open for it.
But for a personal project, I want to learn something fresh. I found this, I'll go with it.
udemy.com/meteor-react/

Attached: 1523832232192.webm (640x640, 540K)

how do you manage larger projects?

I am currently at 5k loc, i've switched to typescript, am using UML, but there is so much convoluted shit I don't know how to proceed...

what's the problem, exactly? you don't know how to precede how? did you plan out your design?

If you want speed at scale go functional. Purity scales know a way that imperative cannot.

If you want single thread faster than c#, I dunno like rust or something.

I have a high throughput scala stack I use.

MySQL question.

I have a column called categories.
In each row under the categories column i have stuff like "hats,belts,shirts" or "shirts,hats".

How do i pull up rows that only contain "shirts"?

I looked up where and have but they seem to search by the whole cell not whats in it.

SELECT * FROM table
WHERE categories LIKE '%shirt%';

Oh shit i never thought like would be relevant.
Thanks bro.

Does anyone here work with Angular on an enterprise level? I have some questions.

fuck dude I had a whole page written out and then I hit esc.

basically storing events in data structures, sorting them, reacting to them, swapping them around, connecting them with each other, etc, etc.

are you using a framework? this is what things like angular is made for

For backend should I use Clojure or Go or Other(pls explain)?

Results so far:
>Clojure: 1
>Go: 1
>Neither: 1

Is OOP the best way to make a site or there are another better methods?

it has nothing to do with the front end. this is all backend connections, sockets, messages, data transfer, caching, that type of stuff.

You usually don't store events in databases unless you're event sourcing

oh, figured since you said typescript it was some thick-client thing.
i think you may be overthinking things. What are you trying to accomplish here??

and explain it in 5 sentences or less before going to make another page again. Just paraphrase your functional requirements

well, the event listeners need to be stored in the DBs, because they need to be managed. they're created dynamically, and they need to be kept alive and set free for GC depending on several criteria

a secure, safe(lossless), spam and reflection-proof, stable, tcp-only p2p network without trackers or relays.

No pajeet there a not another better methods.

I'm white, just got here in this area now

MVC is better for UI related stuff

Yeah, but I'm not gonna wait around for you to ask your questions. Should have asked them right off the bat. Night

Go is fun if you love a lot of boilerplate.

If I need to develop a PHP backend/API that gets data from a PostgreSQL database, and feeds it to a frontend single-page app, what's the best way to go about it? I was thinking about using React for the frontend, would it be best to just use AJAX to talk to the PHP backend?

I was going to ask something related to component factories. Seems like a topic not many people know about

Just use react, there's really no point of starting a single page app from 0 anymore.

Like select all from table where 'hat' in substring_index array

/wdg/ on spectrum.chat/about or zulipchat.com/features/ ?

Both align with /wdg/ goals (open source, free, better dev integrations) are far less shitty than discord or slack, and we won't have to wait for an user to spin up a /wdg/ thread because it died while they were away for the weekend.

We already have a discord.

please read this and get the fuck put

zulipchat.com/privacy/
spectrum.chat/privacy

>discord

>advocating privacy on a website where you are exceptionally identifiable
>wanting to post his loli on /wdg/
?????
nobody uses it outside of that one autist who spams it (You)

Good luck matching that with your super autism chatroom in a program that no one wants to download.

Attached: 2018-04-17 23_14_03-#web-dev - Discord.png (102x14, 712)

After adding an image to a cell all the cells from the table change in size, how i can keep the img original size?

hey /wdg/ just want to say thank you
2 years ago at this time, i was out of school for the summer and was not able to get an internship. I only knew a bit of programming from being in electrical engineering but I went here and started to learn webdev from resources recommended by here. that started me on the right path and I spent the whole summer back at my parents place programming projects, eventually moved to mobile dev and shipped 2 apps. next time I applied for an internship I had 20 interviews and 7 job offers. now, in about a week im about to drive down to california and work an internship at google. I know im probably gonna get shit on for sjw blahblahblah for most people i know its their dream job, so again thank you /wdg/ for starting me down the right path

>Hot new thing
It's really not, it's definitely been industry standard for a couple of years now

When making a function that returns a promise, should the parameter checks be handled within the promise, or should they throw an error outside the promise?

e.g. Should it be this way:

search(value) {

return new Promise(async function (resolve, reject) {

if(value

Java if you're afraid of C++
Go if you're willing to sacrifice a tiny bit of performance

>you share a thread with 310 namefags who are fighting over non-anonymous platforms
you people are filth

Attached: 1489628781857.jpg (240x320, 15K)

Inside imo (First Example) imo.

The function that u would call after "search", by using .then, shouldn't run if the function it depends on doesn't succeed to run.

>spend time perfectly tweaking CSS so it works at every breakpoint and looks perfect all the time
>people don't get it and think this shit just places itself there by magic

what's the discord?

what do you guys put in sidebars to make them look less empty

Attached: 2018-04-18_000339.png (999x884, 70K)

Ah, yeah I realize that now. Throwing an error could break the whole program.

youtube.com/watch?v=bnQdr3HxmEI

preg_match('/^(\S+) (\S+) (\S+) \[([^:]+):(\d+:\d+:\d+) ([^\]]+)\] \"(\S+) (.*?) (\S+)\" (\S+) (\S+) "([^"]*)" "([^"]*)"(?: ([0-9.]+) ([0-9.]+) \.)?/', $line, $m))

Hey guys' I have this line inside a php script, I need to translate the whole thing to python. Help pls? I don't know php, that's where I need help. I think this cuts up the $line into pieces and puts them into $m, but what is the python equivalent of preg_match?

If there's not enough options in a sidebar why does it need to be a sidebar? Tabs at the top is a design pattern for a reason.

yeah but i don't like the way it looks. might be for the best tho
>ads on a shitty hobby site
come on son

These decisions should be made before you define how something looks, wireframe to make UX decisions first and then work on HiFi.

A bit of light reading:
butterfly.com.au/blog/design/10-steps-for-better-website-navigation

If you're unsure do some research, look at sites that do it right and searching places like Dribbble will be helpful:

dribbble.com/search?q=web navigation

Why is it saying this?

toggleMenu() {
const mobileMenu = document.getElementsByClassName('navbar-menu-link');
for (let i = 0; i < mobileMenu.length; i++) {
mobileMenu[i].classList.toggle('open');
}
}

Why/how would I use "this" in that function? I don't get it

Attached: error.jpg (729x186, 46K)

this means that it can be static

would you like to know more? check the collaborative encyclopedia on your info link

i decided to use a graphics to link my header and footer

thank for the advice m8 you really helped me out
now i just need to adjust them to make them seamless

Generally the reason for having a method in a class (as opposed to just a regular function) is because the method does something using the object it's part of. So since eslint expects you to use a part of that object, and you access the object's properties using 'this', eslint complains when you don't use 'this' for anything.

So maybe rethink including that as a method of that class? If you're just doing it for organizational purposes, maybe make it a static method or something.

I don't know enough about all the weird bits of react, I generally thought you had to use a stateful component if you want to use componentDidMount or things like that?

It all works but it's throwing this error which is really confusing

it has nothing to do with react.

learn about OOP, classes, etc.

Vue

It doesn't give this error if I'm using a stateless component though

what the fug I'm so confused!!!

Anyone worked with Preact CLI? Wondering if there's ways to defer non critical CSS instead of having it bottleneck the time-till-interactive.

The CLI seems to generate the HTML on build and I can add additional code to the build to defer the styles but there's no dev index.html template like create-react-app has.

Because stateless components don't have functions, they're just react class components. That function you made can be made static if it doesn't use "this" inside the body, so either convert your component to a stateless/functional/dumb/presentational component or put "static" in front of your method.

By the way you should be handling DOM manipulation (i.e. element creation, changing classes and properties) with React. In that example if the nav menu is rendered inside that component, you could use React's setState() to control whether the menu is open or not. I'll post an example in a few mins.

Here's one example using traditional classes

Attached: file.png (966x488, 84K)

Here's another example using conditional styling. Styles are taken in by an object, key being camelCase, and the value can be a number or string depending on the style.

Attached: file.png (545x256, 25K)

I like vue, i hate vuex

Here's another example with Styled components. This inlines your CSS and makes it exclusive to the component.

Attached: file.png (964x736, 114K)

I did it like this, I have like 160 lines of CSS so I can't really be bothered to refactor it, this feels a bit redundant to do though... hmmm

Attached: iuhuih.png (767x571, 49K)

oh no my initial state was backwards and should be true not false

Just a couple of issues:

1. If you're using a stateless/presentational/dumb component you won't be able to access "this". The presentational component is pretty much the render function except it takes in props as an argument. For example, the Menu component in is a stateless one because it only relies on the props given to it for interactivity.

2. In JavaScript, you can only use "this" inside a class or function. Arrow functions don't create a new "this" object which is why I used it in the above example. Otherwise you'd need to use binding.

3. You need to add a variable modifier (i.e. "const") in front of the toggleMenu if you're placing that logic outside a class. That's why you're getting that "=" error.

4. You would still need a component holding the state of the menu and whether it's opened. Therefore the toggleMenu function would need to be inside a component's class. React doesn't like it when you start modifying the DOM and you may see strange behavior.

Attached: file.png (725x778, 101K)

Another option is to also remove it from the DOM altogether. This pattern is often used to hide/show things.

Attached: file.png (662x404, 53K)

whoops, and even I forgot to remove "this" from the presentational component

Attached: file.png (723x221, 35K)

why darkmode?

I'd probably fall asleep if I wasn't in lightmode.

it burns my eyes and it was default theme in vscode

The = error turned out to be because my eslint wasn't set up properly for babel, what I have seems to be right for a class based component

thanks fren

Attached: 5YjYpra.jpg (1000x800, 56K)

>tfw never have been with a ebony goddess

Attached: woonigga.jpg (630x603, 18K)

Depends on the site senpai. The less you use components the more I'd lean into more functional code over OOP.

>and we won't have to wait for an user to spin up a /wdg/ thread because it died while they were away for the weekend.

then why don't you make a new thread when the previous one goes to page 11?

Really? Why is that?

The only issue I had with Vuex (but really state management in general) initially, was that I didn't know why I should even bother implementing that stuff.
Only when I actually got to a point where I had problems with passing props around to multiple components did I actually try it out and it worked quite well.
For a while before I simply resorted to using a simple source-of-truth object, that each component had a reference to and that worked just fine as well.
You don't get all that event debugging, time travel stuff, etc., but if I ever needed shared state for some small application I would argue, that that's good enough and full blown solutions like Vuex/Redux/Mobx are only needed at a certain point.

It's almost some kind of retarded fearmongering
>(OH NO, if every component can just modify the state, then your app will immediately crash and detonate)
Really, you write it, you know what's going on in the code and what modifies what.
If your code reaches a scale where it becomes non trivial to see what's going on in each component at a glance, then state management libraries are an excellent solution to the problem.

Attached: 1518950644307.jpg (1024x683, 470K)

Since when Java is faster than Go?

According to some benchmarks[0][1] Go is marginally faster and takes significantly less memory.

Also performance differences between Go, C# and Java seem minimal, and if you really want pure performance you go C or Rust (not very productive as web backend) or Nim or Crystal (both haven't reached 1.0 yet)

[0]github.com/kostya/benchmarks
[1]benchmarksgame-team.pages.debian.net/benchmarksgame/compare/go.html

stackoverflow.com/questions/2704417/why-is-go-so-slow-compared-to-java

infoworld.com/article/3195174/application-development/java-vs-googles-go-an-epic-battle-for-developer-mind-share.html

Hey guys, can anyone tell me what this kind of notification "pop-up" is called?

Attached: 2018-04-18_14-37-18.png (645x469, 21K)

banner notifications

css-tricks.com/pop-from-top-notification/

a Toast?

the benchmark game show that in 6/10 cases go is a little bit faster, in 4/10 a lot slower and everywhere it takes less RAM

Also another thing:

- this.setState({}) runs asynchronously meaning it won't necessarily update the "this.state.menuToggled" before you check it on the next line.

In your example it's actually useless to use state at all since you're not actually modifying the React DOM.

Pretty much the purpose of react is:

1. component is rendered
2. User interacts with component
3. Component updates it's state from that interaction
4. Component checks whether it should re-render (shouldComponentUpdate)
5. Component "reacts" by calling the render function again with it's updated state

In your example you're causing an unnecessary re-render if you're not going to utilize the state in your render function.

On material UI they're called toast notifications

Thanks lads.

Wait so what I ACTUALLY want to do is move it out of the class and use a normal function so it doesn't need to rerender?

Is Postman a popular utility?

I'm doing some MERN tutorial and it claims that it's a must-have that no dev can live without.

Bullshit?
Is it botnet?

You can use a typical class variable that is not "state". For example:

class X extends React.Component {
expanded = true;

set expanded(bool) {
this.expanded = bool;
// DOM manipulation possibly goes here whenever expanded changes
// document.querySelectorAll(...)
}

toggleExpand = () => {
this.expanded = !this.expanded;
}

render () {
Toggle expand
}
}

But it kind of negates the purpose of React.