🎉 Initial commit
This commit is contained in:
piharpi
37
_posts/_blog/2018-09-28-overhaul-lanyard-gun-prow-jack.md
Normal file
37
_posts/_blog/2018-09-28-overhaul-lanyard-gun-prow-jack.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Overhaul lanyard gun prow jack
|
||||
date: 2018-09-28 09:45:47 +07:00
|
||||
tags: [story, antagonist]
|
||||
thumbnail: "/assets/img/posts/devc-yogya-28-09-2018s.jpg"
|
||||
---
|
||||
|
||||
Once upon a time, there was a little boy whose name was Alex he oftern visited his aunt, and she always
|
||||
gave him something when he left her house. Somtimes she gave him something to eat. Sometimes she gave
|
||||
him to play with. The most important one she always gave something.
|
||||
|
||||
## The story of Alex
|
||||
One day alex went to visit his aunt. When he was leaving, she said to him, "Here is a little cake, Alex. Please take it to your mother. Carry it carefully and don't stop it".
|
||||
|
||||
"Thank you, Auntie," said a little boy, and he started home. He carried the cake carrefully int his hands. But he held it very tightly because he did not want to drop it. When he got home he said to his
|
||||
mother.
|
||||
|
||||
"Look at, Mother. Auntie sent you nice little cake"
|
||||
"Where is it?" his mother asked
|
||||
"Here ini my hands" He replied, and opened his hands to show her the cake.
|
||||
"Oh, Alex, you're foolish boy, "she cried
|
||||
"You've ruined it. You shouldn't carry a cake like that you
|
||||
should wrap it carefully in some leaves and carry it onyour head"
|
||||
"I'm sorry,Mother," said the little boy sadly."But I'll remember next time,"
|
||||
he promised.
|
||||
|
||||
The next week, he went to see his aunt again, When he was leaving, she said to him, "here is some butter,Alex. Please tke it to your mother. Carry it carefully and don't drop it."
|
||||
|
||||
"Thank you, Auntie, "said the litter boy and he started home. then he remember what his mother had said. He wrapperd the butter carefully in some leaves, and carried it son his head. On the way home,
|
||||
it was very hot, and Soon the butter began to melt down his face, down his shirt, down his shorts. When he got home he said to his mother.
|
||||
|
||||
"Look at, Mother, Auntie sent you some butter. I remembered what you said. I wrapped it carefully in some leaves and carried it on my head".
|
||||
|
||||
"Oh, Alex, You're stupid boy !", cried his mother. "You'veruined it. You shouldn't carry butter like that. You should wrap it in some leaves and put in the river to cool first, Then carry it carefully in your hand".
|
||||
|
||||
|
||||
Originally posted in <a href="#">blahblah.com</a>
|
||||
94
_posts/_blog/2018-11-18-think-classic-lorem-ipsum-passe?.md
Normal file
94
_posts/_blog/2018-11-18-think-classic-lorem-ipsum-passe?.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
title: Think classic lorem ipsum is passé?
|
||||
date: 2018-11-18 11:38:47 +07:00
|
||||
tags: [demo, bangsring, jekyll, github-pages]
|
||||
thumbnail: https://source.unsplash.com/FWCUZqXCrUs/800x480 # for open graph image / seo image
|
||||
tweet: 1106842621706563584
|
||||
---
|
||||
Pommy ipsum manky odds and sods tallywhacker up North a bit miffed, her Majesty's pleasure had a barney with the inlaws blimey have a gander jammy git a cuppa fried toast, well chuffed duck nick flabbergasted easy peasy Dalek and. On the pull yorkshire mixture Sherlock pennyboy bloke.
|
||||
|
||||
> Distraction is the process of diverting the attention of an individual or group from a desired area of focus and thereby blocking or diminishing the reception of desired information.
|
||||
|
||||
Fusce ut placerat orci nulla. Nibh mauris cursus mattis molestie a iaculis. At tempor commodo ullamcorper a lacus vestibulum sed. <kbd>ctrl</kbd> + <kbd>space</kbd> Fames ac turpis egestas integer.
|
||||
|
||||
### Table of Contents
|
||||
1. [What is programming](#what-is-programming)
|
||||
- [How to become programmer](#how-to-become-programmer)
|
||||
- [Why programmer are single](#why-programmer-are-single)
|
||||
- [Coding is not fun!](#coding-is-not-fun)
|
||||
2. [Choose programming language](#choose-programming-language)
|
||||
3. [Don't hate your programs](#dont-hate-your-programs)
|
||||
4. [Learn how to learn](#learn-how-to-learn)
|
||||
5. [Conclusion](#conclusion)
|
||||
|
||||
Doubloon lookout six pounders loot shrouds mutiny run a shot across the bow sheet Admiral of the Black rigging. Ballast fire in the hole Arr bilge no prey, no pay matey loaded to the gunwalls rutters quarterdeck heave to. Nipper Arr sutler gaff smartly broadside topsail walk the plank warp case shot.
|
||||
|
||||
<figure>
|
||||
<img src="https://source.unsplash.com/xPD38QJWFYM/800x500" alt="Istanbul, Turkey">
|
||||
<figcaption>
|
||||
26 E Mallory Ave, Memphis, United States by <u>@kharaoke</u>.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
Boom swab Shiver me timbers rutters yo-ho-ho pinnace lookout sutler bowsprit run a rig. Take a caulk quarter driver interloper main sheet belay run a shot across the bow bucko draught bring a spring upon her cable. Pieces of Eight come about cable league Gold Road aye Sea Legs flogging square-rigged bowsprit.
|
||||
|
||||
## What is programming
|
||||
Elit sed vulputate mi sit amet. Auctor urna nunc id cursus metus aliquam eleifend. Senectus et netus et malesuada fames. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
|
||||
|
||||
- #### How to become programmer
|
||||
Yawl pink shrouds tack overhaul scurvy. Ye lugger Chain Shot Blimey barkadeer heave down. Grog jib Gold Road jack Pirate Round jury mast. Jack Tar grog blossom sutler bilge water Sea Legs hearties. Sutler lugger gibbet chase guns keel bowsprit.
|
||||
|
||||
- #### Why programmer are single
|
||||
Programmers are used to imagining every possible scenario while coding, to reduce or eliminate bugs. Like "what happens if I don't initialize that now, will it be used in future?", etc.
|
||||
They also literally expect the "worst case" while developing algorithms, and use it to bound performance.
|
||||
|
||||
|
||||
- #### Coding is not fun!
|
||||
And what eventually happens is that these people will adapt this to real life. If you are going to propose to somebody and imagining all possible scenarios, and expecting the worst case, most probably either you will mess it up, or you will back off.
|
||||
|
||||
No prey, no pay hogshead lanyard me bilge doubloon. Careen Cat o'nine tails reef sails come about ballast pink. Transom poop deck barque belay Corsair rigging. Dead men tell no tales fathom port barque execution dock run a rig. Quarter dead men tell no tales swing the lead ahoy dance the hempen jig no prey, no pay.
|
||||
|
||||
## Choose programming language
|
||||
At risus viverra adipiscing at in tellus integer feugiat scelerisque. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
|
||||
|
||||
| Language | Framework | Initial years |
|
||||
|:-----------|:---------------|:-------------:|
|
||||
| Ruby | Ruby On Rails | 2004 |
|
||||
| Javascript | AngularJS | 2016 |
|
||||
| Elixir | Phoenix | 2014 |
|
||||
|
||||
## Don't hate your programs
|
||||
Pirate fire ship red ensign grapple bounty walk the plank list tender cackle fruit handsomely. Reef sails Sea Legs line chandler landlubber or just lubber Spanish Main Chain Shot six pounders weigh anchor holystone.
|
||||
|
||||
<blockquote class="twitter-tweet tw-align-center" data-lang="en"><p lang="in" dir="ltr">“Ada banyak manfaat saat mulai menulis dan membagikan ide yang kamu punya. Tapi untuk mulai menulis tanpa beban... menulislah untuk menulis”<a href="https://t.co/4gePn5NlyB">https://t.co/4gePn5NlyB</a></p>— Hilman Ramadhan ☕ (@hilmanspace) <a href="https://twitter.com/hilmanspace/status/1103158263288393728?ref_src=twsrc%5Etfw">March 6, 2019</a></blockquote>
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
Sail ho Barbary Coast fire in the hole draught tackle hands long clothes piracy aye black jack. Coffer topgallant boom dance the hempen jig belay port Pirate Round gunwalls maroon grog blossom.
|
||||
|
||||
## Learn how to learn
|
||||
Chain Shot knave parrel dance the hempen jig gangplank swing the lead overhaul run a rig haul wind shrouds. List bilged on her anchor swab no prey, no pay crow's nest Gold Road take a caulk ho parley brigantine. Port lugsail fore run a shot across the bow Jolly Roger bucko wherry loaded to the gunwalls nipper reef.
|
||||
|
||||
|
||||
|
||||
```ruby
|
||||
class Person
|
||||
attr_writer :password
|
||||
attr_accessor :name, :username
|
||||
def initialize(name, username, password)
|
||||
@name = name
|
||||
@username = username
|
||||
@password = password
|
||||
@font_url = "https://fonts.googleapis.com/css"
|
||||
end
|
||||
end
|
||||
|
||||
student = Person.new("Harpi", "piharpi", "strongpassword")
|
||||
puts student.name
|
||||
```
|
||||
Oke, dari cara diatas mulai muncul masalah juga ketika ada kepentingan temen kita yang butuh banget enggak bisa jawab langsung karena kita gk tau ada pesan masuk apa enggak makanya saya gunakan suara notif yang beda beberapa teman aja, selain itu terlihat sombong karena tidak merespon pesan padahal kita online, yah sudah mengalami hal seperti ini sebelumnya hahahaha terserah tapi pikiran orang beda2 , yah saya jelasan kenapa gak segera dibalas.
|
||||
|
||||
|
||||
## Conclusion
|
||||
Measured fer yer chains hearties hulk cog weigh anchor chase bilge swab scurvy heave to. Landlubber or just lubber lanyard sloop code of conduct starboard black jack wench jib sutler booty. Belaying pin transom American Main draft fathom rope's end scallywag Jolly Roger black jack crimp, plank list tender cackle fruit handsomely.
|
||||
|
||||
Maecenas volutpat blandit aliquam etiam erat. Eget aliquet nibh _praesent tristique magna_ sit. Ullamcorper malesuada proin libero nunc consequat interdum varius.
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Step to installation bangsring jekyll theme
|
||||
date: 2019-3-6 8:28:47 +07:00
|
||||
tags: [installation, jekyll, bangsring-theme]
|
||||
tweet: 1106842621706563584
|
||||
---
|
||||
@@ -0,0 +1,97 @@
|
||||
---
|
||||
title: React Component with Dot Notation
|
||||
date: 2019-02-19 11:45:47 +07:00
|
||||
tags: [react, javascript, dot-notation]
|
||||
layout: post
|
||||
thumbnail: https://media.giphy.com/media/dIxkmtCuuBQuM9Ux1E/200w_d.gif
|
||||
---
|
||||
|
||||
This is my answer to someone’s question on [StackOverflow](https://stackoverflow.com/questions/49256472/react-how-to-extend-a-component-that-has-child-components-and-keep-them/49258038#answer-49258038). How can we define a React component that is accessible through the dot notation?
|
||||
|
||||
Take a look at the following code. We have the ```Menu``` component and its three children ```Menu.Item:```
|
||||
|
||||
const App = () => (
|
||||
<Menu>
|
||||
<Menu.Item>Home</Menu.Item>
|
||||
<Menu.Item>Blog</Menu.Item>
|
||||
<Menu.Item>About</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
How can we define a component like ```Menu```? Where it has some kind of “sub-component” that is accessible through a dot notation.
|
||||
|
||||
Well, it’s actually a pretty common pattern. And it’s not really a sub-component, it’s just another component being attached to another one.
|
||||
|
||||
Let’s use the above ```Menu```component for example. We’ll put this component to its own dedicated file: ```menu.js```. First, let’s define these two components separately on this module file:
|
||||
|
||||
// menu.js
|
||||
import React from 'react';
|
||||
|
||||
export const MenuItem = ({ children }) => <li>{children}</li>;
|
||||
|
||||
export default const Menu = ({ children }) => <ul>{children}</ul>;
|
||||
|
||||
It’s just a simple functional component. The ```Menu``` is the parent with ```ul``` tag. And the ```MenuItem``` will act as its children. Now we can use these two components like so:
|
||||
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import Menu, { MenuItem } from './menu';
|
||||
|
||||
const App = () => (
|
||||
<Menu>
|
||||
<MenuItem>Home</MenuItem>
|
||||
<MenuItem>Blog</MenuItem>
|
||||
<MenuItem>About</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
render(<App />, document.getElementById('root'));
|
||||
|
||||
Where’s the dot notation? To make our MenuItem component accessible through the dot nation, we can simply attach it to the Menu component as a static property. To do so, we can no longer use the functional component for Menu and switch to the class component instead:
|
||||
|
||||
// menu.js
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default const MenuItem = ({ children }) => <li>{children}</li>;
|
||||
|
||||
export default class Menu extends Component {
|
||||
static Item = MenuItem;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ul>{this.props.children}</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Now we can use the dot notation to declare the ```MenuItem``` component:
|
||||
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import Menu from './menu';
|
||||
|
||||
const App = () => (
|
||||
<Menu>
|
||||
<Menu.Item>Home</Menu.Item>
|
||||
<Menu.Item>Blog</Menu.Item>
|
||||
<Menu.Item>About</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
render(<App />, document.getElementById('root'));
|
||||
|
||||
You can also put the ```MenuItem``` component definition directly within the ```Menu``` class. But this way you can no longer import ```MenuItem``` individually.
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default class Menu extends Component {
|
||||
static Item = ({ children }) => <li>{children}</li>;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ul>{this.props.children}</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
**For demo purpose**, Originally published at <https://bagja.net>.
|
||||
69
_posts/_tips/2019-01-26-buccaner-bucko-jury-mast-rum.md
Normal file
69
_posts/_tips/2019-01-26-buccaner-bucko-jury-mast-rum.md
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: How to name Sass color variables
|
||||
date: 2018-11-18 11:45:47 +07:00
|
||||
tags: [css, sass, naming-variables]
|
||||
layout: post
|
||||
comment: true
|
||||
thumbnail: https://source.unsplash.com/FWCUZqXCrUs/800x480
|
||||
---
|
||||
|
||||
When it comes to naming Sass variables, I suck. I think I've found the perfect solution, get half way through a project, and realise what a terrible mistake I'd made.
|
||||
|
||||
Variables in any language are often overlooked. They're treated as these things that 'ultimately only developers will see, so who cares'. But having a proper naming convention can really help save time, keep your code DRY, and more importantly make your codebase easier to understand for other developers.
|
||||
|
||||
## The bad
|
||||
|
||||
So let's start with the bad. Going back a few months, this is pretty much what the variables file in all of my old projects looked like:
|
||||
|
||||
$red: #e03c31;
|
||||
$darker-red: #c1271d;
|
||||
$blue: #00f;
|
||||
$text-color: #1a1a1a;
|
||||
|
||||
What's the problem here?
|
||||
- The variable names provide no clues as to where they sit in the hierarchy, or their relationship with one another.
|
||||
- What's the primary color? Red? Blue?
|
||||
- What happens if our color scheme changes? We suddenly have to change every instance of ```$red```, with our new color. These defeats the point of having variables in the first place.
|
||||
- _'Darker Red'_ ? How much darker is darker?
|
||||
|
||||
|
||||
## Better
|
||||
|
||||
$primary-color: #e03c31;
|
||||
$secondary-color: #7fff00;
|
||||
$text-color: #1a1a1a;
|
||||
|
||||
Now we've provided some context, we can better see the relationship between our colors. We have a ```$primary-color``` and ```$secondary-color```, which would be our brand colors, and then provide some other utility variables such as ```$text-color```.
|
||||
|
||||
|
||||
## Even Better
|
||||
|
||||
// Internal variables
|
||||
$x-palette-red: #e03c31;
|
||||
$x-palette-green: #7fff00;
|
||||
|
||||
// Global variables
|
||||
$palette-primary: $x-color-red;
|
||||
$palette-secondary: $x-color-green;
|
||||
|
||||
$palette-paragraph: #1a1a1a;
|
||||
|
||||
This is a method that I've recently started using in all of my new projects.
|
||||
|
||||
First we define our colors at a very high level using internal variables. I like to prefix my internal variables with ```x```. Internal variables have one function, and that's to be assigned to other variables. This allows us to keep our global variables free of any bias, but also informs us and others working on the codebase what the actual palette color is. Because let's face it, hex codes are for machines.
|
||||
|
||||
We've also switched around the naming of the actual color variables, to follow a 'property -> level' convention. This is particulary useful when these are surrounded by other variables for typography, grids, etc., as we can instantly scan our variables file by property.
|
||||
|
||||
$palette-primary: $x-color-red;
|
||||
$palette-secondary: $x-color-blue;
|
||||
$palette-tertiary: $x-color-green;
|
||||
|
||||
$font-family-primary: 'Helvetica Neue', sans-serif;
|
||||
$font-family-secondary: 'Georgia', serif;
|
||||
|
||||
$line-height-base: 18px;
|
||||
$line-height-paragraph: 16px;
|
||||
|
||||
Likewise, we use the word 'palette' to distinguish our variables from the 'color' css property which is exclusively for text color.
|
||||
|
||||
**For demo purpose**, Originally published at <https://fahmiirsyd.com>.
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: How to Clear Nunjucks Cache
|
||||
date: 2019-02-19 11:45:47 +07:00
|
||||
modified: 2019-02-20 11:45:47 +07:00
|
||||
tags: [nonjuck, cache, pug, flores, static-site]
|
||||
layout: post
|
||||
---
|
||||
I’m building a static site generator (again) named [Flores](). Initially, I use [Pug]() for the templating engine. But then I discovered [Nunjucks](). It has a lot more features and the syntax is quite similar to [Twig]() which I’m familiar with. I also did a quick test and the render time is quite similar when the cache option is activated.
|
||||
|
||||
However, I had an issue when Flores is on the “watch” mode (think of Webpack watch mode). When the user edits the template file, the changes won’t be reflected on the generated HTML files. This thing happened because of Nunjucks cached the compiled template. The thing is there’s no mention in Nunjucks documentation on how to manually clear the cache.
|
||||
|
||||
I dug into the [Nunjucks source code](https://github.com/mozilla/nunjucks) and found out that each Nunjucks loader (the object that responsible for loading the template) uses cache property to store the compiled template. You can check it on [```initCache```](https://github.com/mozilla/nunjucks/blob/v3.1.7/nunjucks/src/environment.js#L98-L108) method on ```Environment``` class.
|
||||
|
||||
// src/environment.js
|
||||
initCache() {
|
||||
// Caching and cache busting
|
||||
this.loaders.forEach((loader) => {
|
||||
loader.cache = {};
|
||||
if (typeof loader.on === 'function') {
|
||||
loader.on('update', (template) => {
|
||||
loader.cache[template] = null;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
So in order to clear all the caches, all I have to do is simply set this ```cache``` property to an empty object again.
|
||||
|
||||
const nunjucks = require("nunjucks");
|
||||
|
||||
const env = nunjucks.configure("./path/to/templates");
|
||||
|
||||
for (let i = 0; i < env.loaders.length; i += 1) {
|
||||
env.loaders[i].cache = {};
|
||||
}
|
||||
|
||||
**For demo purpose**, Originally published at <https://bagja.net>.
|
||||
Reference in New Issue
Block a user