1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Should I learn Wappler instead of learning to code manually??

Discussion in 'HTML & Website Design' started by Gary-SC, Jun 3, 2019.

  1. #1
    I might have hit the jackpot here: https://wappler.io/features/

    I came across totally by accident today as I explored various tools to save time in coding. I've been struggling in learning to code, but now I'm beginning to wonder if I should just learn to use Wappler instead. Their features page looks very promising! It's like Webflow on steroid! Maybe this thing could turn me into a full-stack developer, not just a web designer building web pages, in one-tenth of the time other traditional developers spend.

    I love the idea of saving time and brain power with tools, but I admit that my skeptic side can't help thinking it sounds too good to be true. Do anyone here know anything about the pros and cons of Wappler website builder? I really want to know for sure because I would rather not waste my time struggling to go through all those tutorials out there and countless numbers of different technologies and frameworks if I can drag and drop my way out of it with Wappler. I don't want to be a Luddite. But, is it really a hidden gem of web development?
     
    Gary-SC, Jun 3, 2019 IP
  2. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #2
    Go read what I wrote about your last idea. Same thing applies here.

    You can either learn to code, which can be useful on computers for the rest of your life. Or you can take the shortcuts and relearn them every time you switch platforms.
     
    mmerlinn, Jun 3, 2019 IP
  3. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #3
    Yeah, ok I saw that just now. I kind of see your point there, but don't you think it takes a bit longer to type "<div class="wrapper"></div>" than dragging and dropping a "<div>" icon from a palette to a design canvas? I'm not sure what the difference is as long as I know both of them are "<div>" and know what it does.
     
    Gary-SC, Jun 3, 2019 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    To begin, coding is the least time consuming part of web development. Further, every time you touch the mouse, it slows you down. For a simple example, use your own; you manage to move the pointer to the div element. Is the class already there? If so, how long is the menu for the various classes? If not, you still need to go back to the keyboard. Now move the pointer to where you need to type. Every thing you do with the mouse is a speed slap-down.

    One other thing about 'helper' apps, if the app's developer set up what you want to do, it seems easy once you know where everything is. If the developer did not set up, or buried what you want to do in drop-downs, it's damned near impossible.

    Then you have the stupid which @mmerlinn mentioned, needing to learn a new API for each new shiny bauble.

    gary
     
    kk5st, Jun 3, 2019 IP
    mmerlinn likes this.
  5. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #5
    I can see that. I would rather use Ctrl + C for copy, Ctrl + V for paste, and so on, than doing those things via the menu. But I'm not convinced it's always the case. I often see developers selecting a block of text with their keyboard shortcuts, but I find it mentally taxing to do so.

    But isn't memorizing keyboard shortcuts and command line commands more mentally taxing than selecting from the menu?

    I don't understand this one. Don't I just have to find that menu item in the drop-down menus? I can always figure out the GUI simply by exploring menus. It's dammned near impossible for me to figure out command line tools and things like why some CSS Flexbox isn't doing what I want it to do.

    How is that different, though, from learning new versions of HTML/CSS specs? More than a few tutorials said coding was about continually learning and keeping up. I suspect that Wappler might help in that.
     
    Gary-SC, Jun 3, 2019 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    They do it because, as I've seen in supporting studies, it's an order of magnitude faster. (I'm assuming you're a touch typist. If you're not, you'll be slow no matter which you use, a mouse or a keyboard.) Compare: Select, say a paragraph, with the mouse. Now mark do it via keyboard. (In my editor, that's M-h. {M stands for Meta which is Alt or Esc}) Which is quicker and easier?

    No. You don't try to memorize everything. You use various commands or kb shortcuts as you need them. There aren't that many that you actually use for the most part. The ones you do use, you will automagically remember. Oth, with the mouse, you will always have to repeat the steps through the menu(s).

    The manual for my editor runs 655 printed pages. That does not include the sub manuals that delve deeply into specific modes, e.g. Calc-mode which is very roughly the embedded spread sheet mode, the Ediff manual which covers using Emacs's three-way diff mode, Org-mode which keeps things organized and Elisp which covers modifying and extending capabilities. Then there are the 3000+ plugins, which someone, somewhere wrote because they solved an issue that they or their company wanted solved.

    I've been using Emacs for 20+ years, with occasional forays into other editors. Nearly all were difficult to use without a mouse, and if you wanted to alter their methods, you're mostly SOL. So how many kb commands have I memorized? I doubt that I use more than a dozen in any significant way.

    And if that menu item doesn't exist? Or, is buried in a long list of choices? Your speed drops to zilch.

    CSS has become more than a simple declarative presentation language, and you'd better just learn it or be shackled by the clowns who write really sloppy crap. (Damnit, I just wanted to transpose two words and had to go to the mouse to select one word, cut it, move the the mouse pointer to where I wanted it and paste. In my editor, I'd have put the cursor between them and typed M-t.)

    HTML and CSS are backward compatible. You don't really have to learn anything new. HTML3.2 still works if you're silly enough to write that stuff.

    gary
     
    kk5st, Jun 4, 2019 IP
  7. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #7
    @kk5st

    I will have to do my homework and experiment with your approach in light of your post. I've seen some cheatsheet for text editor keyboard shortcuts, but I've never bothered to practice or memorize any of them. I am willing to give it a fair try. It might take a while, though, to figure it out.
     
    Gary-SC, Jun 4, 2019 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    If you think that tool has merit, I think you have a LOT to learn about websites.

    The first thing to do is look for an example of what it makes -- thankfully right there on its home page it says "Made in Wrapper" -- so we can use its homepage and a few subpages to perform an analysis of the end result. A result that to be frank shouldn't impress anyone with actual knowledge in the topic of web development.

    First off, the home page is an epic /FAIL/ at web design. Goofy bloated background video filled with stock images? Way to impress a five year old with fluff and filler. I'm not rocking a 1440p display to have barely even a sentence of text marketing blurb with anything resembling actual content pushed clear off the page. Its' a stunning example of flash over substance, and reeks of a print media marketing exec thinking they can flex their muscles on the web.

    The fonts across the entire page are painfully large, as is the whitespace, meaning they are trying to compensate for an actual LACK of "content of value" -- which is clearly mated to marketspeak double-talk. In fact, their use of the seven propaganda techniques is so crafted as to automatically set off the BS alarm of anyone trained to recognize them.

    Likewise the red on grey is far below legibility minimums, meaning even for their own site for the most important "call to action" link, they've made it near invisible to a lot of visitors. This and several other parts of the page makes one question if they've ever even HEARD of the WCAG and speaks volumes to their LACK of qualifications to build websites.

    An attempt at keyboard or alternative navigation shows one thing I'll give them credit for -- somehow even though they brag about using bootcrap, they ALMOST have a logical document structure. It does let me get around the page well, though the elements focused indicate that the attempt is likely marred by bad practices.

    It is painful to watch load here, given the high ping times I have here in New Hampshire it is likely the site is built from just too many separate files... since even the bloated background video (that's too large a file to have any business as part of a site template, and adds nothing of value to the content) shouldn't be adding that much impact since it can stream during load/render.

    Attempting to determine the file structure we're limited to using a waterfall instead of the normal analysis tools, this indicates they've used scripting to intentionally block things like FF's pie-charts and cache-empty vs. cache-full functionality... a sleazy practice either done by mistake (broken scripting on their part), or intentionally and with malice.

    But using the waterfall it's 123 separate files totaling over 6.3 megs. That is unacceptable for a business page, and don't fool yourself. What you might build with their tool might not be a business page, but their site most certainly is! In handshaking alone a "real world" ballpark of 200ms for each handshake past the first 8 gives us an overhead cache-empty of around 23 seconds under ideal circumstances, and pushing near to TWO MINUTES under the worst of times. For a page that has nothing I would actually waste JavaScript on, the presence of 92 separate JavaScripts for 2.54 megs of code is beyond troubling.... and for what? Some goofy image effects when you scroll? Likewise the ridiculous 35 separate stylesheets totalling over 1.56 megabytes of code is even more absurd since I see NOTHING on this site to warrant more than around 35k of CSS in ONE monolithic stylesheet shared by every page on the site.

    ... and this is all before I even look at the code. Popping the bonnet it's the typical train wreck of developer incompetence and ineptitude I've come to expect from both bootcrap, and the ignorant half-witted mentally enfeebled TRASH that are site generators. Let's just use one simple part of the pages as an example:

      <body id="index" is="dmx-app">
        <dmx-smooth-scroll id="scroll1" selector=".smoth-scroll" speed="800"></dmx-smooth-scroll>
    <dmx-lightbox id="lightbox1" autoplay="true" loopvideo="true" animation="fade"></dmx-lightbox>
    <header class="page-header" is="dmx-background-video" id="bgvideo1" src="video-bg-3.mp4">
      <!-- Wappler include  head-page="../index.php" appconnect="local" is="dmx-app" bootstrap4="cdn" fontawesome_4="cdn" jquery_slim_33="cdn"-->
    <nav id="top-nav" class="navbar navbar-expand-lg navbar-dark bg-gray-dark shadow-sm fixed-top">
        <div class="container xl"> 
          <a class="navbar-brand" href="/">
            <img height="26" src="/img/logos/wappler-logo.svg" alt="wappler logo">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation"><i class="far fa-bars fa-lg text-red"></i></button>
          <div id="collapse1" class="collapse navbar-collapse justify-content-end">
            <div class="navbar-nav mr-lg-5 pt-3 pt-lg-0">
                <a class="nav-item nav-link" href="/features/">Features</a>
                <a class="nav-item nav-link" href="/download/">Download</a>
                <a class="nav-item nav-link" href="/pricing/">Pricing</a>
                <a class="nav-item nav-link" href="https://docs.wappler.io">Docs</a>
                <a class="nav-item nav-link" href="https://community.wappler.io/" target="_blank">Community</a>
                <a class="nav-item nav-link" href="https://medium.com/wappler-io" target="_blank">Blog</a>
            </div>
            <div class="navbar-nav">
              <a class="nav-item nav-link" href="https://account.wappler.io/">Account <i class="fal fa-arrow-right fa-xs"></i></a>
            </div>
          </div>
        </div>
    Code (markup):
    Poster child for EVERYTHING wrong with the use of presentational classes and nonsense like bootcrap. They need to go find a stick to scrape that off with. So what's wrong with that?

    Endless pointless DIV for nothing, improper semantics in the form of endless Anchor (<a>) tags without block level separators or other indicators, endless pointless classes for nothing such as nav-item nav-link. Big tip, if every tag inside a container -- like a DIV -- is getting the same class? NONE of them need or even should have classes. They have a presentational image in the markup doing the job of what SHOULD be the sites first H1... Don't even get me STARTED about the effect those made-up fairy-tale BS "DMX" tags will have on accessibility UA's, or how they're basically making up their own attributes and/or applying attributes to tags that don't even have them -- like src="" on HEADER. Their "IS" attribute is literally nothing more than someone unqualified to write HTML or JavaScript making shit up because they can. Don't even get me STARTED about the accessibility /FAIL/ of using target="_blank" to shove new windows/tabs down the user's gullet whether they like it or not; breaking navigation for users not on visual UA's.

    Hell of a mess for what should probably be nothing more than:

    
    <body>
    	<div id="top">
    		<h1><a href="/">Wrappler</a></h1>
    		<input type="checkbox" id="toggle_mainMenu" class="toggle" hidden>
    		<label for="toggle_mainMenu"></label>
    		<ul id="mainMenu">
    			<li><a href="/features">Features</a></li>
    			<li><a href="/download">Download</a></li>
    			<li><a href="/pricing">Pricing</a></li>
    			<li><a href="https://docs.wappler.io">Docs</a></li>
    			<li><a href="https://community.wappler.io/">Community</a></li>
    			<li><a href="https://medium.com/wappler-io">Blog</a></li>
    			<li class="account"><a href="https://account.wappler.io/">Account</a></li>
    		</ul>
    	<!-- #top --></div>
    
    Code (markup):
    ... assuming we toss bootcrap's dumbass use of JavaScript to do CSS' job on the mobile friendly menu. They're vomiiting up 1.7k of markup code to do 626 bytes job. "Because bootcrap" and because of some junk goofy plugin of ZERO legitimate value to the end user experience.

    I could go on for hours ripping that train wreck of how NOT to build a website apart, but it brings me back to the question I'm always asking.

    Why is it that none ONE of the makers of these systems seems to be qualified to write a single damned line of HTML, CSS, or JavaScript, much less be building systems to help others do so? This endless stream of incompetence and ineptitude to be found in things like bootstrap, and in damned near everything that uses it I cannot comprehend.

    For people who know nothing about websites, BY people who know NOTHING about websites? Doesn't seem like a very good plan. Almost sounds like a moneymaking scam when they want 19 Euro a month for this steaming pile.

    Why CAN'T somebody make something like this that at least TRIES to maintain semantics and minimalism in the markup? What's the magical thing holding it back because I've never seen it done... Though as someone who can write proper HTML I'm not convinced any automated tool can do it, it truly seems as if those making these systems don't even TRY.

    True laugh being they probably sat their dicking with their own generation system to make that website for weeks, when that's not even a 20 man hour job for me since it's not even a dynamic site. They brag about how their system can make blogs, but do they? No, they hand that shit off to Medium. THAT should tell you something as well.
     
    deathshadow, Jun 5, 2019 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Realistically if you're in a decent "modern" editor that's running native to your OS' windowing system -- basically anything that isn't terminal based -- there are only a handful of commands you use 99% of the time. the ^ here represents the control key.

    ^C - copy
    ^X - cut
    ^V - paste
    ^F - find (search)
    ^H - replace

    Shift-plus arrow keys and page-up/page-down - select text

    Tab with text selected -- indent the current line(s)
    Shift-tab with text selected -- de-indent the current line one tab-stop

    alt-f s -- save file.

    Realistially, 99.999% of the time, those are ALL I tend to use for "shortcuts", and on windows that last one is easy since if you hold the alt key, on the menu it will SHOW YOU what key to hit next on the menu by underlining it!

    You need much more than that in any decent editor, you're overthinking the answers and getting so complex you're likely -- as is common to people who use emacs a lot -- spending more time dicking with making macro's and playing with editor features than you are doing what's ACTUALLY important... WRITING CODE AND/OR CONTENT! Though admittedly when I badmouth emacs it's more about bad blood between me and the dirty unwashed "movement" who created it, that has had a whole cult of fanboys spring up around his BS. LONG story.

    Just be thankful this isn't the '80's and you're not expected to know all the Wordstar commands since that's ALL programmers editors back then (other than vi) used. That rubbish can take it's ^KH and shove it up its ^KD. Made all the more exacerbating by many editors of that time (and computers for that matter) not even having arrow keys working. "vi" and "vim" were made from that same mentality and limitations, and it hobbles them to this day with cryptic hard to remember keyboard commands. Needless complexities that should have died off the day computer manufacturers as a whole unified on the IBM "Model M" style 101 key layout.

    Could be worse though, at least we don't have anyone bragging about how great and powerful EDLIN is.
     
    deathshadow, Jun 5, 2019 IP
  10. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #10
    @deathshadow

    After spending agonizing hours trying Webflow for the past few days, my conclusion is that I'm not going even to try Wappler at this point. And it is so especially in light of confirming what you explained in this thread. I tried to create a very barebone two column layout in Webflow. I ended up with a half-baked page with over 2,400 lines of unused CSS code. Even with just the basics I have so far, I was able to write an almost identical one with only around 70 lines of CSS, and mine did responsiveness better than theirs because Webflow has pre-configured breakpoints and gave me jaggy transition, which I could not fix. Worse, all their support forum posts tell people to slap in custom code to work around limitations. I might as well write something on my own then. I found Webflow to be more a hindrance than anything else, and I don't see how Wapper and other GUI tools would be different.
     
    Gary-SC, Jun 9, 2019 IP
    deathshadow and mmerlinn like this.
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Pre-programmed breakpoints, pre-programmed methodologies and layout techniques, pre-programmed code... and as you discovered, that's where you butt heads with "The Flaw of Averages". The simple truth is that "one size fits all fits nobody". It is one of the biggest lies we peddle in society, the idea of "the average" being "close enough" or far, far worse: NORMAL.

    The flaw of averages is a real thing that plagues decision making, usually for the worse. Let's use a real world example of income since people not versed in statistics are often helped by comparisons.

    ALL the time you'll hear the average income in America is roughly 59K... so is that what the average person makes? Is that what a significant majority even comes close to making? It's a semi-meaningless number that is used for propaganda purposes.... because the top 10% averages 300k, and the bottom 90% averages around 36K. and the number gets uglier the more you narrow that top percentile. This is why if you were to define the middle class as the middle-third of income earners, adjusting for inflation the "middle" makes 30% less than they did 30 years ago.

    When 50% of the population averages 28k -- spitting distance from the 22K poverty level -- with around 70% of that group working multiple jobs just to keep their heads above water? Calling that 59k "average" normal or what a normal person could expect is ignorant, arrogant, and 100% bullshit.

    The USAF faced similar issues at the start of the Jet age. A topic I am quite well versed in, perhaps more so than web dev. They took measurements of all their pilots, and used the averages to create the seats, which were fixed in place in the aircraft.

    Then the accidents started happening.

    Some pilots had trouble fitting in with sufficient room to move, some pilots couldn't reach the controls at all... THEN they wondered why there were -- with the higher speeds, higher g forces on the pilots, and more controls and information streaming from the avionics -- more crashes. It didn't take long to figure out what was going on, and the first "fix" was this first they implemented height limits. (Val Kilmer is too tall to be a USN pilot, just more BS from a BS movie) Reduced the pool of available pilots which hurt in the short term, but it helped with the existing airframes.

    Then they addressed it with technology, introducing: The adjustable seat. Something that no aircraft had even bothered with before. The increase in speed, number of controls for avionics and corresponding need for movement, as well as the higher G forces all made a flaw nobody had thought was an issue stick out like a sore thumb.

    Adjustable seats are something we take for granted in all vehicles. Prior to the 1950's there was no such thing, and if you've driven any older cars you know it took a while for it to catch on in the automotive industry. That rustbucket '52 Lincoln Capri was hard to drive since at 5'4" I was on tippy-toes to reach the gas and break. You know those arm-rest pillows typically covered in corduroy? Those were invented to help address this... basically car seats for adults shorter than 5'8". When adjustable seats were introduced for the Air Force, accidents dropped 80%. When introduced for automobiles there was a similar -- though nowhere near as massive -- drop.

    THAT is where "average" gets you. These tools -- WYSIWYG editors, site creators, front-end frameworks-- all fall into the flaw of averages in this same way. In that they try to simplify common tasks, but in the end make you have to go back to basics to do anything outside that "average". The simple fact is rarely if ever does the "average" actually fit any more than a fraction of a percent of real world situations!

    Especially if you try to do anything more than a generic cookie-cutter page that looks like everyone else's generic cookie-cutter page.

    This also brings up their notion of simplicity. Whilst I've ranted at lengths about the propaganda used to convince beginners of it being "simpler", or "easier", or "makes you more productive" -- often compromising the ability to actually question "wait, is this ACTUALLY simpler?" -- the true issue at hand is a concept I think all web developers NEED to be well versed in.

    FALSE SIMPLICITY

    The concept of false simplicity is another counterintuitive idea that happens all the time. You simplify how things are done so much, it compromises how easy it is to get the job done. Ever heard the phrase "keep things as simple as possible, and no more". The no more refers to making it simpler, not more complex.

    There's an excellent article over on Baymard group that explains this beautifully:

    https://baymard.com/blog/false-simplicity

    Seriously, when I first read that article seven years ago, it changed how I look at UI design entirely.

    The task at hand is too complex -- if you care about doing the job right -- to simplify it much more than actually just sitting there and writing the code properly from the start; at least for the HTML/CSS TEMPLATE you plan to wrap around your content. If that comes across as being "too hard" it is likely some essential tiny little bit of understanding is missing, either from shoddy education on the topic, or the endless pointless bad advice and worse practices out there.

    As I say time and time again, if you never learned to use the underlying language properly and to its fullest using the best practices, one's opinion of what constitutes "easier" means exactly two things... and Jack left town.

    Of course all this stuff gets worse when bad practices, bloated code, broken pages, and garbage decisions are rationalized by lame excuses:

    https://www.456bereastreet.com/archive/200704/lame_excuses_for_not_being_a_web_professional/

    12 year old article that's as true today as it was then, perhaps more so!
     
    Last edited: Jun 9, 2019
    deathshadow, Jun 9, 2019 IP
  12. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #12
    Insightful articles. And the second one was written 12 years ago!? I'm beginning to wonder if the web development industry has many bozos trying to make bucks by building and selling a digital equivalent of snake oils to people like me just trying to learn to do this stuff right.

    What a transformational last few days it has been.

    Yup. That was one of the significant problems I experienced with Webflow, and I don't see how Wappler would be different. With Webflow, their way of working around it is to throw in custom code in their custom code section. Ironically, I have to know the code thoroughly to do that correctly. It's a clumsy way of doing it.

    Simply put, I found it far quicker to type, for example,
    <h2>Title</h2>
    Code (markup):
    than going over to the left pane, scroll and search for "Heading" icon among dozens of icons, drag and drop that into the canvas, choose which level of heading I would like to use, double-click it and then edit the text. WYSIWYG isn't easier, or faster. It's a convoluted mess.
     
    Last edited: Jun 10, 2019
    Gary-SC, Jun 10, 2019 IP
    deathshadow and kk5st like this.
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    I believe we might have discussed that early on in this thread. No matter what you're writing, text, html, css, js, php or in any number of other formats, there are only a fairly small set of kb commands that you need to know. They will work according to context (in a worthwhile editor). There will be specialty cases, but learning those kb commands should not be onerous.

    gary
     
    kk5st, Jun 10, 2019 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Remember we live in the age of anti-vaxxers, essential oils, "organic" foods, and shoving jade eggs up the holiest of holies. All bets are off on just how much snake oil peddling can be done. If there's a buck to be made, the predators will circle like vultures.

    Which you yourself said it, if you're going to need to know how to use HTML and CSS directly to add such things, why not just use HTML and CSS directly? That's the most infuriating parts of these "tools".

    Take Dreamweaver, in THEORY it's possible to create a good website with it if you stick to JUST the code editor, don't allow it to generate anything for you, and avoid using the WYSIWYG aspects for much of anything more than a preview (that you can't really trust since real browsers don't behave like it). If all that is in fact the case and to use it "right' you're just using it as a glorified text editor, why pay ridiculous sums of money for the functionality of ANY free flat text editor and the actual browsers, all of which are free as well!

    As another dearly departed friend -- Aaron Swartz -- once said, "The only thing about Dreamweaver that can be considered professional grade tools are the people promoting its use"... and when he said that about a decade ago, there were college professors teaching "web development" classes who all they taught was how to use Dreamweaver's WYSIWYG.

    Hence why so many of these crap systems made by people unqualified to make websites cost $$$. ALL they are after is making a quick buck at your expense. That's why despite being steaming piles, they are "try for free" as a way to try and weasel monthly fees out of you. From webflow's $12 a month hosting that probably costs them an average of 50 cents per user, to wrappler's 39 "sideways quake 2 coins" for their "basic" personal plan.

    For something that is actually easier to do if you spend 4 weeks learning in your spare time, and use free editors to accomplish.
     
    deathshadow, Jun 11, 2019 IP
  15. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #15
    I'm getting there. I also find it interesting that I now have two modes of writing. When I write HTML, I only think about the structure and contents. To me, it's a form of writing. When I write CSS, it's about "describing the interface." To me, it feels as if I'm telling my browser, "Ok, for the desktop computer screen, render this paragraph so its width would be 50rem, put about 2rem of space under it, then use this font." Something along that line. I have enough vocabularies now that I can simply "say it," and I find it FAR easier than fiddling with drag & drop nonsense.
     
    Gary-SC, Jun 15, 2019 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    ... and that is why -- IMHO -- you are now a more competent front-end developer than the folks who write wordpress templates, created frameworks like jQuery, bootstrap, w3.css, etc, etc, and the vast majority of people working in the field today!

    Welcome to the club, there aren't a lot of us.

    That's the thing, there are only around 4 dozen tags you would/should ever use in your HTML, only around a dozen and a half of them being stuff you need on a daily basis. There are also maybe a dozen attributes you would/should use on a regular basis on those tags.

    Once you know those, or are at least aware they exist and have a decent reference, it is far faster to just type it in than to dick around with a GUI. CSS side of things it gets a wee bit more complex, but it's not so horrifyingly difficult that a normal person should feel intimidated by it.

    But because all these ALLEGED "shortcuts" brag about how easy they are, it embeds this notion in people's heads that HTML and CSS are "hard". They aren't. If you graduated elementary school, you should be able to easily grasp the concepts. I truly believe the majority of people CAN do this, quickly, and easily, if they just take the time to grasp the concepts.

    ... and once you grasp said concepts, things like visual editors, frameworks, and pre-processors look outright silly; with those who created them and actively promoting their use looking like two-bit carnival barkers.
     
    deathshadow, Jun 15, 2019 IP
  17. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #17
    @deathshadow

    I would like to examine myself. Would you take a look at my humble attempt to beat GUI editors and CSS framework?

    First, HTML:

    <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" media="screen" href="screen.css">
        <link rel="stylesheet" media="print" href="print.css">
        <title>How to build a web page - Digital Point Forum</title>
        <meta name="description" content="HTML and CSS isn't a rocket science. Yes, you need to learn, but you CAN learn!">
      </head>
    
    <body>
    
      <h1>How to build a web page</h1>
    
        <div class="maincontentarea">
          <div class="article">
    
            <h2>Introduction</h2>
    
              <p>I once thought that HTML and CSS were too complicated to handle by manual coding and thought I needed to find a GUI editor that can code everything for me via drag & drop. However, thanks to some knowledgeable folks at Digital Forum (Deathshadow in particular), I found that it wasn't rocket science after three weeks of learning the stuff three hours every single day and reading countless articles on the subject.</p>
    
              <p>I would like to summarize how I do it in my text editor.</p>
    
            <h2>Step-by-step Guide</h2>
    
              <h3>1. Author contents. NO LAYOUT</h3>
    
                <p>First, I author contents just like I write an article. NO REGARD for layout whatsoever at this stage. Hey, even a noob can do THAT.</p>
    
              <h3>2. Mark up the contents. STRUCTURE only!</h3>
    
                <p>Wrap blocks of articles with basic tags. In my case, I mostly use only a few basic ones. (h, p, ul, etc.) I think of my article in the "outline" form. I pay attention mostly to the STRUCTURE of my page.</p>
    
              <h3>3. Code a CSS to create a layout. NO FRAMEWORK NEEDED!!</h3>
    
                <p>I create two CSS files; screen.css and print.css. print.css is simple and easy as raw HTML is already good enough to print out as is. (See, this is why "contents first" makes sense!) For the screen version, I try to do all the stylings withOUT adding anything else at first. Then I wrap some blocks with div and span where I deem necessary for laying out.</p>
           
                <p><strong>Golden rule: NO PRESENTATION MARKUP!!!!!!!!!</strong> div and span should describe what it is wrapping inside, NOT what they look like!!!</p>
    
            <h2>Why I decided to REFUSE tools like Webflow, Wappler, Bootstrap, W3.css framework, etc.</h2>
    
              <p>I REFUSE tools like Webflow, Wappler, Bootstrap, W3.css, and any other CSS framework many tutorials often tell me to learn and use, because using them is like trying to eat a meal with my anus; it simply does not work!!</p>
    
           <!-- /.article -->
          </div>
    
          <div class="additionalcontents">
            <h2>Other Resources</h2>
    
              <ul>
                <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">I use this site a lot in addition to the W3C spec page.</a></li>
                <li><a href="https://forums.digitalpoint.com/forums/html-website-design.16/">It's where it all started for me</a></li>
                <li><a href="https://cutcodedown.com/">CutCodeDown: Deathshadow's Amazingly Insightful Website. Very helpful!</a></li>
              </ul>
          <!-- /.additionalcontents -->
          </div>
        <!-- /.maincontentarea -->
        </div>
    
      <hr>
    
        <div class="site-navigation">
    
          <h2>Website Menu</h2>
    
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
    
        </div>
    
      <hr>
    
      <div class="footer">
        &copy; 2019 Demo Coding, Inc. GUI web editors SUCK A$$. You can learn this stuff.
      </div>
    
    </body>
    </html>
    HTML:
    Second, CSS for screen:

    html,
    body {
      margin: 0;
      padding: 0;
    }
    
    * {
      box-sizing: border-box;
    }
    
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    body {
      font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
      min-height: 100vh;
    }
    
    body,
    h1,
    .maincontentarea,
    .site-navigation,
    .site-navigation ul {
      display: flex;
    }
    
    body {
      flex-flow: column;
    }
    
    h1 {
      align-items: center;
      justify-content: center;
      min-height: 30vh;
      margin-top: 0;
      order: 2;
      padding: 1rem;
    }
    
    h1,
    .site-navigation li a,
    .site-navigation li a:visited,
    .footer {
      color: #fff;
    }
    
    h1,
    .footer {
      background: rgb(23, 107, 37);
    }
    
    .site-navigation ul {
      list-style: none;
    }
    
    .additionalcontents ul {
      list-style: outside;
      padding-left: 1.3rem;
    }
    
    .site-navigation li a,
    .site-navigation li a:visited {
      padding-right: 1rem;
    }
    
    hr,
    .site-navigation h2 {
    display: none;
    }
    
    .maincontentarea {
      margin: 0 auto;
      max-width: 60rem;
      order: 3;
      padding: 0 0.5rem 1.5rem;
    }
    
    .article {
      flex: 2;
    }
    
    .additionalcontents {
      flex: 1;
      padding-left: 2rem;
    }
    
    .site-navigation {
      background: rgb(26, 58, 16);
      justify-content: flex-end;
      order: 1;
    }
    
    .footer {
      margin: auto 0 0;
      order: 4;
      padding: 1rem 0;
      text-align: center;
    }
    
    @media screen and (max-width: 40.625rem) {
    
      .maincontentarea {
        flex-flow: column;
      }
    
      .additionalcontents {
        padding: 0;
      }
    
    }
    Code (CSS):
    And lastly, CSS for print:

    body {
      font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
      line-height: 1.1;
    }
    
    h2{
      text-decoration: underline;
    }
    
    .site-navigation {
      display: none;
    }
    Code (CSS):
    When I experimented with Webflow, I tried something similar to this layout and had a hard time getting it to work right. And when I got close, the exported code had over 2,400 lines of CSS code.
     
    Last edited: Jun 16, 2019
    Gary-SC, Jun 16, 2019 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    The first thing I notice is the heading for the menu with the menu at the bottom of the code order. This can be problematic for non-visual users hunting for the menu, which is why typically it would be coded between the H1 and the first H2.

    Remember, a H2 marks the start of a major subsection, with the first H2 marking the start of the content. As you have grasped the structural nature of said headings, you really don't need a H2 saying navigation, just bet it before the first one. You may have gone a little overboard with flex, but NICE job using it to put the menu at the top. I dare say you may grasp how to use flex better than I do, as I still struggle with it.

    You also have a excess HR before that menu which has the H2. If the menu could be moved before the first H2, you could lose not just its H2 but also the HR. The HR before the footer with it having no heading on the other hand makes perfect sense.

    The thing is that software like webflow often "tries too hard" to remain legacy compatible. Flex doesn't work right in IE10/earlier, so you're likely also looking at a lot of "legacy cruft". What you've done with flex until this past year even I would not have considered "real world deployable", in particular the column approach. you are VERY lucky to be coming in at a time where we can en-masse pretty much tell IE10/earlier to sod off, so long as the page is still functional/usable in that browser.

    That said, I advise AGAINST using REM. It's not "ready for primetime" and often doesn't do what REM is SUPPOSED to be for in Firefox and IE11. It's SUPPOSED to be based on the user preference or OS preference when body starts, and it isn't it ends up being 16px regardless. Any user who manually sets it (with either extensions or OS level changes) is going to be diving for the zoom, defeating the entire point of REM. To that end I suggest EM. The math gets a bit trickier since you change the font-size so does the value of EM, but if you stick to "Safe sizes" of 1.25 / 1.5 / 2 it's not rocket science. Set it once on body, then only change it on headings... and avoid changing it when there's no grammatical reason to, no matter what some advertising or graphic artist says.

    I also advise against setting the height of the H1 in vh. Just pad it instead of setting a height. Have you seen what that does at 1440p or higher? Don't waste screen space like that! That's just going to piss off users.

    One should not go quite so ape-shit with the box-sizing value either, as well as the "all" selector of "*" having equal issues. Both are non-standard behaviors that require different code in the browser to run, so you should use those with an eye-dropper, not a paint roller. Your page is simple enough it is not an issue, but that could change quickly. There's a reason the so-called "universal reset" has problems.

    In your print stylesheet, I see a whole different problem; one of those LIES circulated in the industry: The metricless line-height. No matter what they say at places like SitePoint, THAT DOES NOT WORK CONSISTENTLY IN ALL BROWSERS! This claim of theirs and my debunking it is why I'm no longer "welcome" there.. It's 100% bullshit that does not work in FF, IE, or Edge for non-standard font users like myself, being as broken / incomplete in implementation as REM. You change the font-size, redeclare the line-height in the same metric. Saying "font-size:1.1" is NOT going to work for all potential users, and anyone claiming it is, well... is flat out ignoring all the cases where it clearly does not!

    On the media queries, I suggest rounding up to the nearest EM, or even a half EM over that for your breakpoints. Not all OS have the same fonts (hence those fallback families you need to declare) and not all fonts end up rendering the same width at the same size. This can screw with your responsiveness if you're not ready for it, which is why I always slightly over-provision my breakpoints.

    ALL of the above are minor nitpicks, and honestly if that's the worst I can come up with you are already head-and-shoulders over most of the people out there crapping out site templates. You basically have created a template that's as functional as what comes out of the box for most CMS systems... Leaving that ever so painful question that this industry HATES people asking.

    Why do they need 60k of HTML to do what you just did in 3.6k?

    The reason said question is hated? It points out how inept, broken, and just plain WRONG the "industry standard" has gotten. There are places -- the MAJORITY of web development forums in fact -- that if you start evangelizing results like this, questioning the "status quo" that you will instantly be treated as a pariah an banned sooner than later. They will do ANYTHING to prevent this knowledge from destroying the scams and lies that currently rule.

    Which is why I've grown so crusty on the subject. If I'm always going to be treated as if I'm swearing about it no matter how politely it is worded, I might as well swear about it.
     
    deathshadow, Jun 16, 2019 IP
  19. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #19
    A little better now?

    
    <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" media="screen" href="screen.css">
        <link rel="stylesheet" media="print" href="print.css">
        <title>How to build a web page - Digital Point Forum</title>
        <meta name="description" content="HTML and CSS isn't a rocket science. Yes, you need to learn, but you CAN learn!">
      </head>
    
    <body>
    
      <h1>How to build a web page</h1>
      <div class="site-navigation">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      <!-- /.site-navigation -->
      </div>
    
        <div class="maincontentarea">
          <div class="article">
    
            <h2>Introduction</h2>
    
              <p>I once thought that HTML and CSS were too complicated to handle by manual coding and thought I needed to find a GUI editor that can code everything for you via drag & drop. However, thanks to some knowledgeable folks at Digital Forum (Deathshadow in particular), I found that it wasn't rocket science after three weeks of learning the stuff three hours every single day and reading countless articles on the subject.</p>
      
              <p>I would like to summarize how I do it in my text editor.</p>
    
            <h2>Step-by-step Guide</h2>
      
              <h3>1. Author contents. NO LAYOUT</h3>
      
                <p>First, I author contents just like I write an article. NO REGARD for layout whatsoever at this stage. Hey, even a noob like this can do THAT.</p>
      
              <h3>2. Mark up the contents. STRUCTURE only!</h3>
      
                <p>Wrap blocks of articles with basic tags. In my case, I mostly use only a few basic ones. (h, p, ul, etc.) I think of my article in the "outline" form. I pay attention mostly to the STRUCTURE of my page.</p>
      
              <h3>3. Code a CSS to create a layout. NO FRAMEWORK NEEDED!!</h3>
      
                <p>I create two CSS files; screen.css and print.css. print.css is simple and easy as raw HTML is already good enough to print out as is. (See, this is why "contents first" makes sense!) For the screen version, I try to do all the stylings withOUT adding anything else at first. Then I wrap some blocks with div and span where I deem necessary for laying out.</p>
              
                <p><strong>Golden rule: NO PRESENTATION MARKUP!!!!!!!!!</strong> div and span should describe what it is wrapping inside, NOT what they look!!!</p>
      
            <h2>Why I decided to REFUSE tools like Webflow, Wappler, Bootstrap, W3.css framework, etc.</h2>
      
              <p>I REFUSE tools like Webflow, Wappler, Bootstrap, W3.css, and any other CSS framework many tutorials often tell me to learn and use, because using them is like trying to eat a meal with my anus; it simply does not work!!</p>
    
           <!-- /.article -->
          </div>
    
          <div class="additionalcontents">
            <h2>Other Resources</h2>
              <ul>
                <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">I use this site a lot in addition to the W3C spec page.</a></li>
                <li><a href="https://forums.digitalpoint.com/forums/html-website-design.16/">It's where it all started for me</a></li>
                <li><a href="https://cutcodedown.com/">CutCodeDown: Deathshadow's Amazingly Insightful Website. Very helpful!</a></li>
              </ul>
          <!-- /.additionalcontents -->
          </div>
        <!-- /.maincontentarea -->
        </div>
    
      <hr>
    
      <div class="footer">
        &copy; 2019 Demo Coding, Inc. GUI web editors SUCK A$$. You can learn this stuff.
      <!-- /.footer -->
      </div>
    
    </body>
    </html>
    HTML:
    html,
    body {
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
      min-height: 100vh;
    }
    
    body,
    h1,
    .maincontentarea,
    .site-navigation,
    .site-navigation ul {
      display: flex;
    }
    
    body {
      flex-flow: column;
    }
    
    h1 {
      align-items: center;
      justify-content: center;
      margin-top: 0;
      order: 2;
      padding: 1em;
    }
    
    h1,
    .site-navigation li a,
    .site-navigation li a:visited,
    .footer {
      color: #fff;
    }
    
    h1,
    .footer {
      background: #176b25;
    }
    
    .site-navigation {
      background: #1a3a10;
      justify-content: flex-end;
      order: 1;
    }
    
    .site-navigation ul {
      list-style: none;
    }
    
    .additionalcontents ul {
      list-style: outside;
      padding-left: 1.5em;
    }
    
    .site-navigation li a,
    .site-navigation li a:visited {
      padding-right: 1em;
    }
    
    hr,
    .site-navigation h2 {
      display: none;
    }
    
    .maincontentarea {
      margin: 0 auto;
      max-width: 60em;
      order: 3;
      padding: 0 0.5em 1.5em;
    }
    
    .article {
      flex: 2;
    }
    
    .additionalcontents {
      flex: 1;
      padding-left: 2em;
    }
    
    .footer {
      margin: auto 0 0;
      order: 4;
      padding: 1em 0;
      text-align: center;
    }
    
    @media screen and (max-width: 42.5em) {
      .maincontentarea {
        flex-flow: column;
      }
    
      .additionalcontents {
        padding: 0;
      }
    }
    Code (CSS):
    
    body {
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    line-height: 1.5em;
    }
    
    h2{
    text-decoration: underline;
    }
    
    .site-navigation {
    display: none;
    }
    Code (css):
    My hats off to you for all sorts of helpful tips. I was going for a "Bootstrap-ish look" with a huge banner area (they call it Jumbotron, according to what I read) to make a point of saying, "I can do this without Bootscrap." I see your point of not taking up unnecessary spaces. In fact, that whole trend of "big picture up front occupying the first glance" thing is starting to become more annoying to me as I learn more of this stuff. Now, this:

    EXACTLY. THIS. SO MUCH THIS. Now that I'm doing it this way, I look at Bootscrap's barebone starter templates and am left utterly puzzled why people need to resort to those things when anyone could learn to write a simple responsive HTML page with much less code. I mean, why customize those things when it's LESS WORK to write a page like my sample? Wappler?? Webflow?? Screw 'em, they are doing an unnecessary "favor" to make authoring on the web an utterly broken practice in MY opinion now!
     
    Gary-SC, Jun 17, 2019 IP
  20. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #20
    @deathshadow

    P.S. Quite frankly, I found many advice of yours makes writing HTML quite a bit simpler than the typical HTML5 tutorials because I don't need to worry about using nav, section, footer, aside, etc. In some way, I'm even more puzzled why more people aren't talking about the redundancies of some of the HTML5 tags and the failure to eliminate presentational HTML markups. The industry must do a better job informing noobs like me so we won't waste time doing things wrong and more complicated ways.

    P.S.2. The tip on navigation ul being right under h1 was very insightful. I did wonder about where to put that navigation. I thought, "content first" and (mistakenly) thought I should put the navigation ul at the end.

    What are your thoughts on drop-down menus? I saw your tutorial on CSS-only mobile menu, but would you say we should still trim down the top nav enough to not need a collapsible menu? (which tends to be my approach at this point)
     
    Gary-SC, Jun 17, 2019 IP