loading...
Cover image for I’m a Front-End Cheater

I’m a Front-End Cheater

catriname profile image catrina Originally published at catrina.me on ・1 min read

I am a full stack developer. I develop in Visual Studio, code in C# with .NET Core, deploy to Azure and I must admit, I'm a front-end cheater.

Comeon, the .NET Core Web App demo itself loads with Bootstrap and JQuery preinstalled. We're all cheaters at some point, but I'm trying to diversify my cheating and eliminate my dependencies.

Here's my latest strategy.

Goodbye Bootstrap, HELLO Bulma!

Anything Bootstrap can do, Bulma can do better!

Well, not exactly but let me explain why.

Bulma has NO JS file.

The only time I feel a need for JS? Maybe JQuery Datatables, but I make a specific "DataTableLayout" and only use JQuery tables if required. This coupling of Bootstrap and JQuery is itself what I was trying to move away from.

Almost everything else? Columns, tables, hero images? Bulma does it all!

I want style to be style.

I'm not a fan of my hover, form validation, etc being done by JS. HTML5 has increased it's validation options, and CSS is rich in transformation. Why am I forced to bring in JQuery and then various animation libraries just to get some simple text animation.

It's frustrating to have so much code that I'm dependent on when I can do columns, tables, cover designs, and more with ONE SINGULAR CSS file: Bulma.

I want flair!

So this works great, everything loads quickly but there's no "animation", no "flair".

What now? Do I succumb and just go ahead and import JQuery and WOW.js? I mean I could...

Or, I could pick and choose my animations with something like : Animista. It has a great UI, I can pick and choose exactly what I need and nothing else. If there's ever a problem, well, I comment out that CSS and back to plan Bulma we go!

Example

So, I wanted to do a simple mouse over. User mouses-over image and words appear. I followed the basic CSS/HTML example from W3Schools and got that to work pretty quickly (I replaced the "container" with the "flip" class to avoid Bulma conflicts).

For flair, I visited Animista for an example of a slight blur-to-focus on words and worked to combine it's animation with my mouseover. This is the result...

Here's the HTML:

<div class="flip">
    <img src="~/images/flip_images/branches.jpg" alt="Avatar" class="flip-image" style="width:100%">
    <div class="flip-middle">
        <div class="flip-text"><a href="/Home/Locations">LOCATIONS</a><br /><div class="is-size-6">Over 80 Years of Service</div></div>
    </div>
</div>

Here's the CSS (a combo of the W3 + Animista):

.flip {
    position: relative;
    padding: 0.3rem;

}

.flip-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.flip-middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;

}

.flip:hover .flip-image {
    opacity: 0.3;
}

.flip:hover .flip-middle {
    opacity: 1;

    /* below credit of Animista*/
    -webkit-animation: text-focus-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.flip-text {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.125;
    color: #565656;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-8-7 13:40:21
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
/* ---------------------------------------------- */

The result is a simple animation: you mouse-over an image, it fades and a transparent, white overlay appears. An animated word blurs into focus at dead center so that you can click to follow the link.

Pure CSS! (Bulma + Animista mods)

So, Why So Much Trouble?

I had a site last year that was and IS crucial. It accepted payments. It required a very specific version of JQuery for its own library to work, encrypt credit card numbers and send to API (thus not storing and avoiding PCI compliance). That's fine, but with the design I had then, I had a different version of JQuery, along with a slew of libraries. The libraries did everything from cover background images, to animation, to form validation and whatnot. I stripped everything down and it did work. Somewhere in there, though, one of the libraries clashed with a new release of Edge and caused tons of complaints about invalid credit cards via API. All errors related to form dropdowns in Edge.

Chrome and Firefox handled it fine.

TLDR; Summary, Lesson Learned:

MINIMIZE YOUR DEPENDENCIES.
and that's what I've started to do.

Posted on May 28 '18 by:

catriname profile

catrina

@catriname

I am new to Visual Studio, C#, .NET and Core. I also regularly work with legacy systems (iSeries) and PHP to communicate with it. Everyday, I ask myself: What did you learn today? This is the result.

Discussion

markdown guide
 

It's not cheating if you know how it all works under the hood. 🕶️

 

too many "framework jockeys" these days...

 

Nothing really forces you to use the javascript part of Bootstrap (even if you don't have a build system in place).

I like bulma, but it doesn't quite cover the full feature set of Bootstrap (and that's not bad in itself, it's a matter of what you want to use in what case).

Technically with normalize.css + lostgrid you're good to go in most front-end projects.

Where I find bootstrap useful (and to some extent semantic ui) is rapidly prototyping backend admin applications and offering a nice baseline for other developers to do semi front-end work in a documented way.

 

I also favor Bulma over Bootstrap.

But I think a mixture of Grid/Flexbox and Bulma will give you amazing results. I am using them on my own website (coming soon) and the results are great! I also use Animate.css

 

I read somewhere that they are developing a version of Bootstrap without JQuery. I like Bulma and possibly use it in new projects, but Bootstrap won my affection 😂 —By the way, I did not know "Animista". Thanks for that.

I found it: github.com/twbs/bootstrap/pull/23586

 

Great post! The most efficient way to develop a project is to keep it as simple as possible. The real issue you face with too many dependencies is less control. When browsers become more uniform maybe, ‘maybe’, that will change this. Till then, keep it simple...

 

i reach for the same tools when doing front-end dev stuff - it's convenient.

occasionally, tho, i don't. the only time i feel that i'm not "cheating" is when i have the time to write it all myself - which is increasingly rare.

 

i agree. the time to do it myself is sparse, so im trying to choose the absolute minimal tools to get it working (considering i am working w/ 3rd party requirements on JS).

get it working, make it better and then make it fast - right?

 

So your advice is that we all should MINIMIZE OUR DEPENDENCIES? Just because you have troubles with js libraries updates?
Sorry man but I can't see an explicit corelation between using tons of dependencies and being a cheater. This frameworks and libraries are not the evil.
The today web development roadmap is all about using dependencies github.com/kamranahmedse/developer...

My advice is. If you, for any reason have to support IE today then yes. The less js the better. You can always use transpilers but. The fact is that WE ALL can't stop moving forward just because of that.

 

Bulma is great, also Tailwind has some strong assets to offer.

The only problem is the missing templates/starters to start fast.

I was playing with BulmaPlay and the speed of the app looks good: more than 90 Lighthouse score.

Personally, I will keep my eyes on Bulma.

 

actually, bootstrap 4 is brilliant in that you can pick only stuff you want, that is you can ignore JS components. And Sass is like must have, it makes bootstrap so much easy to adjust.

I can understand that this is about heavy all-purpose solutions vs small fitting tool; but bootstrap 4 is both.

And just to nit-pick: the need to use a very specific Jquery version sounds terrible. That means the library isn't a good option, though sometimes one has to go with what there is... but it's not like this situation is any valid argument to ignore bootstrap.

 

I'm sorry, but I am reviewing posts tonight and what always concerned me about this post was you did not understand - I COULD NOT choose my jQuery version. It was imposed by our bank (3rd party) who is also our payment processor.

When that version of jQuery caused a problem, I had to search for other front end solutions. This is why I made this post: to offer possible solutions that were less tied to jQuery. So that devs might suffer less.

I know there have been improvements, but at the time of this post, it was the best way I could "cheat" my way to make something (like jQuery) and complete my work despite my restrictions. I wanted to offer options to others.

That being said, I still love me some Bulma, 3rd parties come at me!

 

Bulma actually looks more neater than bootstrap IMO. Less dependency and gets more things done in cleaner and simpler way

 

Interesting piece and not heard of some of these libraries, excited to give them a try.

Thanks for sharing

 

I love so much HTML5 and CSS3 that I'm almost wanting to come back to front end. Almost.

 

Don’t minimize your dependencies :) Drop all dependecies and then start doing thing until you really need one. Then go on until you really need another.

 

Minimizing dependencies is definitely NOT cheating, it's a hallmark of good code architecture! Go forth! Minimize! :D

 

Oooh I want to create a design system and this is very helpful! Thank you! thanks

 

You say this is "pure CSS!" but you know what I reckon? I reckon you're cheating here too!

It's not pure CSS when something relies on specific additional markup.