/wdg/ Web Development General - How do I shot web edition

Previous:
>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] Web Development in 2018 - A Practical Guide (embed) {embed} - Web Development in 2018 - A Practical Guide [YouTube]

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

>PHP resources
pastebin.com/gfBPg24A

Attached: howdoishotweb[1].jpg (600x554, 79K)

Other urls found in this thread:

demo.rocknrolladesigns.com/wordpress/jarvis/text-slider/
pastebin.com/gfBPg24A
sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
sass-lang.com/guide
sass-lang.com
jsbin.com/fujujoqihi/edit?css,js,output
jqueryui.com/datepicker/
github.com/timhutton/sdl-canvas-wasm
socket.io/docs/rooms-and-namespaces/
developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
twitter.com/NSFWRedditImage

guise

trying to insert an image right on top of the slider like:
demo.rocknrolladesigns.com/wordpress/jarvis/text-slider/

working with this .php files:
shortcodes.php
home-section.php

no luck so far, this is WP btw
any ideas? cleared cache and everything, where the fuck is WP pulling the code from?

Attached: 1536159313483[1].png (1920x186, 27K)

the slider is like the one found:
demo.rocknrolladesigns.com/wordpress/jarvis/text-slider/

I wanna insert an image right above:


like


I've found pic related, and the bits in red is where I'd insert th mg cd

Attached: 1536162593652[1].png (1920x1080, 118K)

>mfw spent summer learning to code

feelsmehman.webm

Attached: 1524613225363.png (642x1083, 58K)

>>PHP resources
>pastebin.com/gfBPg24A

as usual, here to answer PHP Questions.

btw, i have a headache since yesterday and my gf is mad at me UwU

Repostan from /fglt/

Need a good distro for a T420 with 4GB of RAM that will be used just for web dev.

So that's a browser, text editor, libreoffice and Dropbox. If you have suggestions for lightweight software for these I would be grateful. Currently use Ubuntu with VS Code on my Desktop.

Also I'm NOT a power user, barely scratched the surface.

I hope you are still here by the time I a job in PHP/Laravel.

I'll be here almost everyday for the next two 3 weeks.
after that i will be here weekly since i have shit to do

not sure i understand what you are asking. show image of what it is and then what you want it to be

this: pic related
but I have to fuck with the WP files, find the source of it and replace it there, I've tried shortcodes.php and home-section.php and no luck

Attached: this.png (1898x901, 2.1M)

has anyone got experience with material UI? is it worth learning or am i better just using raw css and html and making my own custom components?

No worries, your info dump was already really helpful.

If I make it, and I fucking with I do, I just want to thank everyone that helped, and tell those who doubted me to choke on my dick.

There was a thing called SCSS right? it's not just SASS, right? Anyways what are good themeable CSS "frameworks"?

Attached: signal.png (256x256, 1007)

How do I easily create a website with oython flask that is accessible via the Internet. It needs to be hosted on a raspberry pi because it will be monitoring hydroponics

man the chrome extension api is disgusting as shit

Attached: 1530713514491.jpg (720x540, 46K)

Sass uses significant whitespace aka required indents, and also doesn't use semicolons.

SCSS, or Sassy CSS does use semicolons and curly braces, which makes it a superset of CSS. I.e. any valid CSS is valid SCSS. (But not all SCSS is valid regular CSS, because of the variables it uses, and other Sass features.)

They both compile to CSS, so which one you use is personal preference.

why can't I find shit googleing SCSS? All I find is SASS

what I mean is... link to SCSS? I can't seem to find it.

Does anyone here have any strong opinions on styled-components? They're teaching it in my class and I was wondering what /wdg/ thought about it.
Asked this last thread but it got archived

Learn to properly search for information without giving up after 3 minutes, mong, it's going to come in handy when you are trying to solve more complex problems, which is basically what you are doing all the time when programming.

Searching for and appreciating the difference between SASS and SCSS and ways of compiling them would be a good enough start.

sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax

SCSS is part of the Sass project as a whole, so the documentation is on the Sass site:
sass-lang.com/guide

Each code sample lets you choose between a Sass versions and an SCSS version.

>sass-lang.com
I'm completely mindfucked, is it a SASS sideproject?
I see, now I get it

so much shit for a CSS framework

I'm not sure if this is what you're asserting, but Sass/SCSS isn't a CSS framework, it's a CSS preprocessor. It just adds some features like (compile-time) variables, and precalculated math.

A CSS framework like Bootstrap or Bulma generally prescribes some structure on your site, giving you a boilerplate/base to build off of.

thanks for the correction

How do I front-end?
I know how to code and mostly I've worked with backend (PHP and Python) and databases (MySQL, PostgreSQL) stuff.
I use Javascript too but when it comes to CSS I can't do shit with it. Any good suggestions in how to get good at front?

>Any good suggestions in how to get good at front?

I'm just learning but the thing that worked best for me was actually making shit. Do some basic tutorials then start building shit.

build a portfolio site, you'll learn a ton from it, specially if you are autistic with your design choices, since I predict you must be a design brainlet I recommend you find a good portfolio of someone and copy it. You can pull the HTML/CSS from them, form them tewak it till it becomes you own. Just copy shit form people that looks good.

Apart from "just learning" HTML/CSS and extensions thereof, you should get an understanding of what constitutes good design, i.e. fields like typography.

>what constitutes good design, i.e. fields like typography
just use Raleway LMFAO, but no, seriously, being gud at this is hard man.

for text
y/n? and why

Disclaimer: I barely know anything about webdev.

I have this huge ass JavaScript file (ca. 50k lines) that gets run as an embedded web application (game UI). I'm wondering how I could go about debugging this, as the game obviously doesn't have any JavaScript debugger itself.

Also, are there any good JavaScript IDEs out there? It's a pain in the ass dealing with this many lines.

The catgirl in pic related WILL be your gf if you help me out.

Attached: 1530511220706.jpg (1280x960, 299K)

>Apply to jobs despite not finshing for kicks
>Recuirter asks what rate I want
>Spill my spaghetti and say "$22 an hour or 60k"
>$22 an hour is 42K
God damm it

What is a good way to check how well some js is supported by different browsers?

caniuse.com

What is the best JS library out there for setting up a calendar with days of the week laid out in a neat grid, week-by-week, starting from the current date

That seems to be for individual features. I was thinking something copy+paste a script, and it tells you waht wouldn't work in internet explorer 6 or whatever

Youll be fine. It's not like you'll notice the difference.

How did you fare?

Fuck it, I'm making a calendar myself

jsbin.com/fujujoqihi/edit?css,js,output

How do I get the width of each day box to be the same as each other without having to set it to a fixed px width?

>eject to install mobx
>oh shit i forgot i'm working with someone else's code
>ERROR IMPORT PATH IS WRONG
>ERROR MUST NOT USE INDEX AS A KEY
>ERROR MUST NOT USE ARRAY AS A KEY
>ERROR MUST NOT USE X,Y,Z, AND THE REST OF THE FUCKING ERRORS
>literally fucking 90 files worth of errors and my app won't compile at all because of eslint problems after ejecting
>turn off eslint but then I have no fucking formatting etc
>end up just going back and pulling the non-ejected version instead

fuck sake why can't this retard just write good code, I can't refactor all this shit

check out if this is what you are looking for:
jqueryui.com/datepicker/

>jquery
get that nasty shit out of my face

>PHP
>in 2k+18
wtf am I looking at...

I knew I was gonna get that, provide an alternative at least.

>go to free HTML/CSS class to get out and meet people
>walk in
>literally everyone has a Mac
>fuck.jpg
>pull out composition book and pen to take notes
>girl next to me looks over at me
>even teacher is wondering why I have no laptop out
>no one else even has a pen, all computers
>Teacher is late 20's qt, not fantastic but at least worth two glances
>looks directly in my eyes a few times and smiles while giving lecture
>smile back a few times and nod head
>hardly look at slides since I'm furiously writing notes
>multiple people have a document open with two bullet point lists with 3 items each
>I have multiple pages with layouts that make sense to me
>"Okay, now it's time for the fun part, we actually get to code!"
>still haven't taken out my computer
>time to whip out the beast
>unzip bag and pullout my X200T
>palms start to sweat
>fear for my life that someone is going to point to me and ask wtf is that like all the Jow Forums memes say
>no one even glances
>feeling smug and humiliated at the same time
>teacher still giving lecture and explaining tags and shit
>"And to save the document you can press command + S... or control + S if you're on a... PC."
>can hear the slight hesitation in her voice as she eyes the strong black coating of my ThinkPad
>she tells them to open Atom if they downloaded it before class or sublime
>never got the WiFi password so I just use Geany since it's what I usually use anyway
>4 people don't even have anything to code with
>one girls she needs help and asks teacher to come over
>"Well I have TextEdit, can I use that?"
>teacher somewhat taken aback but says yes
>class continues
>follow along with the teacher
>answer any question she asks the class since I'm bored as hell
>class ends and we fill out surveys to help make free class better
>I'm the last one in class since I'm trying to give constructive feedback
>"Thank you" I say with a smile and walk out
>"Good night" I hear the teacher pleasantly reply

Attached: 1530407699730.png (554x626, 634K)

>can hear the slight hesitation in her voice as she eyes the strong black coating of my ThinkPad

Attached: 1531058712609.jpg (465x600, 62K)

>>"Good night" I hear the teacher pleasantly reply
do you think she'll masturbate thinking about you tonight user?

>"Well I have TextEdit, can I use that?"
Lol, I used TextEdit for a while back when I was first learning to code. You'll get fucked over by smart quotes and a few other "helpful" features unless you explicitly turn those off.

You should write middle Earth fanfic user

Wait are you trying to debug your own code or someone else's?

If it's someone else's it's probably that big because it was minified+combined precisely to make it hard for people to debug.

If it's your own code... dude what the fuck?
I hate people using memeworks like Angular for small projects, but your use case warrants it. At the very least look into RequireJS or Webpack so you can split it into multiple files.

As for debuggers, the Chrome debuggers is just as good as any conventional one. But debugging any 50k line file will suck on any debugger for any language.

Which loonix distro are you using?

i came back just to say that my gf isn't mad at me anymore , amfjmaaùmklùmkfq i love her


also
>someone how knows nothing about php

fucking change pizzas to pizza already

redpill me on php
why should I use it over other languages like python, C#, java, etc?

look at what better designers are doing and take try to implement it in your code
i.e. go to dribbble.com and try recreating the things you see

not my web, I use it as an example since I'm working with that theme

Anyone know why changes to $_SESSION would, out of no where stop, stop updating?

Im trying to change set some session variables from json for my web app, and I create a new one and echo its contents (to test it) and nothing comes out. Even worse, when I delete another, older, session variable it does get deleted from the session temp file.

What gives?

how do i get browser history from a standalone app?

what the fuck are you talking about

You shouldn't.

I've been programming on my X62 using sway and vim on planes for months now, and not one normie has told a stewardess that I'm a terrorist. I gotta say, I'm pretty disappointed.

I don't use php but lately in my country companies started to hire people with knowledge of php and meme frameworks like Laravel.

I was asking because I haven't used it in 8+ years and i remember it was a fucking mess. What changes did php have in near a decade to the point medium and big companies are hiring php developers

you know how browsers can import preferences, history, bookmarks, etc. from another browser? do you know of any libraries that can help me accomplish this in my own app?

chrome history is stored in a sqlite database

They're both unnecessary bloat since you can just use javascript to scope and control your CSS

Which you should using SCSS syntax in styled-components or the likes thereof.

What? How is server-side preprocessing more bloat than introducing JavaScript into your styling?

Got a chip8 emulator made in C and SDL1 compiled to web assembly, and I've made a snake and sokoban game made for it using the chip8 spec that finally works on the browser

cool i wanna see that shit

I'll get this into a webm, currently the gif is like half the actual speed, and there's a beeping sound whenever the snake eats

Attached: chip8-snake.gif (757x611, 202K)

Do you want the picture to be above the slider or within the slider, sliding with the text?

...

Now you just need some sfx that don't suck haha.

lel I agree

I want to make a simple room system in node so that if you go into a room by URL such as site.com/r/myroom you can be in a chat room with other people.

What's the best way to go about this with socket.io?

Bamp

nice, guessing you did this via HTML5 canvas, right?

Yep, basically what this guy did:
github.com/timhutton/sdl-canvas-wasm
without the text, and with a black border

Nice! So you're doing it through wasm? I wanna get in to that too. I started making a canvas drawing game with typescript a while ago but got bored lol

Attached: .gif (821x615, 68K)

Yeah through wasm, I don't know much about canvas, other than using js libraries that draw to it lol, but I feel like implementing what you've got in C/C++ might be a lot trickier than what you've done in js, but if you have other ideas, go for it dude

SDL is really simple to work with, even if you have little to no experience in it or C/C++/Rust, it shouldn't take long to get into it

socket.io/docs/rooms-and-namespaces/

socket.io/docs/rooms-and-namespaces/

anyone here ever made a chrome extension?

I want the extension to click a specific button inside the webpage I'm on after I click my popup,
so (extension poput gets clicked anywhere) -> (button with id 'submit' should be triggered on the webpage)

my popup.json:

document.addEventListener('click', function() {
$("#submit")[0].trigger("click");
});

this doesn't do anything, how do I do it correctly?

a picture is worth a thousand words

man react context fucking sucks dude, why can't it just be slightly different? literally all most people want to do is have a global state store and pull from it, fuck me man

Attached: pic.png (257x127, 5K)

>using Jquery in a chrome extension

The $ you're using is a Jquery thing which I don't think Extensions support, since they I assume activate before the webpage starts. Try using queryselector or getelementbyID and see if it works.

developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Don't use jQuery for that, holy shit.

Can't you just have one single react context and use that everywhere?

What should my priorities be when preparing to look for an entry level job? Technical interview questions, adding projects to my portfolio, learning desirable skills/tech?

I found my first job at a school job fair and got it after 1 simple interview, but it was a java codemonkey position, so I feel like I don't know shit.

I'm trying to build a animated accordion with vue.js following
markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
this guide along.

The 'expand' transition works flawlessly all the time. However the shrinking only works if I trigger it really fast after expanding the element. If I wait like 3 seconds, it just snaps back close without any transition at all.

Anyone experienced that behavior before?

Attached: forlorn woods.png (1000x400, 600K)

Depends on language really.

When I got started with a python job, I had to know the intricacies of the language even down to how it works in memory, though later interviews weren't as in-depth as my first.

In terms of projects, I had really interesting, unique ones, language interpreters, compilers, coding competition solutions, even a virtual machine. Show something that looks like you didnt just copy-paste a bunch of stuff together, but had a general interest in programming

You definitely want to learn the desirable 3rd party-kinda tech that your language is involved with. Like with python, it was Django. You want to brush on the basics of each component of these techs.

the absolute state of webdev

Appreciate the reply. It's not my code.

The issue is that the game exe provides a certain environment for the JS code to run in (I believe), so it doesn't run the same in a browser as it would in the game, which is why I'd have to debug it with something embedded into the page. Wondering if that's possible.

I had a look through the file and about a third are jquery functions, then there's different namespaces annotated with @MODULE x. Would these be good to split into multiple files?

>docs say an array of items is returned in a particular field
>write some functions to handle some events
>go to test scenario
>actually fires an event and returns a singleton array for every single fucking item
>also returns an empty array at the end
what the fuck. why would you even need to use an array if you're never going to put more than one item inside it!?

What's the best way to position a small 'X' icon in the top right corner of a (already rather small) div element, as the usual 'click here and it goes away' sort of button.

you can use jquery in chrome extensions. you've got to specify it in the manifest.

to be fair, there might be a whole slew of other things in the script.

i think you need to modify manifest.json to
...
"content_scripts": [ {
...
"run_at": "document_end"
...

or one of these
document.addEventListener("DOMContentLoaded", foo);
window.addEventListener('load', foo);
window.attachEvent('onload', foo);

also depending on how the content is loaded on the site, for example, if a bunch of scripts pull shit in or it uses html5's push state, you may need to setup a function that repeats after a timeout until the element you want exists.

also from your description it seems you're displacing the action of clicking a submit button with clicking an extension icon, which doesn't seem very useful. wat do.

yeah, ofcourse I'm new to this (and webdev in general)
..what I needed to do was send a message from popup.js to content.js (because popup can't access the content) and than use document.querySelector

does the element have a title?
then flexbox it to the right of the title, otherwise position it absolute.

That worked thanks. I had to set the containing div to position:relative but I guess that does nothing on it's own.

Fuck that. No matter what happens, PHP will never get rid of its terrible reputation. I had a job in Laravel for a few months and even though it is not a bad framework at all, people have always looked down on PHP developers. Also, it's a shit fucking language.

Learn Python and Django. Especially Python will serve you well for a long time and give you some interesting job opportunities.

Ruby on Rails is great as well, but it has a very uncertain future, because it is a hipster framework, and hipsters are migrating to Express, which is shit.