Dreamweaver CC (2017) Classroom in a book

[stevesculptor]

I'm about to start lesson 3 (CSS Basics) I want to run a parralel website of my own while learning from the book, at what point is it best to start this, at this point? or later?

[Nancy OShea · Accepted solution]

Work through the lessons once, twice or more to get comfortable with the concepts and coding.

Create some practice files to work with by going to File > New > New Document (select type) > Hit Create button.

When you are able to create code manually without referring to the textbook, you're ready to move on to real projects.

Nancy

[stevesculptor]

Hi Again Nancy,

RE; DW CC 'Classroom in a book' (2017 release)

Can you please clarify what seem like inconsistencies in the book and online version, the narrator distinctly says (page 150, item 7)

quote = type .row(space).nav.navbar-nav(space)>(space)li(space)>(space)a

But on the screen shots of both the book and the online images there are no spaces, as with the screen shot at the the bottom of page 151. The mouse over shows the above code without spaces.

The narrator makes a point of asking to check there are no spaces. (although some are needed)

So how much of a difference will spaces make as I am having a few issues with styling the nav bar?

Thank you

Steve

[osgood_]

stevesculptor  wrote

So how much of a difference will spaces make as I am having a few issues with styling the nav bar?

This is very opinionated but it sounds like you are dabbling in Bootstrap which is junk coding, poorly structured and conceived css.

My advice would be to learn css and html then perhaps Bootstrap if you feel its really necessary but dont start by try ing to unravel the Bootstrap css selectors because they are highly toxic to a beginner.

Spaces or no spaces are paramount to if the styling works or not. As l said the Bootstrap coding, particularly the navbar, pills etc is very poorly written requiring bloated and really unnecessarily elongated css selectors.

Stay clear of Bootstrap or any other front end framework come to that if you possibly can, youll be a better and happier coder. It may take a bit longer but the time will be well worth it.

[Nancy OShea]

I'm not convinced this is Bootstrap.  The author might be using some sort of Bootstrap hybrid though.

Assuming this is the HTML code:

<div class="row">

<nav class="nav">

     <ul class="navbar-nav">

     <li><a href+#">Link 1</a></li>

     <li><a href+#">Link 2</a></li>

     <li><a href+#">Link 3</a></li>

     </ul>

</nav>

</div>

This is the CSS Selector that targets all anchors inside lists that are inside the navbar-nav inside the nav and inside the row.

     .row .nav .navbar-nav > li > a

[osgood_]

If that is Bootstrap syntax, yes, but in the a Bootstrapless world

.navbar-nav a

would be all that is needed

[Nancy OShea]

True.  But Classroom in a Book might be leading up to a chapter on LESS or SASS.  I'm only guessing as I don't have the book.

Nancy

[osgood_]

Oh well something else 99% of developers don't need to get involved in.

[B i r n o u]

I don't think that because that you don't use it, means that developers don't need it... but I'm probably wrong... arf arf !!!

[osgood_]

Im not saying in all cases, in most cases.

Take an example, what real use is it, other than it can be used, in producing a color template for the DW editor where most seem to be built using less. Its a pointless workflow in a very  short css file. The majority of websites today use very short css files, perhaps consisting of a global css file and possibly  a specific page css file, which would not contain that much css.

On the other hand if youre working for the  UK government type of  site where there are extensive pages and extensive css there is possibly a use for such a workflow but these types of website account for very few in the real world.

You probably need to see a doctor about that nasty cough of yours...

[B i r n o u]

well that is a point, but I'm not sharing it... ... preprocessor are not only usefull fro small web site using small amount of CSS... it is really helpfull to split code into modules, and into reusable snippets

it's like having an OOP tools under hands... but I agree that OOP is not the bread of every one ... arf arf...

(some say lol.. here, in france, we are rought... we say arf arf...)

[osgood_]

You know the thing l most dislike about php is having to assign content to variables. I might have 15 to 20 variables at the top of my page, which l can never remember what l named them,  so when l need to access one of those variables lm always having to jump to the top of the page to collect or remember what l assigned to it and then jump back down to where that variable needs to be deployed. In the case of php l have no choice whereas when writing css l can just write vanilla css as and where it needs to be  deployed without having to consider which property is assigned to which variable. In a small to medium site using Less or Sass is a mental workflow to use in my opinion...

[B i r n o u]

why are you talking about PHP ?....

or why are you comparing PHP to Less/Sass ?

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

why are you talking about PHP ?....

or why are you comparing PHP to Less/Sass ?

variables - both use a similar workflow, assigning properties to variables mostly which you would store at the top of your page and mostly you can never remember what those variables attributes are, which in my opinion if you can do without is much better. I can when I use vanilla css.

Why would I wantto store padding: 0 20px 10px 0; in a variable?

I'd have to think about coming up with a descriptive variable name which may clash with something in the future so I may have to re-write it later on in the process

$paddingRight20Bottom10

I dont know even if its a good idea to store colors in variables as you can never see those colors in a SASS file

If I was at the foot of  SASS file and wrote:

background-color: $mySpecialBlueColor;

I'm not really going to know what $mySpecialBlueColor is unless I travel all the way to the list of variables, usually at the top of the page, to see the block of color next to it.

as opposed to if I was to write:

background-color: blue;

Maybe there are editors that know what color is stored in the variable and can show it as a block of color next to it but the ones I've used dont.

Do I find nesting styles easier to read that lisiting those styles long-hand, no.

But then again each to their own. Do I think code indentation is easier to read than no code indentation, or dark colored UI's/editing environment are useful to me, no.  My opinions are purely based on what I have encountered.

[B i r n o u]

I better understand your way and your approach, and, in fact, I realise that we clearly live in two differents worlds for writing code ...

well, I understand why you can't like preprocessor and oop approach (including BEM, ITCSS, OOCSS and so on...)...

Personnaly I never store any padding marging or what ever such a type of information in variables... but instead, ... I prefer store reference materials, delta values, crucial points... and I never use variable name or container labeled by the content... as you describe  $paddingRight20Bottom10 or $mySpecialBlueColor...

personnaly I would prefer some thing more based on the context of use... like $deltaPaddingReference or $generalTextColor, $titleTextColor.... but here again it is just an exemple.... because for delta and text color, I will most refer to map Module: Sass::Script::Functions — Sass Documentation

and so ... if using maps.... it will refer to $colors("title":black, "subtitle":gray,"paragraph": lightgray)... and so on... as you understand... color labels are just wrote as exemple and to make it simple, because I will prefer to use the TSL mode to represent them

plus for sure, many chances that they will also be store in an third and external map too...

when you say, that you always have to go up and down in your files to verify and read/write your variable... in fact in sass, and with the use of partials, you just have to store all your variables in a specific and dedicate file, and have this file open on the side to get and put them...

I've posted an FR two years ago in DW CAB to get a dedicated panel to store and use those variables as we did at the time of variables and binding panels for SQL informations...

nesting function are somewhere interesting worth when you have to go using directives in Sass... please let me reformulate and clarify it...

say your client want to have different declination of the same web site, or displays... say that the commercial part of the site will be based on yellow colors, the products catalog or services using a blue approach and the hotline, or technical part being green... (sure that you can decline it as you want...) ...

anyway... most of the small web site can be greedy for that...

so instead of writing 4 styles sheets, one for the common aspect + one for each declinations... you can only write one directive that will parse somes maps objects... and that will produce the entire styles sheet for you... it's really easy to maintain, easy to make evolve, and most so easy to write and create...

please if you have time, and are interested in going further on those type of application, have a look at , Understanding and using Sass – Puce et Média by, the way, if you do it, I will be interested in your feedback if it is not too much asked and if you agree...

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I better understand your way and your approach, and, in fact, I realise that we clearly live in two differents worlds for writing code ...

Exactly, mine is a simple approach, your's involves lots of complexity and multiple files, can be uneccessary based on what it is you are producing. I dont know what kind of projects you work on.

Until I fully understood coding I just used to accept what the so called 'experts' used to throw at me, until I realised their are actually few 'experts'. Those ' experts' would use convoluted workflows for producing something which should be relatively simple. Experts generally use a sledgehammer to crack a nut, because their brain is wired that way..

Extra files being open....I would like to try and avoid that if posisble. I seem t have enough files open at any one time as it is. I guess some developers like being knee deep in open files, its free world. I do a bad job of trying to avoid it - I seem to accumulate open windows very rapidly.

[B i r n o u]

I never said that I was an expert... I try to make a living when developing web site... I have only four person working here at the office, and for that we need to earn money... (I don't teach you anything on that point... isn't it)... so two ways... or we ask our client to pay expensive money for our job... or we adapt the price to the market... but so we have to work as fast as we can... and reinvent hot water or teh wheel on each step is far from our process...

now concerning the fact of opening or not files... here again... DW is so far from reality... opening file should be done directly from keyboard and short cut... have it under keyboard (or/and mouse)

again if you have some time, please, it easiest to explain it on a video instead of confusing phrase 12.18.2017-13.24.35

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I try to make a living when developing web site... I have only four person working here at the office, and for that we need to earn money... (I don't teach you anything on that point... isn't it)... so two ways... or we ask our client to pay expensive money for our job... or we adapt the price to the market... but so we have to work as fast as we can... and reinvent hot water or teh wheel on each step is far from our process...

We all do, in very different ways and according to what our clients require. After a very, very long time I guess I have personally reached a point where I think extending what I know now, apart from obviously continuously trying to build on the the main workflow I use plus keeping up to date with main-stream techniques like Flex and up and coming ones like Grid the rest for me is excess to requirement. I don't really see how it fits in with my workflow or what benefits it would bring. I've never once looked back and said 'oh I wish I had used sass or less on this project or grunt, gulp' etc so if I can do what I need to do without having to deploy more helper files then that seems positive to me.

On the other hand if you can see yourself using node, vue, angular, firebase etc - all that 'extra' stuff and it fits in with your project/workflow somehow then you should obviously learn how to deploy it.

[B i r n o u]

that what I said earlier... we have two different approachs... and that is fine... I haven't any problem with it...

sorry if you understood it differently (because I badly explained it).

when I set a web site, if I have say (30 images) I take a very small web site... once thaty have been cropped and displayed differently depending on the break point... they to go in a batch process to be tinyfied... so I like node for that purpose... with a simple save as in a specific files, it will launch the process in background that will tinyfied all images and place them on the server..

DW does'nt include such a process... so how can we handle it ... manually.. or using node .... I 've choice node

and that is only one task... developping a web site (either small) include tens of tasks... tasks that generally DW doesn't handle... so we have to find solutions...

that is only the point that I was trying to reach and arise...

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

that what I said earlier... we have two different approachs... and that is fine... I haven't any problem with it...

sorry if you understood it differently (because I badly explained it).

when I set a web site, if I have say (30 images) I take a very small web site... once thaty have been cropped and displayed differently depending on the break point... they to go in a batch process to be tinyfied... so I like node for that purpose... with a simple save as in a specific files, it will launch the process in background that will tinyfied all images and place them on the server..

DW does'nt include such a process... so how can we handle it ... manually.. or using node .... I 've choice node

and that is only one task... developping a web site (either small) include tens of tasks... tasks that generally DW doesn't handle... so we have to find solutions...

that is only the point that I was trying to reach and arise...

I dont really know what you mean by tinyfied perhaps optimised? If so why aren't you doing that at the time of cropping/resizing/saving. Every image, if done properly needs to be sized/cropped according to the area required and saved at which point you can optimise them, right?

I'm not sure how an automated upload to the server saves much time. 30 images might take a minute to upload, depending on size of course, just drop the folder on the server window and continue to do what other work needs to be done or install node to do what is a simple task.

[B i r n o u]

well , once your images are ready I mean cropped, sized, ready to be used... they are either PNG (when they need alpha channel) either JPG (just plain images)... and optimised by the Ps or whatever softwareoptimisation... which is far to be good enought....

because one can still use others algorythms that optimise them in weight... most of the time for the same visual quality one can get 60% saved... which is far from negligible... isn't it ?

so that is some process which are not include in any image editing software but can be accessible from a third party tool (I agree that you're not very supportive of using additional tools) but tool like https://tinypng.com/developers/reference/nodejs are really ... really... really usefull 'to just name one...

give it a try a see by yourself... please if you try it...https://tinypng.com/  drag and drop a png 32 bits (using a mask alpha channel)... you will be for sure surprise by results...

that why an automated task is very welcome to handle all this process...

so once all the optimisation batch is done... one still have a process to place the files on the server... and perhaps that before sending all the images in optimisation then on transfert.. one should first verify that the web site use those pictures... where ever they are... in plain HTML, AJAX request, PHP define and so on.. 

and there again automated tasks can be used for such a purpose...

and that is what node is made for... do you get the point ?

[BenPleysier]

How do you go about optimizing the images that are uploaded by the user in a CMS site?

[B i r n o u]

Compress JPEG & PNG images — WordPress Plugins

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

give it a try a see by yourself... please if you try it...https://tinypng.com/  drag and drop a png 32 bits (using a mask alpha channel)... you will be for sure surprise by results...

I know about online optimiser such as tinypng.com, along with various others, but don't feel they bring the weight down of a file significantly enough to bother about.

For instance a 37kb jpg file optimised from Photoshop is reduced to 33kb - WOW!

45K to 41k

Saving a few kilobytes will make zero difference overall. If youre that concerned about mobile bandwidth just serve 2 less images to it to cover the saving you might make, or no images, personally I'm not. You should be more concerned with the weight of the Bootstrap default css or JQuery library..........pure madness.

Well I can see why you are trying to get your images down as much as possible......you use Wordpress it seems, yet another piece of bloated code junk.

[B i r n o u]

instead of compressing small image, run from the original... not optimised images... that is the rule of pattern compression.. tha algorythm know how to optimise from big images... not from al ready small...

say it differently... take your original PSD work from there in a non destructive format ... A.PNG... now optimise for the web say A.JPG in PSD... see the weight... and now from A.PNG optimise from TINY... you'll see...

trying to gain something on a tiny compressed files want never get any result... but that is a rules for any compressor... compress a ZIP from JPG... compress a GZIP apache on JPG... you will never win anything...