<wdg/> - Web Development general

Prev thread: >Free beginner resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org/en-US/docs/Learn - a good introduction (independent of your browser choice)
freecodecamp.com
codecademy.com
hackr.io

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
youtube.com/watch?v=Zftx68K-1D4&feature=youtu.be

jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS

Attached: wdg.png (822x552, 868K)

Other urls found in this thread:

medium.com/@sonusaikishan/hackthebox-how-to-get-the-invite-code-and-enter-into-hackthebox-eu-fb4f3f24dc6c
webflow.com/blog/illustration-trends-in-web-design-for-2018
twitter.com/SFWRedditGifs

eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1 i(4){h 8={"4":4};$.9({a:"7",5:"6",g:8,b:\'/d/e/n\',c:1(0){3.2(0)},f:1(0){3.2(0)}})}1 j(){$.9({a:"7",5:"6",b:\'/d/e/k/l/m\',c:1(0){3.2(0)},f:1(0){3.2(0)}})}',24,24,'response|function|log|console|code|dataType|json|POST|formData|ajax|type|url|success|api|invite|error|data|var|verifyInviteCode|makeInviteCode|how|to|generate|verify'.split('|'),0,{}))
Can anyone help me get this to run? I'm trying to run it on jsfiddle but nothing happens, am I doing something wrong? It should return some sort of code...

Have any anons made the jump from web to native? What platform did you make the jump to?

it's obfuscated....
i just pasted that code in Sublime Text, Ctrl + Alt + F (code formater) and showed this
function verifyInviteCode(code) {
var formData = {
"code": code
};
$.ajax({
type: "POST",
dataType: "json",
data: formData,
url: \ '/api/invite/verify\',success:function(response){console.log(response)},error:function(response){console.log(response)}})}function makeInviteCode(){$.ajax({type:"POST",dataType:"json",url:\'/api/invite/how/to/generate\',success:function(response){console.log(response)},error:function(response){console.log(response)}})}

That code unpacks to this:
function verifyInviteCode(code) {
var formData = {
"code": code
};
$.ajax({
type: "POST",
dataType: "json",
data: formData,
url: '/api/invite/verify',
success: function(response) {
console.log(response)
},
error: function(response) {
console.log(response)
}
})
}

function makeInviteCode() {
$.ajax({
type: "POST",
dataType: "json",
url: '/api/invite/how/to/generate',
success: function(response) {
console.log(response)
},
error: function(response) {
console.log(response)
}
})
}


Nothing is going to run unless you call either of those functions manually

The reason it's not running is because eval takes a string as parameter, not a function, dumb dumb.
Also that anonymous function is not encapsulated.

You have to call that function or it won't do a damn shit. Also check jquery dependency

No, eval() evaluates or executes.
Also, minus 20 points for not recognizing packed javascript.

thanks. So I have the two functions declared, then I call them like this:

console.log(makeInviteCode())

still nothing happens...

medium.com/@sonusaikishan/hackthebox-how-to-get-the-invite-code-and-enter-into-hackthebox-eu-fb4f3f24dc6c

It's obvious to say, but the fact that you couldn't even google the answer, let alone not being able to solve such an easy challenge, means you're not qualified to enter.

Lol yeah, I could have googled it, but I wanted to actually try to work it out with some help from /wdg/. Guess I'm not ready...

>be me
>browsing a webpage that has invites to some shitty festival
>must crack the code in the website
>go to developer tools
>website in packed into a single line
>password is hidden in the source code

>website in packed into a single line
In all seriousness, why does this happen on some websites?

minification, fewer bytes to transfer and harder to read(copy) their code

>and harder to read(copy) their code
So this is deliberate in order to stop users from seeing the source code? Interesting. Can it be reversed?

>Can it be reversed?
obviously.

see for example

It's mainly done for the former reason though the obfuscation is just a byproduct.

...

dude, stop wasting time with bullshit

>spending 10-20 minutes writing some meme code for fun is wasting time

>meme code
The absolute state of /wdg/

>spending 10-20 minutes writing some meme code for a meme repository with no GitHub activity for a literal who isn't wasting time
even eating you mother is better

everyone in here is a literal who. none of us are mark zuckerberg. did you expect mark zuckerberg to create a meme repo?

>everyone in here is a literal who.
how do you know? we're all "anonymous" here.

>none of us are mark zuckerberg.
I guess some of us are in a way, in the sense that we copy ideas from other people trying to make a profit.

>make meme repo
>obviously the goal is to make the worst website in existence as a meme
>Jow Forums is retarded and thinks it's someone trying to get them to do actual work for free

fun isn't allowed here anymore is it

someone make a text box where we can write messages and leave them for posterity
Also maybe a flag counter to display visiting countries

>you're either a literal who that should devote energy and time into a stupid project or mark zuckerberg
why hasn't your school blocked Jow Forums from library computers?

>i'm not a literal who because if i'm a literal who how do you know if i'm a literal who
lmao

Has anyone really been far even as decided to use even go want to do look more like?

>I'm retarded for attention
gr8 glad we cleared that up user

W-what's going on here? Where's the code at?

right here bby

Attached: scrot.png (1208x1442, 254K)

Noice. I like the neat code, and the font and the color scheme as well.

you first

I don't do frontend shit

It can be reversed to some degree, but a lot of optimizations are hard to automatically reverse, and you never get back variable and function names, so you really have to look at the logic to understand what the code is doing and why.

Often times it's better to just step through the program's logic in Chrome dev tools. I've done this in the past to reverse engineer how a site works so that I can emulate its client-side logic and use its private API.

Still working through my CS degree, but all the jobs I've been able to land so far have been web dev. Is this just sort of the default too fall into for comp sci? Seems like I'm having to really push against the tide to do anything else.

Not to say I hate web dev. Just curious about other peoples' experiences.

>Still working through my CS degree, but all the jobs I've been able to land so far have been web dev. Is this just sort of the default too fall into for comp sci? Seems like I'm having to really push against the tide to do anything else.
It's not the default by any measure but it's probably the largest area and it has low barrier to entry so it's easy to end up there if you're not specialising in something else early.

Even then...I specced DB and respecced AI in my second degree and I still ended up doing full-stack web dev

Huh, that's interesting. I'm also doing a CS degree, and only one of the summer jobs I've done has been in web dev, and I specifically sought out a web devposition. The others have been in iOS dev, and one doing desktop using Qt and C++.

Which is better? Frontend or Backend
My professor said Fullstack is a meme and we should specialise in one or the other.

How long did it take you guys to see progress in learning code? And how do you guys stay motivated to keep learning? I'm 25 and I just started learning and I feel like I am too old to master all these languages. I want to try and become a back end dev but, having to master all these languages is becoming very overwhelming.

Attached: insta thot 1.jpg (1024x1024, 82K)

found out today that ... is the same as split

who came up with this
> a = 'my string'
'my string'

> [...a]
[ 'm', 'y', ' ', 's', 't', 'r', 'i', 'n', 'g' ]

> a.split("")
[ 'm', 'y', ' ', 's', 't', 'r', 'i', 'n', 'g' ]

>back end dev
So all these languages being just Python, really.

Fullstack isn't a meme but fullstack also doesn't mean being a complete master at everything. People naturally love one thing more than the other.

All of my web dev jobs have been contracting for someone who needs a website to do something. In that situation, you just have to know how to do both. You might be in a position some day where you want to/need to do both. Otherwise you are just leaving money on the table.

Attached: tfwnogf.jpg (800x800, 40K)

>all these languages
Start with one you complete idiot. Obviously someone trying to learn korean, french, german, russian, japanese, etc. all at the same time isn't going to fucking work.

Why would you ever need to split a string in python? A string already behaves as an array

it's a pretty common feature in lots of languages, it's called unpacking in python:
a = 'my string'
[*a]
[ 'm', 'y', ' ', 's', 't', 'r', 'i', 'n', 'g' ]

>python

it's JavaScript

oops ignore me then

Thots aren't gf material, user.

redpill me on Laravel.
Why are people using it more than CakePHP, Zend and CodeIgniter?

I have a DO droplet going spare for a personal web site and was wondering how to learn about web servers. I always just stick with Apache cos it has always served me well but it would be nice to have more of an understanding of the other options so I can make a considered choice.

Retarded question
If i'm building a page to search for the nearest pharmacy, how do i implement a button to acquire the phone's GPS coordinates and POST or GET them to a second php page?

Attached: 1529735505424.jpg (720x1280, 179K)

How often do you guys google shit for your job? Doesn't googling everything make you look unprofessional?

Attached: Asian girl drinking beer.jpg (600x800, 253K)

Also, both Python and JavaScript have immutable strings.

Learning curve is pretty low. Even some guy with a bit of knowledge can build basic shit with it

navigator.geolocation.getCurrentPosition(function(position) {
let dataToSend = {
latitide: position.coords.latitude,
longtitude: position.coords.longitude
};
fetch('/data-destination-url.php', {
method: 'POST',
body: dataToSend
})
.then(function(response) {
if (response.ok) console.log('User privacy successfully compromised');
});
});

install nginx and follow some guides or read a book. Nginx is overtaking apache these days, so it's a good bet for the future

Too many files, lots of bloat. A promising lightweight framework turned into another hulking meme framework.

navigator.geolocation.getCurrentPosition((position) => {
let dataToSend = {
latitide: position.coords.latitude,
longtitude: position.coords.longitude
};
fetch('/data-destination-url.php', {
method: 'POST',
body: dataToSend
})
.then((response) => {
if (response.ok)
console.log('User privacy successfully compromised');
});
});

What's the name for these minimalistic cartoonish "hero" images on landing pages?

Searching "hero banner" "hero image" etc. results only in superhero images, even if put into context like "landing page"

Attached: f64.png (1416x735, 150K)

There is no name that's just the artist's style.

there's many examples of similar style, so it has to have some sort of name or tag to it atleast?

Ok, I sort of understand being autistic about always using arrow functions. It's slightly shorter even if it does make code harder to read.

But why did you move my console.log off of the same line as the if statement, but then fail to add curly braces around it? Inline conditional is fine, and curly-brace-block is fine, but just indentation makes it look like a block when it's not, which is a recipe for bugs.

Also, you seemed to not even read the code, because you didn't even bother to correct my actual typos.

I think hero image/banner is the term you want, but yeah, google image search is gonna be polluted with superhero stuff. Searching for hero image banner -superhero seems to get some decent results though.

Django is my first love.

Attached: apuandpipi.png (1375x645, 421K)

Sell me on Python/Django.

great job market for it in most major cities, and it's actually pretty simple to use. Performance-wise it's not the best thing in the world, I would say, sure, but performance is not an issue when running a website, is it? Unless your site is doing tons of computing, nobody will notice the difference between a python site and a Go site.

plus, with a solid knowledge of python you can then move on to other fields and do almost anything, whereas most other wed-centered languages are pretty much restricted to web dev. What other language gives you the opportunity to do webdev, data analysis and big data, infosec, machine learning...

I'm not really an expert on the subject as I don't know a lot about other frameworks so I don't know what advantages Django has over them. But Django provides a lot of shortcuts to make make life easier (another mans bloat is another mans blessing) like generic class based views and a lot of shortcut functions if you need to build views manually. (Views in Django are somewhat comparable to Controllers in MVC I am told). The built-in templating language is pretty simple and comfy too. And as the whole thing is in Python it's easy to extend shit with mixins and what not. Forms are a walk in a park and administration is a piece of cake with the admin library. A lot of libraries also exist for it and the Django REST framework is a good tool too.

I guess the only major drawback is performance.

Attached: 618b84c7.png (819x827, 17K)

Does mobile development discussion better suit /dpt/ or /wdg/? I.e. Android/iOS

post your question already

There really isn't at all. They're just illustrations. They tend to look kind of rough because it doesn't give off the vibe that the site is trying too hard, they look vaguely human so people can relate, etc. But there's no official name for them. They're just illustrations. webflow.com/blog/illustration-trends-in-web-design-for-2018

CSS when possible. A lot of CSS animation is done on another thread and depending on the animated property, hardware accelerated.

JavaScript on the other hand is single threaded and will block interaction with the page if the animation becomes resource intensive.

With JavaScript you can add/remove the classes that are responsible for the animations.

Strings in most languages are an array/list of characters.

I don't have questions. I just want to post feels

>tfw your app is finally starting to look like a professional product and not just a cobble of screens and prototyping

Is it finally happening boys?

Attached: wojakhappy.png (400x400, 30K)

kek'd at the picture

what does your app do?

Music themed social media app. You watch music videos and connect to people across the world through instant messaging and karaoke sessions.

noice

Sounds complicated to implement

It's a video player, instant messenger, interactive map, and video calling app basically. The complicated stuff mostly is in the backend but that's not my responsibility anymore (pushed it onto the web developer with backend experience lol).

so it's an app developed by a company?

Depends on what you're using to make it. /wdg/ can probably help you with stuff if you're using Cordova, Ionic, maybe if you're using React Native or Flutter. But probably not ObjC/Swift with Xcode UI builder or Java with Android Studio.

I'm so confused. I've been trying to learn nodejs this past week, but I don't know how to make it do what I want. I have an app in react where the user types into an input field and selects options from a dropdown menu. Depending on the input it generates different images. I just want to make a shareable URL that saves all the things the user inputed into the input bar and what the selected. I'm not even sure if I need back end for this. I don't know what to search for this.

My app is a single page with one search field and one drop down list. It's really small, but I just don't know what to look up. I use a JSON to determine what images to show so all I need to do is change the text in the field as well as the selection in the url. Is that possible?

Technically a company but the LLC only has 4 employees (including the CEO).

Encode it into the URL?

>Develop a platform with laravel 5.5
>Client purchased w/o asking a hosting plan with php 5.6

>mfw

Attached: 1528063276041.png (322x235, 141K)

Any of you by Oklahoma and want to make like 50k starting?

PHP mysql jquery. Php is used procedural, oop, and cakephp.

Easiest job in the world. Geberally work 6 hours a day and no micromanaging. Take off whenever you want.

>50k for PHP mysql jquery
No wonder Pajeets are flooding this market. One day I'll get a job in a nice country too.

Attached: 1460623005667.png (1127x685, 37K)

Rent here is only 800 a month too for the bedt apartments. A mortgage isnt much more than that. Brand new builds go for about 100/sqft. Also we just legalized medical weed.

Question about foreign key constraint
CREATE TABLE `one` (
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
`timestamp` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY(`id`)
) ENGINE = MyISAM CHARSET=utf8 COLLATE utf8_general_mysql500_ci;

CREATE TABLE `many` (
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
`one_id` INT UNSIGNED NOT NULL
PRIMARY KEY(`id`),
CONSTRAINT FOREIGN KEY (one_id) REFERENCES `one` (`id`) ON UPDATE RESTRICT ON DELETE RESTRICT
) ENGINE = MyISAM CHARSET=utf8 COLLATE utf8_general_mysql500_ci;

INSERT INTO `one` (`id`, `timestamp`) VALUES (NULL, CURRENT_TIMESTAMP);
INSERT INTO `many` (`id`, `one_id`) VALUES (NULL, '1');
DELETE FROM `one` WHERE `id` = '1';

What does it actually do? From what I read, it is something about keeping the table relation linked, but from scheme above, I still can delete `one`.`id` 1.

you need a server to serve your react app obviously but after that you should be able to do all of this clientside

25 too old?

jesus what the fuck.

I learned how to code at 29, im now 30 and have a job as a software engineer.

just pick one and start

They're just to keep track of related fields across multiple tables. It doesn't make them undeletable.

By default it makes them undeletable.
You can also change their behavior to cascate, so whenever the row is updated or deleted, all the other rows with a foreign key pointing to it are updated or delete too.

What IDE do you guys use?

vim

vs code