disjfa.github.io

Long live css4!

Tue, 03 Mar 2020 21:17:01 +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.

Mailing with symfony, what can we do!

Mon, 02 Dec 2019 21:17:01 +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 .</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!

Bootstrap carousel using Animate.css

Tue, 20 Aug 2019 21:17:01 +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.

Codepen: Shots for Practice!

Thu, 11 Jul 2019 19:17:01 +0000

See the Pen Shots for Practice by disjfa (@disjfa) on CodePen.

Share!

Tue, 02 Jul 2019 19:17:01 +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.

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!

Vue, creating custom component

Tue, 14 May 2019 19:17:01 +0000

We have already started making a vue app. Now let’s go and try and make a custom component using vuejs. It could be useful they said.

Now just to get started. Most of the issues and items we are discussing today i learned in a talk about vue. You can checkout the talk here.

The goal

The goal of today is that we create a full component that can be reused by anyone. Such a wonderful thing of just making a piece of script anyone can include in a vue project. Using a build script or just include some js from the internet. The result i have is a minesweeper clone. You can check it out on my codepen or demo site, also github. So as a demo this is what we end up with when we have all external javascript.

Example

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-minesweeper"></script>

Add some html

<div id="app">
  <minesweeper-game>
</div>

And a piece of javascript

var app = new Vue();
app.$mount("#app");

Seems simple enough!

So cool, let’s get this thing started. First of we need a project, we use vue cli as we should! Just go through the steps as you know.

vue create my-project

Cool, a project. Next we move the src folder to a docs folder, we like docs. We use the setup as they should but on another folder. Next up we need to tell npm to do just that so we change the scripts in the package.json.

{
    "scripts": {
        "build": "vue-cli-service build --target lib --name VueMyProject src/index.js",
        "build:docs": "vue-cli-service build ./docs/main",
        "serve": "vue-cli-service serve ./docs/main"
    }
}

To check, the new build script is linked to the src folder, als it should. But now we also add the --target lib and the --name VueMyProject. This is to say we want to eventually need to build the project as a library, with the name VueMyProject .

The build:docs command builds the docs. The docs we use and abuse for testing the new component. Also we need to serve the files for local development. Useful!

Before we start, we are gonna add a new src folder and a src/index.js main file. This is the start point of the component we are building. As we are making components also add a component in src/components/MyComponent.vue. This can be a basic component, you know how to get that started. Code!

import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

function install(Vue, options = {}) {
  Vue.component(MyComponent, MyComponent);
}

if (typeof window !== 'undefined'
  && window.Vue
  && window.Vue === Vue
) {
  install(window.Vue);
}
export default install;

Digest

We import Vue from 'vue', we import the component we just built. Add a install function. Add a check if there is a window, this is for the check when we just include the script as a script on the page. It will automatically install the component when Vue is defined on the window aka browser. Last part is to export the install function to be used when we “build” a vue project and we do not have a global vue component yet.

Digest some more

Vue on window, project what not. What are we going on about. The first example is how we “installed” the component as above, in the example earlier. Next one is when we have the component on npm as example and we can import it in our project. Just like any other component in vue, example.

import Vue from 'vue';
...
import MyComponent from 'my-component';

...
Vue.use(MyComponent);

This import is useful, we can use that in our docs. But our docs won’t use the final component, we want to test and build the component. So we change that statement like this

import MyComponent from '../scr';

We just load the component from the src folder. This so we can use, play around and test the component. Awesome! Now we can just make, test and add on the component as we want. But the component is seperate from the docs. So we have a build for the docs, and for the “main” script. Nice, no hassle of making custom docs or adding weird builds to test or make the thing. Just all in one location we can test.

So now it is up to you to build your docs and test/add some test cases to show your awesome component. At the end you can deploy those files to your gh-pages branch or js.org like we did on the minesweeper component. More on their website about that!

Fin!

This is basically the thing. But we won’t end here. We want a bit on the nitty gritty. Dig deeper, the video earlier did that. package.json

peerDependencies

{
    "peerDependencies": {
        "vue": "^2.6.6"
    }
}

A way to get and set up dependencies is using peerDependencies. We know about dependencies and devDependencies. But a peerDependencies? This is checked when we only build a component but just want to mention that another one is needed. Like the example at the start, we include vue and then the component. If we would only include the latter we should get a mention that vue should be loaded also.

Deploy somewhere

Next we like to deploy somewhere. Somewhere, anywhere. Let’s check package.json.

{
    "main": "dist/VueMinesweeper.umd.js",
    "browser": "dist/VueMinesweeper.common.js",
    "unpkg": "dist/VueMinesweeper.umd.min.js",
    "jsDelivr": "dist/VueMinesweeper.umd.min.js",
}

Main, the main file to be included when we added to the build scripts (@import 'my-component') Browser, to be used as common js in the browser i suppose. Unpkg and jsDelivr, unpkg and jsDelivr are a website indexing and serving your npm modules for you, like a cdn but even more easier. In the first example I fetch vue from jsDeliver and my package from unpkg. So easy, just deploy you custom component and add you package name to the urls. So easy.

Small things

Components are awesome, but they have limitations. In a time i made a component using a vuex store and a router, but because a vuex store needs more setup, as does the router. So they cannot be “just” include in a plugin to be loaded from an external site. Well it could when we build up some more setup of add more bootstrap code. So be aware of what you like to build and keep those things in mind.

Even further

Yes, even more. There is lots more in the video above, small things to make life harder, like the --report flag on the build script. Check if your final package is actually as small as it could. Files in your package.json to only deploy files to npm that are actually needed. But i think i will just end things here.

Just don’t forget to checkout my example and maybe play some minesweeper.

Codepen: solutions!

Wed, 27 Mar 2019 19:17:01 +0000

See the Pen Solutions by disjfa (@disjfa) on CodePen.

Symfony, a small introduction

Tue, 26 Feb 2019 21:17:01 +0000

In the olden days we had to install the entire set of components, making a basis for a framework to work on. This can still be done by installing the website skeleton. This is useful if you know that that is what you need to get started.

composer create-project symfony/website-skeleton my_project

But is it fun. Lets take a deeper dive in installing components.

Skeleton

Lets install the bare core of symfony.

composer create-project symfony/skeleton my_project

This is what i got next. Let us read a little.

What’s next?

Run your application:

Change to the project directory
Create your code repository with the git init command
Run composer require server — dev to install the development web server, or configure another supported web server https://symfony.com/doc/current/setup/web_server_configuration.html

Go to a folder, add stuff to git, enable a (local) server or check something else. I am testing so i like a local server for now. I like to see the stuff i do in a browser. Lets install.

composer require server --dev

Cool, we added a local php dev server. Shall we start, we can start the server on the command line.

bin/console server:start

[OK] Server listening on http://127.0.0.1:8000

Server started, lets open a web browser and browse to that url, we have a splash screen where it welcomes us to symfony.

Lets take a step back.

Flex recipes

As you saw, we installed a package using composer name server. This is no normal package name. No! But what it is is a symfony flex recipe. This means that when we call require on a composer the code first checks if there is a recipe on the flex server. There are a bunch of recipes on the base repository and a lot more on the contrib repository. All the recipes can be found on the Symfony Recipes Server. Here you can find all packages and their aliases. So if you search for server yu actually find the “symfony/web-server-bundle”. This is what we just installed.

Folder structure

What we installed with the basic skeleton has a basic folder structure. Lets check a bit.

bin (for the “bin/console” command)
config (for all the config files, services and routes etc)
public (public folder, base point for a web server)
src (code for the main project)
var (for logs and caching)
vendor (for all the git packages)

Thats it for now, just make it easy. Lets just continue.

Control the flow

If we check the “config/routes.yaml” we see a commented out controller path. Lets just check it for now. Create “src/Controller/DefaultController.php” and add something like this.

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
class DefaultController extends AbstractController
{
    public function index()
    {
        return new Response('Hello world');
    }
}

We just made our first controller. Note that we do not have anything yet, no database, no templating engine, no nothing. But when we uncomment the route in the “routes.yaml” we do have a nice hello world in our browser.

Make something beautiful

Yes there is a pun in the title. Lets add the maker bundle. This will make live easy for a quick demo. Also when you get lost you can use this. I searched on the recipes server and found that “make” is the shortest alias for this bundle.

composer require make --dev

Now when we check the commands we can run on the command line we see a lot of make command. I forgot to mention, but you can check the commands on the command line using this command.

bin/console

It lists them nicely, i found a make for a controller.

bin/console make:controller

Sadly, making a controller requires us to add the annotations recipe. If you would ask me, strongly recommended.

[ERROR] Missing package: to use the make:controller command, run:
composer require annotations
composer require annotations
This added a yaml file in the routes. Here it added a “yes you can annotate a route and we will route there from the src folder” option. Very useful.

Next, make a new controller again. This asked us to name the controller, with an example. My example was “AgreeableKangarooController” so i agreed and got this controller.

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class AgreeableKangarooController extends AbstractController
{
    /**
     * @Route("/agreeable/kangaroo", name="agreeable_kangaroo")
     */
    public function index()
    {
        return $this->json([
            'message' => 'Welcome to your new controller!',
            'path' => 'src/Controller/AgreeableKangarooController.php',
        ]);
    }
}

This made a route to http://127.0.0.1:8000/agreeable/kangaroo! Cool, we got some json here.

Next!

We can make stuff, we have a server, and we can see stuff in a browser. If that was all you wanted to do we can stop here! Enjoy your new application. And for some use cases it can be this easy. You could just connect to an existing web service to connect all your data. Add a guzzle client for request or an elastic search client for example, connect them somewhere, and just output your json.

Some more recipes

Off course we will not end here today, lets check some packages. We can just run some more make commands en see where we end up. For starters i tried to make and entity, i want a local database. This said to me to:

composer require orm

And for a quick setup i changed the “DATABASE_URL” to the sqlite version in my “.env” file.

DATABASE_URL=sqlite:///%kernel.project_dir%/var/data.db

And i created my database (check “bin/console” for all the commands)

bin/console doctrine:database:create

Database done! So i made my entity again.

bin/console make:entity

It told me to make a “GrumpyPuppy” entity, so sure! I added a name (string) and a description (text).

Crud

Next up i want to create a crud controller for my “GrumpyPuppy” entity. This is what they asked me.

composer require form validator twig-bundle security-csrf

Validator, twig and the csrf security. Ok, install those. Next, crud again.

bin/console make:crud

And it autocompleted my “GrumpyPuppy” entity and make a “GrumpyPuppyController” and added the templates needed. We do need to create the table. Check the table using this.

bin/console doctrine:schema:update --dump-sql

And make the table

bin/console doctrine:schema:update --force

Now we have the table, controller, crud and when we check the local server we have the crud in our browser. http://127.0.0.1:8000/grumpy/puppy/. Cool, but it looks like plain old html. Lets upgrade the html/css.

Webpack encore

Symfony has a component using node and npm and things for styling, lets just require those.

composer req encore

This will add an “assets” folder for JavaScript and style sheets. But the webpack encore talk is for another day. You can checkout the documentation on the symfony site. For now just know, i added a sass loader and installed bootstrap.

The only other thing is to update the “config/package/stwig.yaml” file and add the bootstrap 4 theme, check that out on the symfony site here.

Ok ok, i have to end this thing

Ok, so this was a simple thing. But now we can setup a symfony flex thing! We can setup a route, we can annotate a route. We can make stuff. We can ask symfony when we make stuff what we have to do. We can create a crud. We can create templates, responses, json responses. We have set up a database. A template system. Added a npm webpack packaging system. Versioned the css and javascript (yes, not mentioned but it was just installed out of the box). We can make every thing a small app needs.

So much stuff, awesome.

Now it is time. Time you get out in the world and think of something you want to make. And find the time to actually make it. The world of composer is out there. The world of npm lies at your finger tips. Symfony recipes galore!

Make something awesome!

One more thing!

Like any talk, one more thing! In the console when you checked commands.

bin/console

There are a lot of debug commands. Check those, they are awesome. Ask them what they can do for you (add “ — help” on the end). For a small example the router.

bin/console debug:router --help

It tells you stuff. This will tell you all the router links there are in your app.

bin/console debug:router

Check what a route actually does.

bin/console debug:router agreeable_kangaroo

But there is so much more. Check it, it can only help you. Will get back on the debug stuff on a later date.

Close curtains

Now i think i am really done. Probably not but i will stop for now. Make stuff. it will be awesome. I also listened to a remark about adding the stuff to git. All the code here can be found on github here. Play with it, please!

Symfony autowire, how to

Thu, 13 Dec 2018 21:17:01 +0000

Symfony, a set of reusable PHP components, has the auto wire feature for a while now. Lets dive into that. Let’s auto wire a hello world service.

Since symfony 4 they have set up a basic skeleton framework, this is so we do not need a “big” setup using doctrine for a database, twig for a template engine, and such. If you do you want the old setup you can check the website-skeleton.

Instalation

Lets get started. Installation using composer.

composer create-project symfony/skeleton my_project

The composer create-project call will download the repo without the git data and put it in a new folder, and do a composer install. This is the message we get on the end of installation.

What’s next?

Run your application:

Change to the project directory
Create your code repository with the git init command
Run composer require server –dev to install the development web server, or configure another supported web server https://symfony.com/doc/current/setup/web_server_configuration.html

A nice message, also a message about an internal server. We don’t have a server so we will use that for now.

cd my_project
composer require server --dev

Done, server installed. Les’t take a look at the thing we made.

bin/console server:start

It said the server started at port 8000, so we open http://127.0.0.1:8000. Here we are greeted with a nice method symfony is installed.

Auto wiring

Ok, the article was about auto wiring and until now we just installed a symfony project. So i have actually not said anything yet. Lets start auto wiring! What is auto wiring, it is “Defining Services Dependencies Automatically” as stated on the symfony page. Before auto wiring symfony had a need to manually configure all you classes in service definitions. Those would be in yaml, xml and php files. Usually a pain in the head, so they did something to make developing a little bit easier.

If set up in a bundle or project symfony will scan all the files and cache all the file definitions in you app/bundle. In the skeleton project, check config/services.yaml

Config

services:
    _defaults:
        autowire: true
        autoconfigure: true

    App\:
        resource: '../src/*'
        exclude: '../src/{DependencyInjection,Entity,Migrations,Tests,Kernel.php}'

    App\Controller\:
        resource: '../src/Controller'
        tags: ['controller.service_arguments']

The main part is to add the _defaults: to autowire and autoconfigure. And we have to tell where the files are. In this example all the files in the App\ namespace, wich is set to your src/ folder will be autowired and autoconfigured.

In symfony we also have to tag some services, if this is wanted you can also auto tag all files in a folder. In this example all files in the App\Controller\ namespace will be tagged as controllers. As they should.

Next thing

As i am typing i realize i have just installed symfony and done nothing, so let’s divert again!

Debugging

You are wondering what services there are. Lets go back to the command line! Start typing;

bin/console debug:container

This command will show you all the services already registered or auto wired. You can serach for an example by adding an argument

bin/console debug:container log

This will list all the services that do things with logging. You can even check the details of all the services defined. Useful!

Lets start auto wiring

Finally, typing. Let’s make a HelloWorldService service in src/Services/HelloWorldService.php. We want to make a service and inject another. Because we just have a clean skeleton we can use the RequestStack to get the master request. In the service we check if we have a who in the query string and return that in a Response. Simple, useful for a hello world example.

<?php

namespace App\Services;

use Symfony\Component\HttpFoundation\RequestStack;
use Symfony\Component\HttpFoundation\Response;

class HelloWorldService
{
    /**
     * @param RequestStack $requestStack
     */
    public function __construct(RequestStack $requestStack)
    {
        $this->request = $requestStack->getMasterRequest();
    }

    /**
     * @return Response
     */
    public function sayWhat()
    {
        if ($this->request->query->has('who')) {
            return new Response('Hello ' . $this->request->query->get('who'));
        }

        return new Response('Hello world');
    }
}

Next, warm up the cache and search for the hello service in the container.

bin/console cache:warmup
bin/console debug:container hello

Now our service should show up in the list, when we select the service we get the information about the service.

Information for Service "App\Services\HelloWorldService"
========================================================
---------------- --------------------------------
Option           Value
---------------- --------------------------------
Service ID       App\Services\HelloWorldService
Class            App\Services\HelloWorldService
Tags             -
Public           no
Synthetic        no
Lazy             no
Shared           yes
Abstract         no
Autowired        yes
Autoconfigured   yes
---------------- --------------------------------

Information

So we made a service, it is registered. Most of the key in the list are hard to explain, or i just don’t know everything. One item I wan’t to say. Public. In good olden days we called services from the Container classes. Those services were public. In a controller we would type something like this;

public function index()
{
    $service = $this->get('App\Services\HelloWorldService');
    ...
}

Side step again

As a best practice you should not register you services as public. And since we want to autowire our new services anyway we won’t need to. We autowire.

Controller

Let’s change that welcome to symfony page, add a controller. I named it HelloWorldController. Add this controller in a file named src/Controller/HelloWorldController.php.

<?php

namespace App\Controller;

use App\Services\HelloWorldService;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;

class HelloWorldController extends AbstractController
{
    /**
     * @param HelloWorldService $helloWorldService
     * @return Response
     */
    public function index(HelloWorldService $helloWorldService)
    {
        return $helloWorldService->sayWhat();
    }
}

As we see here we just inject the service in the index, and it will return a response from the sayWhat function.

Route

Route to the controller, in config/routes.yaml add the following, since annotations for routes is not yet installed.

index:
    path: /
    controller: App\Controller\HelloWorldController::index

Clear the cache and get to the localhost. On the localhost we should see a nice hello world. Also as seen in our service when we add a who to the query params we should see a new response. When we go to http://127.0.0.1:8000/?who=moon we should see a nice “Hello moon” message.

And done!

We made a service, injected a router stack into the service. Next we used the service in a controller and let the service create a response! Looks like a lot for a string in my browser but it sets up the basics. Next just go make a larger app and start injecting the EntityManagerInterface to do doctrine stuff or TranslatorInterface to translate stuff or services from bundles you make or like to use!

Aliasses

When you want to auto wire services from bundles who have not setup the bundle using the autowire setup you can still use them. As an example i want to inject a FilterService from the liip_imagine bundle. They set that up as a ‘@liip_imagine.service.filter’ service id (service id, check the debug:controller). You can just set up an alias in a *.yaml service.

services:
    Liip\ImagineBundle\Service\FilterService: '@liip_imagine.service.filter'

So now it re-auto wires the FilterService to the original service name.

_instance

If you want to auto wire or auto tag a service, you can set it up in a _instanceof service configuration;

# app/config/services.yml
services:
    _instanceof:
        Twig_ExtensionInterface:
            tags: ['twig.extension']

This will auto tag all Twig extensions as a twig extensions (more examples in the link).

Bundles

If you have a bundle you have to explain to symfony you use autowire again. And the setup is exactly the same, except for two more ../ dots. In your Resources/config/services.yaml you have to tell symfony again to check.

services:
    _defaults:
        autowire: true
        autoconfigure: false

    Acme\MyBundle\:
        resource: '../../*'
        exclude: '../../{Entity,Migrations,Tests}'

    Acme\MyBundle\Controller\:
        resource: '../../Controller'
        tags: ['controller.service_arguments']
...

And so on. But don’t forget to add this to the bundle, and enjoy. Also you can add the autowire on a specific service declaration so symfony will check the class arguments.

services:
    Acme\MyBundle\Service\MyService:
        autowire: true

This will just add the auto wiring to a specific service when the _defaults is not set. Handy in some projects.

And done again!

Explained it, at least i hope. Add some exceptions. Added some examples. Hope i wrote it in a way people can understand and start auto wiring all the services! And enjoy!

Lets get started with css grid

Tue, 07 Aug 2018 21:17:01 +0000

Css grid, introduced ages ago in internet explorer 10 with their own rules is now probably in your browse. We want to get started with it and check how far we can go in browsers. And still thinking about some IE11 uses. They are there. You can check a full example of the finished example here.

I once wrote a short story on writing an admin template in just 14 lines of css. Now i was reading about css grid and it sounds cool. So let’s redo that story, using css grid.

Some examples

As a started using css grid there are a lot of sites helping you get started. Grid by Example has useful examples. And off course A Complete Guide to Grid is useful.

Admin template

I started with an admin template because it has some potential. So lets start typing. I started using a grid-template-areas. Built up my site and setup some positions on my grid.

.grid {
  height: 100vh;
  width: 100vw;
  grid-template-columns: 250px auto;
  grid-template-rows: 100px auto 100px;
  grid-gap: 10px;
  grid-template-areas: 
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}
.sidebar {
    grid-area: sidebar;
}
...

Cool, setup a small grid. Full screen. Let’s go!

Postcss and autoprefixer.

Next i found a story on CSS Grid in IE. And installed the autoprefixer. There you have to setup the autoprefixer to enable css grid support, easy. I added a postcss.config.js in my project with this;

module.exports = {
  plugins: {
    autoprefixer: {
      grid: true,
    }
  }
}

You need to test every fix with Grid in IE

One line of code on the autoprefixer page told me to test always on internet explorer first, so i did. And it broke a bit. I don’t know why, but it broke. It did not take my width and height. It got worse when i started adding responsive media queries. Some things did not load or just exploded on IE. Let’s go back to the drawing board.

I don’t know what i did wrong or where i could fix this, i could probably fix it somewhere but i couldn’t find where. So i went back to the drawing board.

I found a nice article on when and where i can try to use the IE implementation of CSS Grid Layout. Some things should work with the autoprefixer but i just wanted to use tested properties.

You need to test every fix with Grid in IE

Let’s get started, again

So i got started again, i do use bootstrap for some scss values. First up setup a fallback layout.

.grid {
  padding-left: $spacer;
  padding-right: $spacer;
  max-width: 1140px;
  margin: 0 auto;
}

Now the template can be seen as in a mobile view as a fallback. Next up, setup a grid on a viewport of 768px width. Again, usings scss.

@media screen and (min-width: 768px) {
  .grid {
    padding: 0;
    display: grid;
    grid-template-columns: 300px 10px 1fr;
    grid-template-rows: min-content 10px 1fr 10px min-content;
    height: 100vh;
    max-width: 100%;
    &-sidebar,
    &-header,
    &-content {
      overflow: auto;
    }
    &-sidebar {
      grid-column: 1;
      grid-row: 1/6;
    }
    &-header {
      grid-column: 3;
      grid-row: 1;
    }
    &-content {
      grid-column: 3;
      grid-row: 3;
    }
    &-footer {
      grid-column: 3;
      grid-row: 5;
    }
  }
}

Reset the grid, add some columns and rows. Setting up an admin like setup, placing the sidebar on the left and a header, content and footer on the right. Next up re-run on the internet explorer browser. And it actually works.

min-content

I was typing and testing the grid and it worked, but my header just would not fit and i found a nice property. Min-height. It will fit the content as it will just fit. Minimum height. Cool for usage, and still works on the older browsers.

Example

I have an example here. I also added a quick navigation trick for the navigation, it places itself on the bottom on smaller screens. The rest is as is.

Use it

As seen here, we can use this. And please do. I setup an admin interface, but you can use it for all the layouts in the world. Just start it up and set up in your project. It is supported in most browsers, just keep in mind to test it on your minimum browser you want to target. And enjoy making cool stuff.

disjfa.github.io

Long live css4!

The setup

Thoughts

Rules

The browsers

Steps

Cool, data

Next

Mailing with symfony, what can we do!

Why?

History

Setup

Let’s go

Create an email

Designing emails

Cool, email setup. Send them.

Checking the emails

Edit them

As for the templates

Cool, now what?

Bootstrap carousel using Animate.css

How does this work?

Animate out classes

Animate in classes

Simple, left and right

Reset some css

And thats it!

Next up?

Codepen: Shots for Practice!

Share!

Share api.

Lets implement.

Can we use that!

Lets poly fill.

Done!

Next up

Vue, creating custom component

The goal

Example

Seems simple enough!

Digest

Digest some more

Fin!

peerDependencies

Deploy somewhere

Small things

Even further

Codepen: solutions!

Symfony, a small introduction

Skeleton

What’s next?

Flex recipes

Folder structure

Control the flow

Make something beautiful

Next!

Some more recipes

Crud

Webpack encore

Ok ok, i have to end this thing

One more thing!

Close curtains

Symfony autowire, how to

Instalation

What’s next?

Auto wiring

Config

Next thing

Debugging

Lets start auto wiring

Information

Side step again

Controller

Route

And done!

Aliasses

_instance

Bundles

And done again!