Webpack power

31. January 2019

I love webpack, it is a powerful open-sourced tool for front-end developer like me. I notice that every plugin I use, every other tools I use, like framework, new programming language, etc, the principial endpoint and way-of-doing is the same.

And maybe what is more important is of course, the user experience at the end – coupled together with fast and easy development.

Well, without going into deep to that philosophical programming question, I love it because at the end of the day, I always want to use a single file Javascript and CSS most of the time. I want to use cutting-edge technology most of the time. I want to use cool imports exports, Typescript, Promises, and new plugins everyday. And dealing with polyfills, managing versions of it, is always a mess. Yarn/Npm helps of course, compiling and managing it from one point and auto-updating it helps making development fun and fast again.

Now you can concentrate on what is important: Logical, Analytical, Code Structuring, and of course spends the next hour searching the name for a variable you will change again in a month, now that the purpose of the variable changed or you just understant it better now.

Set up webpack.config.js, follow most tutorials, set a base.js or a centralized js file to import it in order, and it will understand SASS ordering, mixins, and it could also do dynamic loading of Styles depended on components or inclusion in the javascript file.

I love it.

Zurück zu Portfolio Übersicht

Neue Index-Seite von iiQ-Check

23. April 2018

Index (Gäste Bewertung) Seite von iiQ Check.

Die neue Gäste Bewertung Seite. CSS3 Animation, selbst gemachte Balken in Kreisform mit CSS3 und Javascript, da der Form unik aussieht.

Framework bleibt gleich, Ruby on Rails, HAML, SASS, Javascript, Compass, jQuery. Neue Javascript Bibliothek wurde hier nicht benutzt, da die meistens Animation kommt von CSS3, der von den meistens Hardware unterstützt, besonders von Smartphones.

Read More

Elementor CSS Must haves

16. October 2017

These are the css I use to get rid of unwanted elementor outer padding. I am using the elementor content width setting in WordPress and always annoyed if elements inside / the outmost element  doesnt get to the the edge of the wrapper. This code might be improved in the future, if it “eats” too much elements – that means if it removes padding where it should have padding – by adding more selector probably.

// This is the only one to use; If there is only one column, itwould be simultaneously first and last child aswell. Adding two column should be done when creating new section and selecting 2 column,, so it wont need nesting.
.elementor-top-section > .elementor-column-gap-default > .elementor-row > .elementor-column:first-child >.elementor-element-populated {padding-left: 0;}
.elementor-top-section > .elementor-column-gap-default > .elementor-row > .elementor-column:last-child >.elementor-element-populated{padding-right: 0;}

For now I purposely “ignore” the nested columns, so I can only use this two lines of css – and nesting provide a lot of confusing idea of when it should/should not have padding.

-F

Useful function for elementor in wordpress

30. July 2017

Sometime you want to show the title of your post or page, or maybe use a wrapper for max-width. Well, using Elementor is nice and easy, but you usually need to remove wrapper classes because Elementor can/want to control if a content full width or not. Or maybe you want to hide title if Elementor is active, since you want to be able to edit the title in Elementor.

Sure you can use Elementor built in “hide title” – but the problem comes if you have a blog like posts index page.

I snooped around in the database and found that Elementor uses a post meta in WordPress to mark a page/post is an elementor post and I wrote a piece of code that use the post meta to use in the template.

Read More

Save the setting for auto expanding Explorer folder.

4. January 2017

Loving this trick!

From http://superuser.com/a/804135/681749

  • open explorer
  • right click on the username (the user’s expanded home-directory) In my fall its the Dropbox folder
  • do not choose any item of the context menu, but left click on the little arrow to collapse this directory
  • exit explorer

I needed this because my explorer always opens my Dropbox folder – which is long and not needed most of the time. I always use the Schnellzugriff / fast access(?) thing on the top of Explorer.

But this mechanic to do this is really strange – Microsoft is strange, but that’s not new. Just how to do it is a really new way for me. If I had’nt come to this Superuser.com message I wont know it. Interesting.

/de

Wie man die expandierte Ordner in Explorer einstellen. Windows Explorer, wenn es gestartet ist, expandiert automatisch ein paar standard Ordner. Bei meinem Fall war das Dropbox, was leider unerwünscht ist. Hier ist wie man das einstellen:

  • Explorer aufmachen
  • Rechte Mausklick an den gewünschten Ordner
  • Statt die Kontextmenü zu benutzen, auf den Pfeil zum reduzieren/expandieren anklicken.
  • Explorer schließen
  • Die Einstellung ist jetzt gespeichert.

– F

Devise and CanCanCan, Agile = prepare for the worst?

3. January 2017

I wasnt using CanCanCan before, and wasn’r really planning on it, but I thought, what the heck, it might be fun. My project was simple… at the start. But in the end it got more complicated.

It is agile development I guess, but does it also means changing core programming constantly?

CanCanCan and Devise ( I wasn’t even planning on using Devise but a friend told me better to use one ) wasn’t going to be used because I feel they are a bit overkill.

But at the start I only used Devise and add a

def role
'admin'
end

in my User user.rb model. It is still like that, but since somehow the task was getting bigger and needed to have more complicated rights to its actions and views, I implemented CanCanCan. I was still feelign a bit overkill at the time, but then since the Agile development, it fulfills its role nicely.

That got me thinking though: is Agile development just a buzz-tech-savvy word for an “unclear” planning?

Read More

Setting Solr from the start

5. December 2016

This article is more a note to myself 🙂

Here’s how to install solr:

  1. https://www.digitalocean.com/community/tutorials/how-to-install-solr-5-2-1-on-ubuntu-14-04
    1. Make sure you have Java (java -ver), install ppa, python, everything.
    2. download the correct version (ie. solr-6.3.0.tar.gz using wget)
    3. instead of tar xf all, only tar the installation and run the script
      (tar xzf solr-5.2.1.tgz solr-5.2.1/bin/install_solr_service.sh –strip-components=2,
      sudo bash ./install_solr_service.sh solr-5.2.1.tgz)
  2. Copy conf from /opt/solr/server/solr/configsets/basic_config/conf to /var/data/new_core -> you need to make the new core folder first.
  3. Easy way is then go to localhost:8983/solr/# etc and add core there – or using command line (also in the link up top)

Done!

Now still need to get reindex with mongo and sunspot functioning… 

Update 10.12.2016

New Solr 6.3 vs. Sunspot with Solr 4.3

THe field types are all wrong in solrconfig.xml. First, you need to get schema.xml from the solr setting from sunspot and rename it to managed-schema (without extension).

Then, solrconfig.xml from basic_configs need to be edited, so booleans changed to boolean, tdoubles to tdouble etc. All “s”s need to be removed. Then it would work with Rails.

I hope this knowledge help me or someone in the future! 🙂

Using Bash for Windows / Windows Subsystem for Linux

4. December 2016

Using bash for windows is excellent!

It is basically just bash – how to install here : http://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/ – and it feels amazing!

I can sudo apt-get everything I want – unlike Cygwin, where you can only install things that are ported to Cygwin. This statement could be wrong, but I did tried Cygwin for a bit because it supposedly has a better X Server – but I cant get it running with WSL (Windows Subsystem for Linux). I’m using Xming right now. And using ConEmu as a better alternative to “Dos-like” bash. I do have Oh-My-Zsh installed as well – easy using Curl/apt-get in the bash. Really cool.

Still in the process of installing Solr – but Mongoid and MySQL runs and can be configured normally. Very fun!

More info later this week 🙂

Using ATOM

16. August 2016

Let’s try ATOM.

https://atom.io/

Let’s install vim-mode.

So my first impression after a few days:

1. It is kinda cool, but sometime the keybindings clashed with the default one. To close a pane I need to not only press ctrl-w, but also escape afterwards. Then it functions. Kinda annoying. Maybe because the vim-mode keybindings.

2. The vim keybindings is only “kinda” cool – i can use my vim keybindings, but not all. And sadly the VISUAL mode doesnt show the cursor in “block” mode – only in status bar, described by N for normal mode, and I for insert mode – and visual mode doesnt select vertically – or cannot insert vertically. ATOM cannot insert vertically at all! (According to some post in StackOverflow and my own 2 seconds test) 

3. The Remote-FTP is kinda cool. You save the .ftpconfig in the folder of each projects – very file-based system, very UNIX like? – I like it. That means I can always copy paste them. It kinda copy the whole server structure though.. maybe not so very good? Maybe i still need to tinker around more. It brings at least consistency between server and local though. 

Stil need more days to test it around, but I guess it is kinda cooler than Notepad++ or Vim on Windows – which I try to not use because I cant get to install Janus on Windows, which is the life of VIM imo.

 

– F

Zurück zu Portfolio Übersicht

iiQ-Check Corporate Website

11. June 2016

www.iiq-check.de

Ich habe die Website von der Firma neu gemacht. Immer noch Joomla, aber statt die normale multipage, es ist mehr ein “OnePage”-Design. Nicht ganz, da es totzdem gemixt mit Multi-page Konzept.

Techs:

  • Turbolinks
  • Bootstrap
  • Joomla
  • Slideshow
  • Scroll-reveal
  • CSS3 Animations
  • Extensive Javascripting
  • Forms (RS Form)

 

Updating Website – June 2016

9. June 2016

I’m updating my website again! Yay!!

Still wondering if i should do german and english, or just keep it mixed. 

 

-F

Zurück zu Portfolio Übersicht

iiQ-Check Admin

23. November 2015

app.iiq-check.de

Login Image made in 3D, CSS Styles and everything on customer area is made by me using SASS and CoffeScript on a Ruby on Rails Platform.

Techs:

  • Ruby on Rails
  • Blender 3D for Splash Screen
  • High Charts
  • CSS3 Animations
  • SASS
  • CoffeScript
  • Git

A bit of update

13. September 2015

Yay for a simpler clutter free website! 🙂

Using AJAX for loading content, but still crawlable from google now! 

Might still need to add more animation for interest points, and i still havent do for a mobile version 🙁

But yay for progress! 🙂

Website update!

1. September 2015

Blog update!

Zurück zu Portfolio Übersicht

AKZENT Intranet

23. December 2014

Role: Full-Stack Developer, Programmer/Coder, Designer

Work:

  • Conceptions / Design
  • CSS3 Animations, 3D-Effects
  • Coding in Ruby on Rails, CoffeScript and SASS
  • MySQL for Forum and Mongoid for everything else
  • Bild für Login-Seite gemacht / Custom Picture for Login Page
  • Shop-System
  • Forum
  • Calendar
  • Mailing-System
  • Event-Registration

Ein Backend-Member-only Interface für Hotelier in der Kooperation, wo Sie in Forum diskutieren können. Dazu gibt es ein Artikel-Shop, Terminkalender, Seminaranmeldung, E-Mail Vertailer, Bilder per Benutzer Datenbank. Ein Tool für die Marketingzentrale, um die Hotelier über Marketing-News und Channels zu informieren.

Firma: TMA GmbH

Zurück zu Portfolio Übersicht

AKZENT Hotels

23. November 2013


www.akzent.de

Made using Ruby On Rails and Mongoid instead of SQL. I was the sole programmer and designer on this project – which means I was working alone ;p

Tech:

  • HAML
  • CoffeScript
  • Ruby on Rails
  • SASS
  • AJAX-loading content
  • Search Engine using SOLR
  • Geolocation Search using Google Maps API
  • Custom Google Maps (Masked using SVG, points)
  • A ton of forms and admin backend to upload pictures and content
  • OG, Social Media, Schema.org on every page with different content based on current hotel
  • DIRS21 API for online booking, and API connection to get content from their server

 

 

Zurück zu Portfolio Übersicht

Gaung Garuda

22. August 2013

Tools: Photoshop, Blender

Created this poster for Gaung Garuda, a rock and roll indonesian festival in Hannover.

Since we have no real photo of an upcoming event, I just talked with the creator Aci Siddharta and Aryani Willems over a weekend about ideas and such. At the end I wanted to do more with 3D since I havent done that since forever. All created in 3D with some throwback to the previous event (the guitar player with the guitar head) and Texts over in photoshop.

Really fun creating and adding the kites and balloons in the background to liven up the poster. The Idea is a fair, almost like an amusement park.

 

Zurück zu Portfolio Übersicht

City Appartements Am Wall

23. April 2013

www.city-appartements-am-wall.de

Eine Website von 2013, mit Joomla gemacht. Vorlage war komplett von mir gemacht. Hintergrund benutzt etwas Canvas von HTML5, um die schnelle / Parallax SVG-Animation zu kreieren.

Benutzt Kinetic.js, Greensock, Canvas.

Fotos auf die Website habe ich auch selbst fotografiert mit 5D Mark II und teilweise 60D, bearbeitet in Adobe Photoshop.

 

Zurück zu Portfolio Übersicht

Silent Rain

23. July 2012

Silent Rain – Miss Print from Fransiskus Winata on Vimeo.

Meine Bachelorarbeit. Alles muss in einem Tag gedreht werden, da die Band nur auf dem Tag die Zeit hat. Komplett mit Canon 5D mark II und manche Shots in 60D gedreht.

Technische Probleme gibt es, da die Canon Kameras nur mp4/h264 aufnehmen, und leider hatte ich damals keine schnelle PC – hatte nur ein DELL Laptop mit Radeon Grafikkarte – und Mercury Playback von Premiere Pro kann das alles leider nur sehr schwierig bearbeiten. Genauso mit After Effects. Ich weiss nicht wie man damals so viel geduld hat, um Effekte zu machen, wenn man schon Frame-Scrubbing so langsam dauert. Vielleicht haben die alle schnelle Rechnern.

Idee: die erste Idee für meine Bachelorarbeit war eigentlich einen Musical zu machen. Ein einfachen Test mit meiner Freundin Dara war auch gemacht. Dann hab ich noch 2 Amateur-Musikstück geschrieben. Dann war die Zeit auf einmal so spät, da ich ja noch Recording, Mastering, etc machen müsste – also habe ich leider gecancelt. Ein Choreograf habe ich auch nicht gefunden.

Also, fallback zu einem “einfacheren” Musikstudio. Mein Professor Hanno Baethe hat auch mich vorgeschlagen, lieber das Musikvideo zu machen, da es ausreicht und einfacher zu machen ist.

Die Idee/Bilder, die im Video zu sehen ist, kommt aus die persönliche visuelle Empfindung des Songtitel und Songtext. Dazu noch ein bisschen Throwback zu Musicalelemente, in dem ich doch versucht habe, ein Choreograf umzusetzen. Das sonniges Gefühl, ein veträumten Tag und die Reise mit den verschiedenen Leute und Freunde bis das am Ende umgesetzt ist, dass ein Lied und ein Konzert entsteht. Der Traum, im Form von den gelben leuchtenden Luftballon, die am Ende losgelassen wird, symbolisiert eine Liberalisierung dessen, da der Traum an sich keinen zu tragenden Gewicht ist.

Naja, das war mindestens die tiefe Philosophierung der Geschichte.

Am Anfang war einen 3-Tage-Dreh geplant, leider können die Bandmitglieder nur 1 Tag machen, also, ich hab gemacht was ich machen kann. Es sind ein paar Beauty-FX und 3D-Shots drinne, besonders für die Luftballon am Ende, die man leider auch merkt, dass es nicht so gut gemacht ist. 🙂

Trotzdem habe ich hier als Regisseur, Editor, VFX, Skriptschreiber und Produktionsplaner viel gelernt.

Danke an Aryani Willems, Arina Tara und Miss Print, Nata, Aci, Pars, Bram, Uti, und noch viel mehr die viel geholfen haben.

Zurück zu Portfolio Übersicht

Gäste Bewerten 2012

23. June 2012

Early work of a page. Designed and coded in HAML/Rails and SASS (CSS) myself, with content filled with a colleague.

www.gaeste-bewerten.de