• 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

Zakalwe

Banned
Does anyone have any ideas about this?

I have an issue with using the vw value to size a div that's set to transition. When I scale, the scaling on the transitioned divs is delayed slightly which makes scaling messy.

Anyone know how to fix it please?

EDIT: Solved! Applying the transition to the parent elements so they all scale along with the transitioning divs.
 

tmdorsey

Member
I recommended it to WanderingWind and I'll recommend it to you, JavaScript and jquery by Jon Duckett is a fantastic book for learning the basics. I'm working through for JS& jQuery.

It's not an ebook or anything though but it's really well laid out and done, for me at least.

Cool. Just ordered it. Hopefully I can get the job reimburse me for it.
 

gutshot

Member
Hi all.
I'm still new in all this (started learning like 2 months ago). I was just wondering which one is better:

Code:
CSS:
.square1, .square2, .square3 {
	position: absolute;
	top: 0;
	bottom: 0;
}
.square1 {
	background-color: #FF6161;
	left: 0;
	right: 66%;
}
.square2 {
	background-color: #4F953B;
	left: 33%;
	right: 33%;
}
.square3 {
	background-color: #0076FF;
	left: 66%;
	right: 0;
}
HTML:
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>

OR
Code:
CSS:
.square > div {
	position: absolute;
	top: 0;
	bottom: 0;
}
.square > div:nth-child(1) {
	background-color: #FF6161;
	left: 0;
	right: 66%;			
}
.square > div:nth-child(2) {
	background-color: #4F953B;
	left: 33%;
	right: 33%;			
}
.square > div:nth-child(3) {
	background-color: #0076FF;
	left: 66%;
	right: 0;
}
HTML:
<div class="square">
	<div></div>
	<div></div>
	<div></div>
</div>
Or is there a better method of doing this? Both are inside a container with relative positioning and fixed height.

I would go with the first, but I'd probably give each div a class of "square" and target that in your first bit of CSS instead of doing .square1, .square2, .square3.
 

Somnid

Member
Hi all.
I'm still new in all this (started learning like 2 months ago). I was just wondering which one is better:

Or is there a better method of doing this? Both are inside a container with relative positioning and fixed height.

First one is better. I'd generally avoid styling raw elements simply because it's less flexible to change (like if you needed an extra div/span do deal with wrapping or fonts or something you don't want it already styled). In general, use lots of classes, use ids sparingly or not at all, don't use direct descendants unless you have a very good reason, don't nest deeply, never be afraid to make more classes if you can't target like you want. BEM can help to keep those classes under control (though it has it's own problems with really long and ugly names it does at least enforce consistency rules). Once you get a feel for things, look at SASS or LESS which are indispensable for modern web projects and solve a lot of common problems with code reuse.
 
Hi all.
I'm still new in all this (started learning like 2 months ago). I was just wondering which one is better:

Code:
CSS:
.square1, .square2, .square3 {
	position: absolute;
	top: 0;
	bottom: 0;
}
.square1 {
	background-color: #FF6161;
	left: 0;
	right: 66%;
}
.square2 {
	background-color: #4F953B;
	left: 33%;
	right: 33%;
}
.square3 {
	background-color: #0076FF;
	left: 66%;
	right: 0;
}
HTML:
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>

OR
Code:
CSS:
.square > div {
	position: absolute;
	top: 0;
	bottom: 0;
}
.square > div:nth-child(1) {
	background-color: #FF6161;
	left: 0;
	right: 66%;			
}
.square > div:nth-child(2) {
	background-color: #4F953B;
	left: 33%;
	right: 33%;			
}
.square > div:nth-child(3) {
	background-color: #0076FF;
	left: 66%;
	right: 0;
}
HTML:
<div class="square">
	<div></div>
	<div></div>
	<div></div>
</div>
Or is there a better method of doing this? Both are inside a container with relative positioning and fixed height.

Both ways are fine though I'd probably go for the first way with some modifications.

I'd create a class called something like .square and define all similar attributes with that class. And then add custom attributes to separate classes.

Also I don't know if the second example would really work with that markup because child elements don't necessarily (or even usually) inherit rules from their parent elements, unless they're specifically told to use "inherit" to over-ride the computed style.
 

Zakalwe

Banned
Any tips for improving google search result positioning?

I've been told having blog posts is good. I've added a blog section to my homepage.

Also that spreading links to your site around the internet boosts it a good deal. So having friends link via their blogs/sites/profiles, etc...

I've got meta tags for each page.

Anything else I should be doing?
 
Something important to remember with search engine optimization is that Google is trying to provide a service to give the best possible results for a person trying to find something. If you have a well respected domain (also called "Domain Authority") and you have relevant content to a search, you will perform very highly. Trying to "game" Google or trick Google into giving you better performance will almost always result in you performing worse. Google makes its bread by providing relevant search results, and people who work to cheat Google end up getting punished.

You're not going to get high domain authority, so that's out. Your friends linking your content is okay, but it's best to just let that happen organically. Google can penalize and blacklist domains that seem like they're spamming, and it's always a risk to ask somebody to link to your content because you don't know if that domain will get blacklisted. It's best just to let that happen organically, e.g., you have a good resource for somebody, somebody shares it on their site, and that's an organic link to your content. If someone links your website and says "Check out my friend's website!" That will have no positive impact on your domain authority.

With domain authority out, the key is having relevant content, and then you can follow other tips. You want to write content based on how you want people to find you. So, if you want people to find you because you're a Web Developer from Boca Raton Florida, write your content around that. Densely populate your content with those terms, and do not over-do it in length on any pages.

Starting with a blog is a good idea because it lets you write content that can be densely populated with search phrases on a single page. After writing content, consider the search phrases you might want to attract, and then focus your content around those phrases. Part of the search algorithm is based on density to other words, which is to cut down on people cheating by just dumping search phrases onto a page. Although the way your homepage is setup is worse for search relevancy. You can have a blog index on your homepage, but try to target specific content and create new leaf pages with that content. Putting all of the content on a single page will cause the content to compete with one another and your search density to drop. Blog index pages typically perform much worse than individual detail pages in search, when all other things (like domain authority) are equal.

After content relevancy and density, you have your meta information, whcih is mostly just the page title these days. You want to have your page title lead with the search title of the content. Don't have it lead with your website title. So, something like, "JavaScript Development in Boca Raton Florida - Tetris for Kicks," will be more effective than "Tetris for Kicks - JavaScript Development in Boca Raton Florida." Currently, your page title is horrible for SEO. If that little triangle appears in a search, nobody will click on it, and Google might even block it for being a non-standard character. But, if you're trying to establish a brand and don't care about search, maybe the Triangle achieves that. It's just a big detriment to search visibility.

Meta description has no affect on search placement (today) but it does have an effect on the likelihood of someone to click into your content if it appears in search. This is how you can target the page to a user... Something clear and concise for what might get somebody to come to your page versus going somewhere else.

Meta keywords do nothing, and may be net detrimental, so don't bother. Some other search engines might still use them but increasingly they're being dropped.

Things to avoid:
  • Link spamming. Don't bother
  • Link sharing/networking . Don't bother
  • Cheating by whitelisting phrases (e.g., dumping 10,000 words into your page and making them color: #fff, or the same as your background)... Google will drop your domain completely.

Most importantly though, remind yourself: Google is trying to find the right resource that someone is looking for. If your site doesn't provide a resource to someone, then it's not going to perform, and it also shouldn't.
 

Copons

Member
Most importantly though, remind yourself: Google is trying to find the right resource that someone is looking for. If your site doesn't provide a resource to someone, then it's not going to perform, and it also shouldn't.

I'm not in any way a SEO expert, but I did some crowdworking jobs mostly to rate if Google results were relevant for a given search query, and if the results were good enough.

so yeah, basically Google works exactly like you would imagine: you ask for something and a battalion of underpaid people do your search for you and give you the results back. :D

The guidelines for rating were very strict in a lot of ways (ie. stricter than the Bing ones, as I got to check them too).
Something that we were basically obliged to check everytime was if the results hid keywords somewhere (like Albatross said, same text and background color), if the content was original (no copying, you can get away with once or twice, but eventually a tester will find out), and many other, more obvious, things like if a site is a scam and whatnot.

Sure, this kind of test is just a refinement of what the algorithm already filters, but what's important is that Google mostly doesn't care about anything but the relevance of your content for a given query.
 

Zakalwe

Banned
I'll look into all of the above, thank you both.

I'm not really ready to push myself yet anyway, just thinking for the future/wanting to understand it more.
 

TheSeks

Blinded by the luminous glory that is David Bowie's physical manifestation.
Nobody here is using Atom as a text-editor?

I'm trying to figure out why my custom CSS won't show up in the live-preview (CTRL+Shift+M) mode even if I save and "reload" the page.

So I guess I should ask: What is the best text-editor that doesn't cost a thing and allows C/Javascript/HTML/CSS/et. al. coding with HTML/CSS "live-page" preview support if not atom?
 

Haly

One day I realized that sadness is just another word for not enough coffee.
Brackets is very good.

I'm partial to Atom. I don't use the preview function, though. My setups usually are a browser with live-reload and some kind of watch runing on m files.
 

WanderingWind

Mecklemore Is My Favorite Wrapper
Nobody here is using Atom as a text-editor?

I'm trying to figure out why my custom CSS won't show up in the live-preview (CTRL+Shift+M) mode even if I save and "reload" the page.

So I guess I should ask: What is the best text-editor that doesn't cost a thing and allows C/Javascript/HTML/CSS/et. al. coding with HTML/CSS "live-page" preview support if not atom?

It really is Brackets. I went through a phase where I really, truly used all of the ones available. Brackets has all the extensions, it's the easiest to install extensions on, it has the easiest to use live preview function and it was the one that had the least amount of bugs/errors/memory leaks of the ones I tried.

Sublime is nice, but a pain in the ass to get set up and its support record is spotty as fuck. Atom, as you just realized, was the buggiest. CoffeeCup was old as shit. There was one other I liked a lot, but it crashed on me and it didn't autosave so I lost - what was admittedly a test project - so I deleted it from the computer and apparently my memory.
 

TheSeks

Blinded by the luminous glory that is David Bowie's physical manifestation.
Atom, as you just realized, was the buggiest.

I don't think it's "buggy" at least from my casual use. But I'm not sure if my HTML/CSS is valid or what if it's not actually showing me a background on the live-preview.

What's frustrating me is that I'm trying to code this for CodePen where even putting "valid" code apparently cuts off text and doesn't actually have the damn preview window there actually pad things out like it should be. So I'm not sure if it's either of these or me or what.

Guess I'll try Brackets out.
 

WanderingWind

Mecklemore Is My Favorite Wrapper
I don't think it's "buggy" at least from my casual use. But I'm not sure if my HTML/CSS is valid or what if it's not actually showing me a background on the live-preview.

What's frustrating me is that I'm trying to code this for CodePen where even putting "valid" code apparently cuts off text and doesn't actually have the damn preview window there actually pad things out like it should be. So I'm not sure if it's either of these or me or what.

Guess I'll try Brackets out.

I mean, those are bugs you're describing. That pretty much matched my experience. lol I know others swear by it though.
 

Haly

One day I realized that sadness is just another word for not enough coffee.
Are your styles in-line? Atom's preview can't do anything like link your html with your CSS as far as I'm aware. It renders the file you give it and that's it.
 

TheSeks

Blinded by the luminous glory that is David Bowie's physical manifestation.
I mean, those are bugs you're describing. That pretty much matched my experience. lol I know others swear by it though.

Oh, well. I started with CodePen for this project since that's how I'm supposed to submit the thing. I saw that it wouldn't actually "pad" or put my text in the live-preview on it as it should. So I started to use Atom thinking it was my CSS/HTML or something fucking it up.

This whole project for FreeCodeCamp is doing my head in. I know what I need to do, but the actual preview and stuff like Font-Awesome not showing up on certain things unless you do a work around (despite loading Bootstrap in the options of CodePen, it won't do FA unless you outside link the .css file. WTF?) for it.

SO FRUSTRATING.

Are your styles in-line? Atom's preview can't do anything like link your html with your CSS as far as I'm aware. It renders the file you give it and that's it.

No, it's internal
Code:
<style></style>
so I can rip that CSS out to put in CodePen's CSS area after.
 

WanderingWind

Mecklemore Is My Favorite Wrapper
Probably a dumb thing to point out, but make sure there isn't any JQuery/JS framework or Boostrap/CSS framework that is actually powering it.
 

Haly

One day I realized that sadness is just another word for not enough coffee.
I'm testing it right now and it works for me.

Code:
<!DOCTYPE html>
<html>
  <head>
    <style>
      .foo{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="foo">test</div>
  </body>
</html>

The live preview gets updated as I type. I don't even need to save the file.
 

TheSeks

Blinded by the luminous glory that is David Bowie's physical manifestation.
Probably a dumb thing to point out, but make sure there isn't any JQuery/JS framework or Boostrap/CSS framework that is actually powering it.

In CodePen? Or the editor? As it is, I have to leave that link to Bootstap within CodePen to get the Awesome-Font icons to even showup in the project.

I just installed Brackets and it's Live preview is showing what I need despite opening a Chrome window, so that's a start. At least I know now it's Atom's weird function of not rendering stuff as written. Is there anyway to have that Chrome window show up within Bracket's itself as a split view to where I can open/close it without it opening a whole new Chrome window/process for itself?
 

WanderingWind

Mecklemore Is My Favorite Wrapper
In CodePen? Or the editor? As it is, I have to leave that link to Bootstap within CodePen to get the Awesome-Font icons to even showup in the project.

I just installed Brackets and it's Live preview is showing what I need despite opening a Chrome window, so that's a start. At least I know now it's Atom's weird function of not rendering stuff as written. Is there anyway to have that Chrome window show up within Bracket's itself as a split view to where I can open/close it without it opening a whole new Chrome window/process for itself?

Mind posting up a link to the CodePen? As for what you're looking for, Petrip is the Brackets Master, he knows all the good extensions.
 

TheSeks

Blinded by the luminous glory that is David Bowie's physical manifestation.
Mind posting up a link to the CodePen? As for what you're looking for, Petrip is the Brackets Master, he knows all the good extensions.

Well, I've been rewriting the entire thing to try to get a navbar since I'm rusty. I know what the project/assignment wants. Just not sure about the way there and the whole livepreview fucking about has thrown me off. Anyway~

Code:
<!-- Took out links -->


I'm testing it right now and it works for me.

Code:
<!DOCTYPE html>
<html>
  <head>
    <style>
      .foo{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="foo">test</div>
  </body>
</html>

The live preview gets updated as I type. I don't even need to save the file.

That works for fonts. But if you throw in:

Code:
 body {
background-color: white;
}

atom won't see it. Brackets will apparently see it just fine because it opens Chrome itself and not a live-preview within the application. So... *shrug* Brackets: 1. Atom: 0.
 

grmlin

Member
I use brackets like notepad with single files.

For real work it's still PHP/Webstorm.

Atom is a mess every time I give it a try. Crashes a lot and gets very unresponsive in bigger projects.
 

Haly

One day I realized that sadness is just another word for not enough coffee.
atom won't see it. Brackets will apparently see it just fine because it opens Chrome itself and not a live-preview within the application. So... *shrug* Brackets: 1. Atom: 0.

Ah, I see it. Yeah, it's probably because the internal CSS (the UI is built on CSS/HTML) is overriding your background. Kind of silly behavior to be honest.
 

WanderingWind

Mecklemore Is My Favorite Wrapper
Yeah, at least for a long while yet, I'd suggest staying with Brackets. Just based on what you're currently working on, it should be a big help.
 

Nelo Ice

Banned
Going to recommend Brackets as well. It's my text editor of choice and I can't afford or justify something like an IDE anyway lol.
 
Going to recommend Brackets as well. It's my text editor of choice and I can't afford or justify something like an IDE anyway lol.

Nitpick: Brackets (and Atom and VS Code) are IDEs by definition though. It's understandable how other code editors would like to distinct themselves from the likes of Netbeans and Eclipse though by calling themselves code editors or even text editors. :p
 

Nelo Ice

Banned
What do you mean with "you can't justify something like an IDE"? Do you code for a living?

I'm trying to break into the tech industry and am broke as fuck while doing so lol. So yeah would love to try something like webstorm or any of those editors with all the features I probably don't understand yet but can't justify it in my current situation.

Nitpick: Brackets (and Atom and VS Code) are IDEs by definition though. It's understandable how other code editors would like to distinct themselves from the likes of Netbeans and Eclipse though by calling themselves code editors or even text editors. :p

Ahh ic. Yeah i've only tried any free IDE then. Haven't seen how the other editors work aside from seeing them in talks and presentations.
 

Somnid

Member
I'll put my vote for Atom. Definitely my favorite, does just enough but not too much, doesn't cost a thing, easy to extend. Use something like live-reload as part of your build process if you need instant feeback on styles.
 

Haly

One day I realized that sadness is just another word for not enough coffee.
My only real complaint right now is that I want to use Atom for commit messages and it just chugs like a motherfucker getting a new window open during a commit.

Also the way it handles linter messages, it could be ages before I actually see where the errors are and I need to "jiggle" it to get it up and going and sometimes I just get spammed by errors repeatedly because this or that is missing from the lintconfig.

So in hindsight it has its issues. Maybe I'm just being stubborn about it.
 

Copons

Member
Atom user represent, yo!

After being a long time Sublime fan, I fully switched last year and I didn't regret at all.
Still have Sublime installed for a couple of things (ie. to open the 10K lines files I have to use at work), though.



Speaking of something completely different.
I just noticed on MDN that Object.observe is deprecated and is being removed from browsers and it suggests using Proxy instead.

Now, what I'm currently doing (for fun!) is trying to replicate a one-way data binding but it seems that I actually have no idea of what I'm trying to do.
ie. at some point I had a class structured like this:
- a change text method that changes the text and emits a custom event
- a render method that creates an element with a text, attaches to it a listener to the aforementioned event, firing the following update method
- an update method that, well, changes the textContent of the element

Now, it looks like a clusterfuck likely solvable by Proxy, but I can't seem to find a best practice kind of thing about proxies.
How would you approach this thing in ES6?
 
I use Sublime. For me it has a good mix of reliability, performance in large projects, and easily managed extensions. I'm still routinely impressed when I open a project from years ago and my state is maintained exactly, even down to temporary files that I was using just to jot notes.

I'm glad that Adobe has pushed Brackets and gotten serious with web development, but I don't think I could learn a new editor again.

Also, for live reload, I have that setup via gulp with a watch.
 

Somnid

Member
Atom user represent, yo!

After being a long time Sublime fan, I fully switched last year and I didn't regret at all.
Still have Sublime installed for a couple of things (ie. to open the 10K lines files I have to use at work), though.



Speaking of something completely different.
I just noticed on MDN that Object.observe is deprecated and is being removed from browsers and it suggests using Proxy instead.

Now, what I'm currently doing (for fun!) is trying to replicate a one-way data binding but it seems that I actually have no idea of what I'm trying to do.
ie. at some point I had a class structured like this:
- a change text method that changes the text and emits a custom event
- a render method that creates an element with a text, attaches to it a listener to the aforementioned event, firing the following update method
- an update method that, well, changes the textContent of the element

Now, it looks like a clusterfuck likely solvable by Proxy, but I can't seem to find a best practice kind of thing about proxies.
How would you approach this thing in ES6?

If you use a method to change things then it doesn't matter just update things directly when it's called. Proxies are more for keeping things in sync with a raw object as the model. Essentially you give the consuming code a proxy to an object. They do all their magic as if it's a regular object and you use proxy traps to intercept what they are doing and makes updates to your view. At the end of the trap use a call to Reflect to perform the requested operation so it's seamless to the user. You can also look at what I did in my data-binding library https://github.com/Somnid/bndr/blob/master/js/bndr.js. The proxy code starts around about line 150.
 

cdyhybrid

Member
Looking to give myself a crash course/refresher on PHP and Javascript - what tutorials would you guys recommend? I know there are links in the OP, just wondering if any particular one is preferred for those subjects.

Edit: On topic - Atom user ;)
 

Copons

Member
If you use a method to change things then it doesn't matter just update things directly when it's called.

Yeah, wow... this actually does make a LOT of sense. :D

I guess when I tried to figure out how Angular or React manage this thing, I started getting super confused and overcomplicating everything.


Proxies are more for keeping things in sync with a raw object as the model. Essentially you give the consuming code a proxy to an object. They do all their magic as if it's a regular object and you use proxy traps to intercept what they are doing and makes updates to your view. At the end of the trap use a call to Reflect to perform the requested operation so it's seamless to the user. You can also look at what I did in my data-binding library https://github.com/Somnid/bndr/blob/master/js/bndr.js. The proxy code starts around about line 150.

Thanks, I'll give it a look as soon as I wake up properly!
 

grmlin

Member
Yeah, wow... this actually does make a LOT of sense. :D

I guess when I tried to figure out how Angular or React manage this thing, I started getting super confused and overcomplicating everything.




Thanks, I'll give it a look as soon as I wake up properly!

React does not do any object observations at all, it diffs new virtual dom vs old virtual dom in a very efficient way and updates the parts that changed.
 

Daffy Duck

Member
What are the go to plugins for Brackets?

I'd be mainly focused on the PHP/JS/jQuery side of things if I was quickly editing a page.
 
What are the go to plugins for Brackets?

I'd be mainly focused on the PHP/JS/jQuery side of things if I was quickly editing a page.

Some of my favorites and couple of recommendations for you as an PHP dev

brackets-file-tree-exclude https://github.com/zaggino/brackets-file-tree-exclude

- You will need this. It can be used to filter out folders (usually third party libraries and temp-folders and such). For example if you work with PHP use it to ignore your "/vendor" folder. Otherwise Brackets will get performance crushed.

brackets-php-smarthints https://github.com/Brackets-PHP/Brackets-PHP-SmartHints

As an PHP dev you'll want this

brackets-eslint https://github.com/zaggino/brackets-eslint

Brackets has linting built in but the default linter is still (for a while) JSLint. ESLint is better in every way.

funcdocr https://github.com/Wikunia/brackets-FuncDocr

Automatic code completion for JSDoc/PHPDoc style annotations

brackets-icons https://github.com/ivogabe/Brackets-Icons

Filetree icons!

(Disclaimer: I made this but I love it) name-a-project https://github.com/petetnt/brackets-name-a-project

- Better project names for your projects
 

Daffy Duck

Member
Some of my favorites and couple of recommendations for you as an PHP dev

brackets-file-tree-exclude https://github.com/zaggino/brackets-file-tree-exclude

- You will need this. It can be used to filter out folders (usually third party libraries and temp-folders and such). For example if you work with PHP use it to ignore your "/vendor" folder. Otherwise Brackets will get performance crushed.

brackets-php-smarthints https://github.com/Brackets-PHP/Brackets-PHP-SmartHints

As an PHP dev you'll want this

brackets-eslint https://github.com/zaggino/brackets-eslint

Brackets has linting built in but the default linter is still (for a while) JSLint. ESLint is better in every way.

funcdocr https://github.com/Wikunia/brackets-FuncDocr

Automatic code completion for JSDoc/PHPDoc style annotations

brackets-icons https://github.com/ivogabe/Brackets-Icons

Filetree icons!

(Disclaimer: I made this but I love it) name-a-project https://github.com/petetnt/brackets-name-a-project

- Better project names for your projects

Excellent, thank you, I'll check them all out.
 
Top Bottom