• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Web Design and Development |OT| Pixel perfect is dead, long live responsive design

I don't know why I thought I could build a website all on my own. I'm okay at reading HTML and I'm great in e-mail land. But trying to figure out this Bootstrap stuff is tough. I'm just not used to this at all.
 

ethanny2

Member
My web site/app just got rejected from the Google Adsense program because of lack of static content,the way my site works is the user runs the program and then the data is dynamically generated through Javascript and AJAX unfortunately, this means that contextual ad programs that depend on generating ads through static content (e.g like on a blog) will always reject my application. I got accepted into this alternate program called Chitika (automatically without them reviewing my site so kinda sus) but do you guys know any other ad programs that can be used with these types of apps?

I have seen other apps on the web that have Google adsense ads and similar to my application generate dynamic content, but I heard from the grapevine that what these sites do is apply to Google adsense with a blog/static content site and then once they are accepted they use the ads on their dynamic site, is this frowned upon and if I do this can I get in trouble?
 
I don't know why I thought I could build a website all on my own. I'm okay at reading HTML and I'm great in e-mail land. But trying to figure out this Bootstrap stuff is tough. I'm just not used to this at all.

I use Bootstrap all the time, what don't you get?

Ps. I use sublime text for just about anything. Except emailings where you use tables, then it's dreamweaver.
 

Lister

Banned
I don't know why I thought I could build a website all on my own. I'm okay at reading HTML and I'm great in e-mail land. But trying to figure out this Bootstrap stuff is tough. I'm just not used to this at all.

The cool thing about bootstrpa is that you only really have to understand it at a very superficial level.

Need a button? Go to the docs, click on button, copy and paste the example. Keep reading if you need to modify something about it. It's usually explained right there.

I'm guessing the grid is maybe what's confusing you?
 
What's confusing you with bootstrap?
The fact I've only had a few hours with it. I took the latest Codecademy course on it, and I understood it a bit more from when I last did it 2 years ago

I use Bootstrap all the time, what don't you get?

Ps. I use sublime text for just about anything. Except emailings where you use tables, then it's dreamweaver.
Basically the CSS of it now. I sort of get how you make containers and put rows in them and cut up the rows how you want, but that's it. Maybe the site I'm trying to build it above my skill level.
The cool thing about bootstrpa is that you only really have to understand it at a very superficial level.

Need a button? Go to the docs, click on button, copy and paste the example. Keep reading if you need to modify something about it. It's usually explained right there.

I'm guessing the grid is maybe what's confusing you?

I'm using Dreamweaver, so the components are there and insertable. Customizing them has been a problem. I don't know where I should be making my changes.
 

GHG

Member
The fact I've only had a few hours with it. I took the latest Codecademy course on it, and I understood it a bit more from when I last did it 2 years ago


Basically the CSS of it now. I sort of get how you make containers and put rows in them and cut up the rows how you want, but that's it. Maybe the site I'm trying to build it above my skill level.


I'm using Dreamweaver, so the components are there and insertable. Customizing them has been a problem. I don't know where I should be making my changes.

1. Stop using Dreamweaver. Learn to make everything you want using pure custom built HTML & CSS starting from scratch, using bootstrap classes/components where necessary. If there is something you HAVE to use JS for then use that, but only if you have to.

2. Post images of what you want to achieve and we will help get you pointed in the right direction. If you have wireframes/mockups then post them and tell us what you're struggling with exactly.

3. Don't give up, you've got this. It might just be a case of not knowing what to ask for/search for to get the look you want to achieve. Golden rule of web development, every problem you are experiencing right now (and will ever experience) somebody else had faced before in the past and the answer is likely on stackoverflow somewhere, you just don't know how to find it yet.
 

kevm3

Member
The fact I've only had a few hours with it. I took the latest Codecademy course on it, and I understood it a bit more from when I last did it 2 years ago


Basically the CSS of it now. I sort of get how you make containers and put rows in them and cut up the rows how you want, but that's it. Maybe the site I'm trying to build it above my skill level.


I'm using Dreamweaver, so the components are there and insertable. Customizing them has been a problem. I don't know where I should be making my changes.

Stop using Dreamweaver and start doing things by hand, because you learn much more by doing it by hand. On the surface, bootstrap may seem complicated, but it's pretty much just attaching classes to different elements. Are you working through books or going through videos?
 
I really wanted to try Bootstrap for this, but I am somewhat familiar with HTML and CSS. I don't think my skills are at the level yet to build a site from scratch. At least not something as complicated as what I'm working with. This is also somewhat work-related, and I wanted to use Dreamweaver because that's what the team is more familiar with. The Codecademy course did help with the very basics and it did have me writing more if it myself.

Here is what I'm working with. I've made some elements generic because it is work-related.
FecLcIv.png

The part I'm struggling with is getting the images in the dark containers centered vertically. And then what will be difficult will be getting the floating square image in the back to actually be behind everything.
 
Here is what I'm working with. I've made some elements generic because it is work-related.
FecLcIv.png

The part I'm struggling with is getting the images in the dark containers centered vertically. And then what will be difficult will be getting the floating square image in the back to actually be behind everything.

- Vertically centering can be a pain, but if you can use Flexbox it's just behind a simple align-items/align-self/justify-content centering

- The image in the back problem is solved by having a absolutely positioned container in the back with a width of 100wv and height of 100vh and centering the image to that container. You can set the z-index property if you need to to bring the background container down.
 

kevm3

Member
Modern Dreamweaver is based on Brackets so you should be able to do things "by hand" with Dreamweaver too quite extensively.

Ahh. I remember the days when DreamWeaver was one of those what you see is what you get editors. I did like Brackets, especially the live preview feature, but mostly I use webstorm or vs code these days.
 

kevm3

Member
I really wanted to try Bootstrap for this, but I am somewhat familiar with HTML and CSS. I don't think my skills are at the level yet to build a site from scratch. At least not something as complicated as what I'm working with. This is also somewhat work-related, and I wanted to use Dreamweaver because that's what the team is more familiar with. The Codecademy course did help with the very basics and it did have me writing more if it myself.

Here is what I'm working with. I've made some elements generic because it is work-related.
FecLcIv.png

The part I'm struggling with is getting the images in the dark containers centered vertically. And then what will be difficult will be getting the floating square image in the back to actually be behind everything.

Try putting your code here so we can actually mess around with it and give you a solution:
https://jsfiddle.net/
 
- Vertically centering can be a pain, but if you can use Flexbox it's just behind a simple align-items/align-self/justify-content centering

- The image in the back problem is solved by having a absolutely positioned container in the back with a width of 100wv and height of 100vh and centering the image to that container. You can set the z-index property if you need to to bring the background container down.
Yes, Flexbox worked. That is definitely still confusing for me. I did a flexbox test on a website once and I honestly don't know how I got through it. It's was really hard and I still didn't understand the concept.

Try putting your code here so we can actually mess around with it and give you a solution:
https://jsfiddle.net/
I'll do this at the end as a sort of review of how it turned out. I'm pretty sure I'm misusing classes and other beginner mistakes. I hate being so inexperienced.

Edit: Oh forget it. I've gone on long enough and already messed it up beyond my ability to fix it.
Here's that section done to the best I could understand. https://jsfiddle.net/x4wcyuab/
 
I'll do this at the end as a sort of review of how it turned out. I'm pretty sure I'm misusing classes and other beginner mistakes. I hate being so inexperienced.

Don't worry! It will get better eventually. The most important thing is keep on coding and realizing that something could be better is the first step to learning more.
 

GHG

Member
Yes, Flexbox worked. That is definitely still confusing for me. I did a flexbox test on a website once and I honestly don't know how I got through it. It's was really hard and I still didn't understand the concept.


I'll do this at the end as a sort of review of how it turned out. I'm pretty sure I'm misusing classes and other beginner mistakes. I hate being so inexperienced.

Edit: Oh forget it. I've gone on long enough and already messed it up beyond my ability to fix it.
Here's that section done to the best I could understand. https://jsfiddle.net/x4wcyuab/

You're not letting bootstrap do the work for you and you're making things more difficult for yourself than they need to be. Always let the framework you are using do the heavy lifting for you.

I've stripped everything back for you, making use of the bootstrap grid and classes to create the basic structure for you here:

https://codepen.io/anon/pen/OgPNNb

What you need to do from here is get the background images in. You can stack the two background images on top of each other and position them where you need them to be by using the techniques outlined here:

https://davidwalsh.name/css-multiple-background

demo: https://davidwalsh.name/demo/css-multiple-background.php

Assign a class to the section tag and use that to set a height (e.g. 900px) to the section. Then get the background images in using that class and position them accordingly.

Look through the code in the codepen I've created and let me know if anything doesn't make sense to you, happy to help.
 
I'm using a proxy script to get html from an API endpoint and displaying it under my domain. Problem is, both redirects and document.write() change the URL in the window. What's the best way to get a response from another source without changing the URL so that relative links work the way I want? Iframe?
 

Tathanen

Get Inside Her!
I'm using a proxy script to get html from an API endpoint and displaying it under my domain. Problem is, both redirects and document.write() change the URL in the window. What's the best way to get a response from another source without changing the URL so that relative links work the way I want? Iframe?

Xmlhttprequest, or numerous convenience methods like jquery's $.ajax().
 
You're not letting bootstrap do the work for you and you're making things more difficult for yourself than they need to be. Always let the framework you are using do the heavy lifting for you.

I've stripped everything back for you, making use of the bootstrap grid and classes to create the basic structure for you here:

https://codepen.io/anon/pen/OgPNNb

What you need to do from here is get the background images in. You can stack the two background images on top of each other and position them where you need them to be by using the techniques outlined here:

https://davidwalsh.name/css-multiple-background

demo: https://davidwalsh.name/demo/css-multiple-background.php

Assign a class to the section tag and use that to set a height (e.g. 900px) to the section. Then get the background images in using that class and position them accordingly.

Look through the code in the codepen I've created and let me know if anything doesn't make sense to you, happy to help.
Well, your example is certainly much cleaner and easier to read and therefore more maintainable. I didn't understand the purpose of the section tag here. Isn't it almost the same as the first container?

The multiple BGs is definitely useful. I didn't know that was possible. I did want either a parallax or overlap effect with the background square image, and now I got to see both.
I also didn't know about these column offset classes. I think that's how I would make a section where I want text in the center, but not all 12 columns wide?

Another concern I have about the text box sections is how it's done with absolute pixels. I ran into the problem where one had too much smaller text, which caused that one box to be larger than the others at certain widths. And that meant the image had to be vertically centered in the box regardless of the box's height.

But you got the gutter problem solved more elegantly. Maybe because you put two boxes in a row instead of all of them in one row, which I thought would turn out better. I thought it would be easier but I really messed it up.

And finally regarding classes, it is normal to have one-off classes for single properties? That didn't feel right and it still seemed messy when I finished the page.
 

GHG

Member
Well, your example is certainly much cleaner and easier to read and therefore more maintainable. I didn't understand the purpose of the section tag here. Isn't it almost the same as the first container?

The multiple BGs is definitely useful. I didn't know that was possible. I did want either a parallax or overlap effect with the background square image, and now I got to see both.
I also didn't know about these column offset classes. I think that's how I would make a section where I want text in the center, but not all 12 columns wide?

Another concern I have about the text box sections is how it's done with absolute pixels. I ran into the problem where one had too much smaller text, which caused that one box to be larger than the others at certain widths. And that meant the image had to be vertically centered in the box regardless of the box's height.

But you got the gutter problem solved more elegantly. Maybe because you put two boxes in a row instead of all of them in one row, which I thought would turn out better. I thought it would be easier but I really messed it up.

And finally regarding classes, it is normal to have one-off classes for single properties? That didn't feel right and it still seemed messy when I finished the page.

From a markup perspective there is no difference between a section and a div tag but it's best practice to use section tags to make your code easier to read and maintain. So when you glance at your code you can immediately see "that's the hero/header section", "that's the carousel section", "that's the footer section" so on and so on. When coding your CSS you should also follow this structure and order by breaking things up with comments. So you can have a section with your "global" CSS instructions for elements that stay consistent throughout the website/page such as text sizing, colours etc and then your section specific mark up. All in all, it means that you are essentially creating your own library of reusable HTML/CSS components so that if you ever need to make a similar website or create similar sections for new websites you have code you can copy across to your new site and you're up and running a lot quicker and easier than if you had to sift through your code to figure out what everything does and figure out where one section ends vs where another one starts.

Use column offsets when you want to position column(s) horizontally and have space in between them. So in this case you have a column occupying the left side of the page but you want another element to be to the right of the page with a big gap in between them, calculate the offset required and use it to your advantage. You are correct in that if you want to centre a single column you can also use column offset which should be defined as half of the remaining amount of column width space you have out of the original 12.

You can reliably position elements using absolute and then defining the number of pixels as long as you have created a div around those elements you are positioning with a set width and/or height. Therefore there is no way the elements can move around on their own accord since the margins are "pinned" against another div with a set size. This is the most reliable way to vertically centre elements within bootstrap columns and prevent them from "floating" around at different screen sizes. Or at least it's the most reliable way I've found :) .

Always make a new row when creating a new div that you want to be on a new line. It's the way it's supposed to be in bootstrap, that way things will scale down nicely to mobile devices for you as well.

You can absolutely use individual one off properties for single classes, if you prefer to use descendants then you can as well if you feel that's a more elegant way of doing things. It ended up that way in the code above because I created just a single box for the speaker name boxes, got it looking the way it needed to and then copy and pasted that for the remaining 6 required.
 
Xmlhttprequest, or numerous convenience methods like jquery's $.ajax().
Haven't tried jQuery yet but I'm using the former for the actual request, it's just that when I write it to the document it's changing the window URL. Unless I was supposed to do something else with the response!
 

Tathanen

Get Inside Her!
Haven't tried jQuery yet but I'm using the former for the actual request, it's just that when I write it to the document it's changing the window URL. Unless I was supposed to do something else with the response!

Can you post some example code? I'd expect document.write to blow away the contents of your page, but not to change the URL.
 
From a markup perspective there is no difference between a section and a div tag but it's best practice to use section tags to make your code easier to read and maintain. So when you glance at your code you can immediately see "that's the hero/header section", "that's the carousel section", "that's the footer section" so on and so on. When coding your CSS you should also follow this structure and order by breaking things up with comments. So you can have a section with your "global" CSS instructions for elements that stay consistent throughout the website/page such as text sizing, colours etc and then your section specific mark up. All in all, it means that you are essentially creating your own library of reusable HTML/CSS components so that if you ever need to make a similar website or create similar sections for new websites you have code you can copy across to your new site and you're up and running a lot quicker and easier than if you had to sift through your code to figure out what everything does and figure out where one section ends vs where another one starts.

Use column offsets when you want to position column(s) horizontally and have space in between them. So in this case you have a column occupying the left side of the page but you want another element to be to the right of the page with a big gap in between them, calculate the offset required and use it to your advantage. You are correct in that if you want to centre a single column you can also use column offset which should be defined as half of the remaining amount of column width space you have out of the original 12.

You can reliably position elements using absolute and then defining the number of pixels as long as you have created a div around those elements you are positioning with a set width and/or height. Therefore there is no way the elements can move around on their own accord since the margins are "pinned" against another div with a set size. This is the most reliable way to vertically centre elements within bootstrap columns and prevent them from "floating" around at different screen sizes. Or at least it's the most reliable way I've found :) .

Always make a new row when creating a new div that you want to be on a new line. It's the way it's supposed to be in bootstrap, that way things will scale down nicely to mobile devices for you as well.

You can absolutely use individual one off properties for single classes, if you prefer to use descendants then you can as well if you feel that's a more elegant way of doing things. It ended up that way in the code above because I created just a single box for the speaker name boxes, got it looking the way it needed to and then copy and pasted that for the remaining 6 required.

Thanks. I will refer to this next time I have another project. And of course, practicing the concepts more can only help. Having good examples is very useful.
 
The fact I've only had a few hours with it. I took the latest Codecademy course on it, and I understood it a bit more from when I last did it 2 years ago


Basically the CSS of it now. I sort of get how you make containers and put rows in them and cut up the rows how you want, but that's it. Maybe the site I'm trying to build it above my skill level.


I'm using Dreamweaver, so the components are there and insertable. Customizing them has been a problem. I don't know where I should be making my changes.

Bootstrap is a framework that let you help build responsive website.
You don't have to know all the classes etc. I don't like the buttons for example… i actually only use the frame itself, so container > row > columns, nav and some helper classes like pull-right.
 
Took a $15 Udemy class on Angular. Figured it was worth it. I've been meaning to learn it so should be some good practice after I brush up on my Java Spring skills.
 

GHG

Member
Using bootstrap, what's the correct way to add the red and gray backgrounds to the page?

Are you sure you want a red background?

In any case, it's as you'd assign a background colour to any web page. Assign it in a CSS file to either the body (whole page) or to the div (specific parts of the page).
 
Using bootstrap, what's the correct way to add the red and gray backgrounds to the page?

Whole page
Code:
body {
 background-color: red;
}

Sections
Code:
CSS
.bg-red {
 background-color: red;
}
.bg-gray {
 background-color: gray;
}

HTML
Code:
<section class="bg-red">
  <div class="container">
    <div class="row">
      <!-- columns -->
    </div>
  </div>
</section>
 

Cptkrush

Member
Had a client at work request a quote on making their website mobile responsive about a week back, I took a cursory look at the code and layout and told my supervisor it would take about 8 hours at most. The site was built in 2014 and a few things would need to be updated and changed, and then digging through our old lazy ass freelancer's code would take some doing. I thought it was fair. I have cleaned up a few of this clown's sites before, it usually takes less time but this is a 10 page site with a lot of dumb js plugins.

Fast forward to today: Client approves, and I get to work. I start by inspecting the old site to see how the banner was put together and how I can make it scale for mobile. Whelp, I goofed by not inspecting any deeper than the surface level. Turns out our old shitty freelancer decided to set the background image as the full PSD file for the design with main text are hidden, but all of the button, header, and menu text shown. He used fixed height and width a tags to make the menus and buttons--setting the text indent on those tags to -10000px and positioned pretty much everything absolutely to match the PSD background image. The only live text on the site is in the main content section. Needless to say I am rebuilding the site from the ground up, and it's probably gonna take a bit more than quoted; thank god we still have the source psd for the design in our files.

Is this how websites were built in 2013-2014, or am I justified for wanting to strangle this old freelancer? Anyone else had to do something dumb like this?
 

Lister

Banned
Had a client at work request a quote on making their website mobile responsive about a week back, I took a cursory look at the code and layout and told my supervisor it would take about 8 hours at most. The site was built in 2014 and a few things would need to be updated and changed, and then digging through our old lazy ass freelancer's code would take some doing. I thought it was fair. I have cleaned up a few of this clown's sites before, it usually takes less time but this is a 10 page site with a lot of dumb js plugins.

Fast forward to today: Client approves, and I get to work. I start by inspecting the old site to see how the banner was put together and how I can make it scale for mobile. Whelp, I goofed by not inspecting any deeper than the surface level. Turns out our old shitty freelancer decided to set the background image as the full PSD file for the design with main text are hidden, but all of the button, header, and menu text shown. He used fixed height and width a tags to make the menus and buttons--setting the text indent on those tags to -10000px and positioned pretty much everything absolutely to match the PSD background image. The only live text on the site is in the main content section. Needless to say I am rebuilding the site from the ground up, and it's probably gonna take a bit more than quoted; thank god we still have the source psd for the design in our files.

Is this how websites were built in 2013-2014, or am I justified for wanting to strangle this old freelancer? Anyone else had to do something dumb like this?

Wait, so the site is just one giant image with absolutely positioned text all over the place on top?

Holy moly!
 

Cptkrush

Member
Wait, so the site is just one giant image with absolutely positioned text all over the place on top?

Holy moly!

Yuuuuuuup. We knew this freelancer's later sites with us were usually a lot of jpgs cut from psd files instead of live text, but this is a whole other level of insanity. I just started at this place in January, and this is the 5th site of his I've had to fix, but this is by far the worst one.
 

GHG

Member
Had a client at work request a quote on making their website mobile responsive about a week back, I took a cursory look at the code and layout and told my supervisor it would take about 8 hours at most. The site was built in 2014 and a few things would need to be updated and changed, and then digging through our old lazy ass freelancer's code would take some doing. I thought it was fair. I have cleaned up a few of this clown's sites before, it usually takes less time but this is a 10 page site with a lot of dumb js plugins.

Fast forward to today: Client approves, and I get to work. I start by inspecting the old site to see how the banner was put together and how I can make it scale for mobile. Whelp, I goofed by not inspecting any deeper than the surface level. Turns out our old shitty freelancer decided to set the background image as the full PSD file for the design with main text are hidden, but all of the button, header, and menu text shown. He used fixed height and width a tags to make the menus and buttons--setting the text indent on those tags to -10000px and positioned pretty much everything absolutely to match the PSD background image. The only live text on the site is in the main content section. Needless to say I am rebuilding the site from the ground up, and it's probably gonna take a bit more than quoted; thank god we still have the source psd for the design in our files.

Is this how websites were built in 2013-2014, or am I justified for wanting to strangle this old freelancer? Anyone else had to do something dumb like this?

Nope that's not normal, for any time period. So yes you are justified.

I'm doing a rebuild for a client at the moment and decided to completely disregard the original code, start from scratch and charge accordingly. Sometimes it's better that way, I hate dealing with ther people's shitty legacy code.
 

Cptkrush

Member
Nope that's not normal, for any time period. So yes you are justified.

I'm doing a rebuild for a client at the moment and decided to completely disregard the original code, start from scratch and charge accordingly. Sometimes it's better that way, I hate dealing with ther people's shitty legacy code.

This is what I initially told my suoervisor, and he mostly agreed but wasn't trying to charge the client for the complete rebuild, and now he regrets his decision hahaha. Neither of us truly knew the gravity of the situation until it was staring us dead in the eyes
 

hateradio

The Most Dangerous Yes Man
I'm trying to remember the name of the CSS property that displays elements inside of other elements.

Code:
.show-some-element {
    magical-property: '#some-element'
}

Will display the element with ID some-element inside of an element with the class show-some-element.

Anyone recall?
 

GHG

Member
I'm trying to remember the name of the CSS property that displays elements inside of other elements.

Code:
.show-some-element {
    magical-property: '#some-element'
}

Will display the element with ID some-element inside of an element with the class show-some-element.

Anyone recall?

If you are referring to inheritance, where .show-some-element inherits the same CSS as #some-element, then that is only possible using LESS mixins as fas as I know. So in LESS you would literally declare it as follows:

.show-some-element{
#some-element;
}

On the other hand, if you want to use CSS to do the equivalent of JS appendChild then I don't think that's possible. If I'm wrong here I'd like someone to correct me though as it would be pretty good to be able to do that sort of stuff using pure CSS. I know you can add text using the CSS 'content' attribute but adding a whole id/class? You need JavaScript for that since that's DOM manipulation territory.
 
I'm trying to remember the name of the CSS property that displays elements inside of other elements.

Code:
.show-some-element {
    magical-property: '#some-element'
}

Will display the element with ID some-element inside of an element with the class show-some-element.

Anyone recall?

Can only be done with Sass/Less.
 
I'm trying to remember the name of the CSS property that displays elements inside of other elements.

Code:
.show-some-element {
    magical-property: '#some-element'
}

Will display the element with ID some-element inside of an element with the class show-some-element.

Anyone recall?

Yeah, can't do this with vanilla CSS, only using a preprocessor like Scss/Sass or LESS, but even then it doesn't really display that element inside of your other element, but it copies the attributes from that element into your other element.

The closest thing to what you're looking for in vanilla CSS is the content: property... but that doesn't so much display an element within your element, but you can inject content using CSS. It's probably most commonly used for icons, border tricks, shapes, and other manipulations to create style-focused elements.

For instance,
Code:
.some-element {
    ...
    content: 'Hello';
}

Will put the string 'Hello' inside that element, assuming the (...) is filled with other attributes that are typical of something visible.

You could do what you're looking for with jQuery quickly using append(), appendTo(), prepend(), or prependTo()... Or "destructive" dom manipulations like .html().
 
Has anyone here used Laravel and Vue? I've been trying to figure out how a logged-in user can only see data from their end, so every user has unique data. Seems really basic, but every tutorial I've stumbled upon has always some kind of data that is updated on the homepage, with the user's name attached to it. Basically a task list, but I want every user to have heir own unique task in their profile.

Here's my code so far:

Code:
[B]api.php[/B]
Route::get('/notes', function () {
  return App\Note::with('user')->get();
});

Route::post('/notes', function () {
  Auth::user()->notes()->create([
    'note' => request()->get('note')
  ]);
  return ['status' => 'Success!'];
});

Code:
[B]User.php[/B]
public function notes()
{
  return $this->hasMany(Note::class);
}

[B]Note.php[/B]
public function user()
{
  return $this->belongsTo(User::class);
}
 

John_B

Member
Has anyone here used Laravel and Vue? I've been trying to figure out how a logged-in user can only see data from their end, so every user has unique data. Seems really basic, but every tutorial I've stumbled upon has always some kind of data that is updated on the homepage, with the user's name attached to it. Basically a task list, but I want every user to have heir own unique task in their profile.
Usually you have a route for all notes (/notes) but also a route for only the authenticated user's notes (/me/notes).
Code:
[B]api.php[/B]

Route::get('/me/notes', function () {
  return Auth::user()->notes;
});
 
No. It wasn't Sass/Less or JavaScript.

Ugh. Maybe it was a prototype setting, but you could literally set the content to be another element, all through CSS alone.


edit: https://hacks.mozilla.org/2010/08/mozelement/

Seems to be FF only.

Think the direction has shiftd since then (2010 it looks like) towards Web Components Spec and libraries like Polymer.

Unfortunately, web components still isn't really well supported even with polyfills.
 

midramble

Pizza, Bourbon, and Thanos
I'm going to post in this thread as well (as opposed the main programming thread) to be safe, though I've always figured this was more of a front-end thread. I'm back here again because I've realized yet again I am behind the curve on modern best practices for a project I'm working on.

Short of it:
Need to possibly rebuild my backend. What is the best way (framework that is) of implementing a java backend these days?

Long of it:
I have a webapp I'm building that originally is built using JSP/Tomcat Servlets. Raw JS front end with JSP and whatnot that makes calls to java servlets in the backend.

I recently updated the frontend using react/redux to get all the nice and shiny features that comes with that, though now I need to update my backend. Now I've learned that pretty much no one uses servlets anymore and I'm stuck looking for enterprise best practices for Java backend.

I want to maintain the connection as a REST api, though I want to transfer from standard forms to JSON. The backend doesn't need much rewriting, I just need to find a more modern framework to serve the backend. I've seen re-occuring themes of Play, Struts, and Spring but I don't know if these are already on the out and out or up and up. Since I'm currently a one man team, the less complicated the framework structure the better. Getting comfortable with the entire redux structure was heavy to begin with, relearning a complex backend framework on top of that will probably ruin my diet.

All that being said, am I still on the wrong path? Are JS backends the future and I should rewrite for node.js? Am I talking complete gibberish and only think I know what I'm talking about? I want to do this right, so that one day, when I can afford it, when I hire someone to help with programming or to clean up what I've done, it wont be a totally expensive, frustrating, and embarrassing cluster.
 

Zakalwe

Banned
I'm primarily focused on front end design. I build static sites for small businesses, events, etc... I'm currently building this site for my client (can only be viewed on 1080+ right now).

We're in the primary design stages so nothing's set regarding layout, but the client does want the ability to add stuff themselves.

For instance:

Add a section between the LATEST EVENTS text and the #VICTORYISCOMING footer.
Add an image to that section like the current poster.

So, the question:

Would I be able to easily WP functionality integrate what I have here? Or would a custom CMS be better suited?

Or is there some kind of JS plug-in I could use that anyone knows of?

I'm lost here as it's where my experience ends. I'll be researching myself but any help is really appreciated.
 

robox

Member
i've got a little exercise i wanna do for myself but not sure where to start. i want to rejigger the search results page of a website into something more to my liking, ie make for more efficient viewing. which tech/languages would be good for reading html, parsing it and spit it a new page for display. just pointing me in a direction would be good since i wanna learn along the process.
 
i've got a little exercise i wanna do for myself but not sure where to start. i want to rejigger the search results page of a website into something more to my liking, ie make for more efficient viewing. which tech/languages would be good for reading html, parsing it and spit it a new page for display. just pointing me in a direction would be good since i wanna learn along the process.

Beautiful Soap for Python is pretty great for that.

https://www.crummy.com/software/BeautifulSoup/

For JS I have had okay experiences with things like headless Chrome, WebdriverIO, PhantomJS and CasperJS, but BeautifulSoap is pretty complete package
 

ColdPizza

Banned
During unit testing my web API controller I noticed after about 15 tests the rest of mine started failing. There's a problem either with a sql connection pool or a app thread pool on IIS.

This lead me to start looking into asynchronous tasks from the DB all the way up to the controller and even the unit tests calling. Would this alleviate my unit test issue? It doesn't happen when I change my URL to local host.

My other thought is that I ought to be disposing of the http client after each test but that didn't change anything. Any clues?


edit: I guess I solved my own question....unless the async is happening all the way from client to db and in between, I might have these pool errors.

This set up worked for me. Was able to run 21 tests in rapid succession without bombing out.

Code:
[HttpGet]
public async Task<IHttpActionResult> TestQuery()
{
    string retString = "";

    object ret;
    string commandText = "[...edited out...]"
    try
    {
        using (SqlConnection conn = new SqlConnection(_connectionString))
        {
            using (SqlCommand cmd = new SqlCommand(commandText, conn))
            {
                await conn.OpenAsync();

                ret= await cmd.ExecuteScalarAsync();
                retString = (string)ret;
            }
        }
     }
     catch (Exception ex)
     {
         throw new ApplicationException(ex.Message);
     }

     return Ok(retString);
}

============================================================================================================================
T E S T  C O D E
============================================================================================================================

[TestMethod]
public async Task TestQuery()
{
    try
    {
        string path = await TestQueryAsync();

        Assert.IsTrue(path.Length > 0);
    }
    catch (Exception ex)
    {
        Assert.Fail(ex.Message);
    }
}

private async Task<string> TestQueryAsync()
{
    string ret = "";
    HttpResponseMessage response = await _client.GetAsync($"api/test/TestQuery");

    if (response.IsSuccessStatusCode)
    {
        ret = await response.Content.ReadAsStringAsync();
    }

    return ret;
}
 

xxracerxx

Don't worry, I'll vouch for them.
I need some help with a video. I am running into a wall on getting this video flipped and sized down to something around 4mb and still an mp4.

Any help would be greatly appreciated, after I get an mp4 it is easy for me to make the webm and ogg files, it is just this initial flip and compression that is killing me.

Video: https://www.videvo.net/video/river-water-close-up/4002/

I have a Macbook Air and have been using Handbrake, but this is beyond me.
 
Top Bottom