Code Writer is very good, Brackets.io is even better imo.
-
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
- Thread starter gutshot
- Start date
Code Writer is very good, Brackets.io is even better imo.
I'm creating a mobile application and so need to start building a backend. I've built previous backends in PHP, but it always seemed slightly more work to do simple things than it maybe should have. Does anyone have any suggestions of backend tech/a framework that could support a networked application.
Zombie James
Banned
I'll give this a shot, though I think it's too early to move over from ST.
Don't know if this is the right thread but we have this "hacking" competition where one challenge involves implementing a successful XSS (Cross Site Scripting). There is a search field that removes ALL < and > symbols. It does not turn them into their ascii code equivalent (e.g. <
it just removes them. The inputted text is then displayed to the user after this filtering. Is XSS still possible here?
A second question is the exact same except now ALL html characters (", &, <, >, etc) are simply turned into their ascii equivalent (they are not removed). Would XSS be possible here?
Been trying to find a solution for god knows how long. Any help would be appreciated.
it just removes them. The inputted text is then displayed to the user after this filtering. Is XSS still possible here?A second question is the exact same except now ALL html characters (", &, <, >, etc) are simply turned into their ascii equivalent (they are not removed). Would XSS be possible here?
Been trying to find a solution for god knows how long. Any help would be appreciated.
With the long file paths of node js packages i was running into problems with windows when trying to copy or delete directories.
Downloaded a program called Cygwin which basically installs a small scale linux environment/terminal on a windows machine and I couldn't be happier. It works great on those long file paths that Windows refuses to deal with.
Just sharing the info for anyone else who is stuck on Windows. I'll probably never open Powershell ever again unless I run into some kind of unexpected error, but Gulp seems to work fine in Cygwin.
also much more pleasing to the eyes then Powershell.
Downloaded a program called Cygwin which basically installs a small scale linux environment/terminal on a windows machine and I couldn't be happier. It works great on those long file paths that Windows refuses to deal with.
Just sharing the info for anyone else who is stuck on Windows. I'll probably never open Powershell ever again unless I run into some kind of unexpected error, but Gulp seems to work fine in Cygwin.
also much more pleasing to the eyes then Powershell.
Don't know if this is the right thread but we have this "hacking" competition where one challenge involves implementing a successful XSS (Cross Site Scripting). There is a search field that removes ALL < and > symbols. It does not turn them into their ascii code equivalent (e.g. <
A second question is the exact same except now ALL html characters (", &, <, >, etc) are simply turned into their ascii equivalent (they are not removed). Would XSS be possible here?
Been trying to find a solution for god knows how long. Any help would be appreciated.
It really depends on the code. Without seeing it it's hard to say. In general I'd say doing that would prevent certain obvious classes of XSS attacks.
this needs to release for linux/ubuntu already... =/
Syphon Filter
Member
Do people usually make headers with photoshop,illustrator,etc instead of html and css? I usually use html and css but they look rudimentary. I also was told if you use images it will be kind of a bad idea because it can take some time to load. If i was to use photoshop it will be an image. So what is the consensus?
Thing is, you can't see the code since its server side, you just see the end result (the printed text). The only thing that actually prints the symbols (instead of taking them out altogether) is by first converting them to hex and letting the browser figure it out. But then they're just text, and not executable code so that doesn't work.
What do you mean by headers? The banner/slideshow thingy most sites have at the top of their home page? I don't see how you could make an image out of just html and css. Maybe if it was basic shapes, then there are a lot of css tricks to make circles, arrows, etc out of plain html elements, but anything more detailed then that and you'll be forced to use images wouldn't you?
Syphon Filter
Member
Yea you are right. Also how can i make the top header take up the whole width of a page? Usually i center everything but then my header is not taking up the whole top since it is in the center.
in CSS, set the header width to 100%
That can change things. If there are posts or querystring those definitely can be an avenue of attack from external pages. For instance, if the removal happens in JS before it's posted another modified page could still post bad data to it.
The rule: if the image is a photo or otherwise taken by an image sensor use an image. For everything else use CSS/HTML or SVGs.
Use percentages in your css for the dimensions. e.g. width: 100% (make sure it isnt contained within a parent element that has a fixed width or it will fill that instead of the page.)
How reliable are SVGs when it comes to browser compatibility? I've tried before and it was sort of a hassle (apparently I had to edit the code within the file?), and ultimately the displayed images was 3 times the size it was suppose to be. At that point I gave up and resorted to a png.
Syphon Filter
Member
yea i noticed the width was fixed elsewhere so i had to delete that for it can work. What if i want the content in the main page to all be centered at the same time though? Also it's a good idea to have the header width set to 100% all the time right? It just looks strange otherwise if it is just set in the middle of the page.
im having trouble with SVG's as CSS BG images in IE11. it wont repeat even when i got repeat-x. I noticed when i try to view the image in IE11 it says its a PNG. Interesting Microsoft shenanigans ;D
Hey web developer gaf
I am thinking on pulling the trigger on this theme for a service I am working on for entrepeneurs in my country, where people will get legal and accounting council, logo/web design, etc... Would this theme work for this purpose? It's a Wordpress theme btw.
http://www.elegantthemes.com/gallery/divi/
Thanks!
I am thinking on pulling the trigger on this theme for a service I am working on for entrepeneurs in my country, where people will get legal and accounting council, logo/web design, etc... Would this theme work for this purpose? It's a Wordpress theme btw.
http://www.elegantthemes.com/gallery/divi/
Thanks!
Phaethon0017
Member
I love Divi. Very robust, and ET over the years has just become my favorite easy to setup themes. With Divi I really don't feel that there's any design I can't recreate, and it makes it very easy to split-test which design is better for users.
Well that pretty much settles it. Thank you!
Set the content area to have a fixed width (usually around 960px) and then give it a right and left margin of 'auto'. This will center it in the browser.
I think a full width header looks best, yes.
ChocolateCupcakes
Member
SVG support is pretty good imo. And to change the size or position you might want to try out the viewBox attribute.
Cool, been watching this one for awhile.
Syphon Filter
Member
What is the best and most efficient way to move words around the main page? Whether its a single word or a few of them i always have a hard time moving them exactly where i want. What i do is lots of <br> tags and i know that is bad coding habits. So anyone know the best way to move words and/or images in a certain spot of a main page?
Junior Asparagus
Member
It really depends the individual case and what you're trying to accomplish. Absolute positioning is a pretty definitive way to do it, but you have to pay attention to the surrounding container. If you just want to recreate what you do with all of the <br> tags, you can just use margins on your element.
Compared to traditional books and static websites, Code School really feels like real class. I've been trying to learn Angular JS and the course was able to teach me the barebone structure of the framework (directives, custom directives, controllers, etc.) They also offer some worthy exercises after each video. I tried learning through other websites and I have to admit I'm was impressed. I just graduated from College (3 year computer science and now going for software engineering in university)
krameriffic
Member
Why is Firefox so much slower than Chrome in any intensive Javascript processing, DOM manipulation, and canvas rendering? My coworkers and I have been fighting Firefox every step of the way with the applications we are building, and I'm curious what the deal is. Firefox 24 on Linux (what I am limited to at work) is orders of magnitude slower than Chrome 28 and 35 in pretty much everything.
Syphon Filter
Member
If text is right near an image, how can i make that text move under the image?
for ex: here is some code:
[text here]
<img src="LisaMellinger.jpg" class="lisa" >
The class is to float it to the left. Right on top of the image is some text and when you view that in the browser the text is on the right side of the picture,right near the image. I want to know how i can move that text under the image? I also have another image to the right and the text moves that image around which i don't want.
for ex: here is some code:
[text here]
<img src="LisaMellinger.jpg" class="lisa" >
The class is to float it to the left. Right on top of the image is some text and when you view that in the browser the text is on the right side of the picture,right near the image. I want to know how i can move that text under the image? I also have another image to the right and the text moves that image around which i don't want.
You need to reorder them in markup.
Syphon Filter
Member
Never messed with markup. What is that?
Hypemaster
Member
Right after this <img src="LisaMellinger.jpg" class="lisa" >
Try <div style="clear:both;"></div> (or just make a class that has clear:both and put it in the div tags)
Your text comes afterwards. Let me know if it works.
He means the HTML. You need to move the text underneath the image in your editor. Like so:
<img src="LisaMellinger.jpg" >
[text here]
Removing the class will kill the float, so the image will display on its own line with the text underneath it.
You'd be better of re-ordering the markup. Show us what's the actual markup that you have.
Play around with it here: http://codepen.io/anon/pen/igajk
Syphon Filter
Member
Removing the class helps but i noticed it's not under the image but almost[on the bottom right corner of the image] It's just text thought with no heading,paragraphs,etc. So what i did was add a <p> tag to the text and that fixed it and it was spaced nicely. Is that considered bad coding habits though? Using a <p> tag just for two words? Also now my other image is at the bottom although neatly lined up. I want that image to be to the right of my other image and not under it. I can't float it to the right because it wont also move to the top so what should i do?
Hypemaster
Member
I mentioned earlier that you should use a clear:both if you want your text to appear normally below a floated image. A float will make your text wrap around your pic. To remove that effect you use "clear".
For example try this sample code and replace the pic1 and pic2 with actual pictures (I'd suggest you keep the styles in an external css sheet and not inline like I'm showing you):
<img style="float:left;" src="pic1.jpg"/>
<img style="float:left;margin-left:10px;" src="pic2.jpg"/>
<div style="clear:both;"></div>
<p> Test paragraph</p>
It will display your two pics side by side and the paragraph will be below the pictures.
Now try it without this <div style="clear:both;"></div>
See the difference?
I'm not an expert, so assume anything I say is going to be wrong, but as far as I know:
Using <p> for things other than paragraphs isn't terrible, but you want your html to be more semantic. That is, you want people to be able to guess what it is from the tag name. You can use <p>, but any block element (that doesn't have conflicting style already set) should do. If nothing else fits, <div> is the generic one to use.
As for the other issue, are you sure whatever they're in is wide enough to hold them? You may need to set a max width or something like that (though that feels like it would be bad practice, idk.) Otherwise the text seems to keep stretching it if it gets long. Anyway, if the image or something is too wide to fit, it pretty much has to go to the next line.
After some playing around and a little Googling, I came up with this. Is it the kind of thing you're going for? (Enter into the Codepen from above):
Html
Code:
<figure>
<img src="http://i.imgur.com/Po2mz0V.jpg">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae mi ultricies, aliquet nulla vel, luctus velit. </figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/Po2mz0V.jpg">
<figcaption>Lorem Ipsum</figcaption>
</figure>CSS
Code:
figure {
display: inline-block;
text-align: center;
max-width: 300px;
vertical-align: top;
}Edit: The max width, if needed at all, should probably be applied to figcaption now that I think about it. Text-align too I guess.
Syphon Filter
Member
Yea this is helpful but what if i want two separate names under each image?
Syphon Filter
Member
Hypemaster
Member
Didn't realize what you wanted were captions under each image, disregard my statements.
Syphon Filter
Member
When you guys make a site from scratch do you use html 5 layout with header,side bar,footer,etc? Or just html and divs?
go with the html5 tags: header, nav, main, section, footer, etc
your code will be more semantic
If you're content is fairly static I'd go with semantic HTML. You'll probably want to learn some of the sectioning rules so you don't wind up with untitled sections (http://gsnedders.html5.org/outliner/). For more dynamic applications you could try custom elements (see: polymer) but they aren't really mature enough to go nuts with yet.
Ninja_Hawk
Member
Hey guys, I really appreciate the help I received last time. I have some final html and css needs for a project i'm working on, since my lead programmer is busy with a lot of backend stuff. If anyone thinks they have the time to help, we can discuss compensation and further details. Just PM me, thanks!
Daffy Duck
Member
Just fired you a PM Ninja.
w1gglyjones
Member
Came here after posting for some career advice in another thread. I also signed up for a handful of web development courses on Udemy through a bundle here https://stacksocial.com/sales/the-name-your-own-price-learn-to-code-bundle
Which course should I start with? Or is there another, better resource to start with?
Which course should I start with? Or is there another, better resource to start with?
Zombie James
Banned
Getting clients is a pain in the ass...
Syphon Filter
Member
Ok. Also is it a good idea to always give the main tags id's when making a new website? for ex: header,nav,section,aside,footer,etc? And to put *{margin:0px; padding:0px;} all the time on the css file?