DEV Community: disjfa

Long live css4!

disjfa — Tue, 03 Mar 2020 22:18:41 +0000

So there is talk online about css4. There is no css4, lets see wat we can do without it. Maybe think of a way to help the argument. If you just want to skip to the end, i made a quick view on the status of css, you can check it here.

The setup

So where we started was checking what we can find on the internet. There are lots of discussions about css4, some nicely summed up on this article on css-tricks. Nice! We are done. But not yet.

Lets see what we can do now. If you develop we all know about the caniuse website. The go to when we developers want to add something to our website. Also nice! But they have all their data open source. So we tested what we can do with that data. We found the caniuse-lite package. All the data we need, maybe we can do something with that.

Thoughts

So next up we have read the articles, we have listened and maybe ignored all the people on the internet. So we have another opinion. We have the data, lets just sum up the features based on releases for all the data we can get from the caniuse-lite package.

Rules

The rules, for now, are simple. Lets sum up every feature and sort them by release date. Release date meaning the date all the browsers have set the feature to fully supported. This can be a sort of release date for a feature on the internet. This is done in more places on the internet, in javascript we now have es2019, es2020 etc. So to create the basic specs we can just say we have releases x feature in x year. But for now just sum up the data.

The browsers

We also need to use some browsers. For now we just made the rule we use the 4 major browsers. chrome, edge, firefox and safari. Maybe we can add the mobile versions, maybe not. If you have opinions, please share. The data can only get better moving forward.

Just a thought as a reminder, the data we have is for css, html and javascript. So if there is a feature that is not just css, just keep in mind we just made a list of features. The css part is the part we can use for this article, the rest is just more information. Information we can also use.

Steps

First we sum op the browsers by date. Just sum up to get the data, just as a reference. We have the list here. Just list all browser by date, simple.

let lite = require('caniuse-lite');
let agent = lite.agents[i];
...

Next up, list all the features. All the features and setup a table adding some colors to show if a feature is supported, check the list of features here.

let lite = require('caniuse-lite');
let features = lite.features;
...

Cool, we have a sample. Lets play some more. We need a support table that can tell us what we can use from when. So next up we made a list of features. Checked if a feature is fully supported, and from there get the date of the last browser that supports the feature. Not hard, but it can be done. So to sup it all up, we added some functions and made that list! Based upon the latest data we have. The list can be found here.

Cool, data

So now we have the data. We have the list based on dates supported. Now we can tell by a simple list what has been supported, by date. This is very handy, we can see when we can use features. By date. Also we can just read the entire list to see what we didn't know even existed. Or just to have a log of items to see and learn. There is a date in the list in january 2020 when edge moved over to chromium when a lot released. So january 2020 is a date to remember for support.

Next is just to make the web more awesome! We know what we can use, we know how to make it more awesome. If you have thoughts on the data, please let us know. If you do not agree on a step we used here, feel free to check the source and do you. We just made a list of open data to show the things we like and want to see.

Just make cool stuff.

Original article

Photo by Morgan Harper Nichols on Unsplash

Mailing with symfony, what can we do!

disjfa — Mon, 02 Dec 2019 21:38:53 +0000

Ok so symfony created a new mime component to create emails, and a new mailer component to send those. Let's bundle them up and see what we end up with!

If you prefer to skip to the end, just install the bundle we made and enjoy!

Why?

Why we started this. We made a lot of symfony apps and in every app we started a new mail system, awesome they were. But after the third or fourth we knew the basics. But as is in every project we forgot to make a bundle and kept copy pasting the data missing stuff or re-create the methods over and over again. Se lets make a bundle that can be used and re-used.

This will be a setup for the core data of the bundle, so code.

History

So first up, a bit of history in my words. So probably none is true, but i like it. The guys (guys as in plural men and women of course) from symfony used a old package swiftmailer, so they ended up maintaining it. This could be cleaner and nicer, so they made that with the mime component, decoupling the sending in the mailer component. In the way making the components they set it up in a way to make it fancier and add magic. Awesome, now lets get into the code.

Setup

This article will talk about the setup, opinionated and the way we would set things up. We will have ideas and opinions. And if you differ from those, you will hopefully learn a thing or two to get you on your own way.

But the basic setup is:

make it easy to set up emails in your symfony application.
make use of a database, so you can manage and your clients can tinker.
generate emails using the Inlining CSS Styles and Inky Email Templating Language.
add a way to test and see what we are actually doing

Let's go

You can install the bundle by just installing it in your symfony application. This will setup everything you need to start emailing.

composer require disjfa/mail-bundle

In the basic setup you can just add your own email, An email should have a name, subject and content. You do need one .env variable named DISJFA_MAIL_FROM for the from email address.

Create an email

So now you need to create your own email. There is an interface for that! If you implement the interface the system will auto register the email so you are done. Lets check it.

<?php
namespace Disjfa\MailBundle\Mail;

interface MailInterface
{
    public function getName();
    public function getSubject();
    public function getContent();
}

So your class will look something like this.

<?php

namespace ...;

use Disjfa\MailBundle\Mail\MailInterface;

class ExampleMail implements MailInterface
{
    public function getName(): string
    {
        return 'app.example';
    }

    public function getSubject(): string
    {
        return 'subject';
    }

    public function getContent(): string
    {
        return 'content';
    }
}

This will just generate an email with the subject subject and the content content. You can just extend the class and autowire a twig environment into that to make life easier or a translator. Example in the example folder.

This will generate the default email when sent.

The original email must have curly braces which will parsed and used for parameters. So in the subject and the content it should look like.

This is the email {{ email }}

When you do create a template using twig, please note that you cannot add twig tags directly. So escape them!

This is the email {{ '{{' }} email {{ '}}' }}

This will be read and checked for parameters. Only parameters made in the original content will be remembered in the system. For now we can also not implement fancy things like loops and extra stuff. The idea is to pre render data which you want to use and set those up as 'simple' parameters.

Designing emails

So there is a thing called Foundation for Emails. Those guys made a thing for making hard email structures easy to set up. So there is a twig extension for that. Also somebody mage a way to inline css styling so we can make styling emails a bit easier on the eye. So there is a twig extension for that.

So they made live wonderful for people that do not like emails. If you create an email that looks like this:

<!-- a simplified example of the Inky syntax -->
<container>
    <row>
        <columns>This is the email {{ email }}.</columns>
    </row>
</container>

It will be rendered and generated into something like this:

garbage of table and data structure, what will look awesome in email clients!

The last item we did not render, it will be generated. We will let you check that in the console.

Cool, email setup. Send them.

Next up, it is up to you to send the emails. You have to tell your application to send an email wich you names. But we have made that simple. Lets check that out.

<?php

use Disjfa\MailBundle\Mail\MailFactory;
use Disjfa\MailBundle\Mail\MailService;

function myFunction(MailFactory $mailFactory, MailService $mailService)
{
    $mail = $mailFactory->findByName('app.example');
    $mailService->send($mail, [
         'param1' => 'value',
         'param2' => 'value',
    ], 'info@example.com');
}

And done, add this in a function you use and inject the correct data to send them. You can place this wherever. You can even setup the mailer to start sending the emails async.

Checking the emails

For checking the emails there is a command!

bin/console disjfa:mail:preview-mail

This will result in a question, and list all the emails found in the application.

Please select an email
  [0] disjfa_mail.example
  [1] ... your email setup

Next up, what to do?

What to do?
  [0] preview
  [1] preview raw
  [2] send email

Preview will just dump the base html. Preview raw will ask for all the parameters in the email and render it out dumping a pile of garbage of table and data structure, which should look awesome in an email application. The last will also ask for an email address and it will send out a test.

Nice! Now you can make, create and test the emails.

Edit them

So now we have setup the emails, are able to make new email templates to use in your app. Now you just want to tweak them, they are never right for everyone. And anyone has their own opinion. So lets just edit them.

You can add the routes in a config/routes/disjfa_mail.yaml file.

disjfa_mail:
    resource: '@DisjfaMailBundle/Controller/'
    type: annotation
    prefix: '/admin'

In this example the routes are annotated and mapped to the /admin folder, just as an example. This should end up in your application. So now you can open up the location. As an example on a localhost.

https://localhost:8000/admin/mail-template

Here is an overview of all emails in the system again! Cool. Here you can edit or preview them. If you edit one of them there will be subject and content edit area. And from the original html all the parameters are rendered and added as reference for your new template. Check it out in action.

As for the templates

For the template. There is just a basic layout adding some bootstrap and there is some clipboardjs added so it can be used. If you want to add the templates in your own you can just override the existing layout.html.twig. You can just add your own in templates/bundles/DisjfaMailBundle/layout.html.twig, just keep in mind to add the blocks needed.

The same is for the base email, but in this path templates/bundles/DisjfaMailBundle/mail/email.html.twig. Again, keep in mind the original blocks to implement. But here you can also just add your logo and other data you want to add.

Cool, now what?

Now what? You can add your own and add custom emails in your applications. Send them as you like! Lets check what to do.

Create a class implementing MailInterface.
Add some templates as needed.
Add some translations as needed.
Create a place in your application to send the emails.

And done. You just created your first email and you did not even need to know much html to get them sending. It sounded like a lot, but in the end it was easy.

Now get on your way and create some awesome emails, and don't forget to send them!

Photo by Mathyas Kurmann on Unsplash

Original article

Bootstrap carousel using animate.css

disjfa — Tue, 20 Aug 2019 21:01:13 +0000

The premise is that we know how to bootstrap, we know how to Animate.css. Now in bootstrap there is a thing like a carousel. We want to make the animations some more fancy! Lets try.

How does this work?

First up, we need to figure out how we can use the bootstrap classes for a carousel. When we inspect the elements and test and try we see a quick .carousel-item-left and .carousel-item-right class on the main element. Also there is an .active class. Lets puzzle, well i already puzzled so i'll just explain.

The .active item moves away or fades out on the carousel so that will be used for the animating out classes. So a simple overview.

Animate out classes

.carousel-item-left.active {
  ...
}

.carousel-item-right.active {
  ...
}

Animate in classes

.carousel-item-left {
  ...
}

.carousel-item-right {
  ...
}

Simple, left and right

So now we know how to check and manipulate the in and out. Next we need to setup a main carousel and remove the deafult animation. Let's set up a default carousel. Keep the .slide class for a base animatin and add a custom .carousel-... class we can use to hook into the action.

<div id="carousel-zoom" class="carousel slide carousel-animation bg-dark" data-ride="carousel">
  ...
</div>

Reset some css

.carousel-animation .carousel-item {
    transform: none;
}

.carousel-animation .carousel-item-left.active,
.carousel-animation .carousel-item-right.active {
    transform: translate(0, 0);
}

This will just reset all the animations. Reverts the sliding. So now we can start.

We can keep it simple and use some animations from Animate.css. If you want you can create whatever you like. For now we use the bounceIn and bounceOut animations. Let's just put it all together.

.carousel-animation .carousel-item {
    transform: none;
}

.carousel-animation .carousel-item-left {
    animation-name: bounceInRight;
    animation-duration: .65s;
}

.carousel-animation .carousel-item-left.active {
    transform: translate(0, 0);
    animation-name: bounceOutLeft;
}

.carousel-animation .carousel-item-right {
    animation-name: bounceInLeft;
    animation-duration: .65s;
}

.carousel-animation .carousel-item-right.active {
    transform: translate(0, 0);
    animation-name: bounceOutRight;
}

And thats it!

Cool, now we are done. We bounce in from the right, aka go to the left to enter and bounce out to the left on exiting. And the other way around if we click to the right.

You can just play around with all the options Animate.css gives you. Also if you want to see a working example, check here.

Next up?

Next up! Enjoy! Make awesome stuff and be awesome. You can animate the inners when the inital animation is done. After the the .active class gets put on the new inner item. Check this example to get started with that.

And don't forget to have fun.

original article

Share!

disjfa — Tue, 02 Jul 2019 21:03:29 +0000

On the internet we share stuff, Facebook, twitter, email, other socials, and so on. We use some links to custom share links and build it up ourselves. When i built some apps i also share, usually there is a share functionality. Now what if we want to implement share on a simple way, lets see where we can go with it.

Share api.

As usual, the people of the internet have thought of this already. When i searched for a share api there is one, off course. The Navigator.share api. Awesome.

This sets us up to share the link using the default share slider you see on phones, where you only have the share types you have set up on your phone or device. Useful and clean!

Lets implement.

Next up, a simple implementation. Next we need a button on a page.

<a href="#" class="btn btn-outline-secondary js-share" data-title="This is a title" data-text="This is a text" aria-label="Share this page">
    <i class="fa fa-share-alt"></i>
</a>

Cool, share button using some font awesome share icon! Lets add some JavaScript.

document.addEventListener('click', (evt) => {
  const share = evt.target.closest('.js-share');
  if (!share) {
    return;
  }

  if (!share.dataset.title) {
    return;
  }

  navigator.share({
    title: share.dataset.title,
    text: share.dataset.text,
    url: share.dataset.url || location.href
  });

  evt.preventDefault();
});

Made a default click listener that listens to a .js-share class that should be clicked. Note that this uses a .closest function that can be pesky. More explanations and where i learned about this can be found here on Chris Ferdinandi's site.

And run the code! I was on a desktop and clicked frantically to see how it all worked. But it did little. Sad.

Can we use that!

So the next step was to ask the internet if we could use that. Can i use web share api. The answer is no, not yet. Not as built in out of the box. As i said earlier, the share api uses the share dialog as used on phones. And the diagram on caniuse.com shows mobile browsers only at this point. I read somewhere that macos may be implementing something some time. But not yet. So should we use this, YES!

Lets poly fill.

Asking the internet some more i found out more people wanted to implement this. So i stumbled upon the share-api-polyfill. This will add a fallback as we are used on desktops, and implements the same structure as above. So just import the JavaScript to your site and you are good to go.

<script src="https://unpkg.com/share-api-polyfill/dist/share-min.js"></script>

Or install using npm and build it in your JavaScript.

npm install share-api-polyfill --save

Done!

Nice! Now we have a functionality that gives every type of browsing your app a nice way to share. And while the browsers will implement the api sharing will be nicer than ever. In the share poly fill you can also set up some stuff, for your own leisure.

Next up

Next up. As on the example of the poly fill the share api returns a promise. So you can also extend it to add more to the share functionality. Thank the person that shares or log in your data collection efforts.

navigator.share({
    ...
})
.then( _ => console.log('Yay, you shared it :)'))
.catch( error => console.log('Oh noh! You couldn\'t share it! :\'(\n', error));

Google is also on a way of sharing files this way, you can check that out on the Share files with Web Share post on googles page. Could be awesome to share a file to a image editing website as an idea!

Next up is whatever we want it to be.

Enjoy!

Photo by Kyle Glenn on Unsplash

Original article