24 January 2020 7 comments Python
I often find myself Googling for this. Always a little bit embarrassed that I can't remember the incantation (syntax).
Suppose you have a string mystr that you want to fill with with spaces so it's 10 characters wide:
>>> mystr = 'peter'
>>> mystr.ljust(10)
'peter '
>>> mystr.rjust(10)
' peter'
Now, with "f-strings" you do:
>>> mystr = 'peter'
>>> f'{mystr:<10}'
'peter '
>>> f'{mystr:>10}'
' peter'
What also trips me up is, suppose that the number 10 is variable. I.e. it's not hardcoded into the f-string but a variable from somewhere else. Here's how you do it:
>>> width = 10
>>> f'{mystr:<{width}}'
'peter '
>>> f'{mystr:>{width}}'
' peter'
What I haven't figured out yet, is how you specify a different character than a simple single whitespace. I.e. does anybody know how to do this, but with f-strings:
>>> width = 10
>>> mystr.ljust(width, '*')
'peter*****'
UPDATE
First of all, I left two questions unanswered. One was how do you make the filler something other than ' '. The answer is:
>>> f'{"peter":*<10}'
'peter*****'
The question question was, what if you don't know what the filler character should be. In the above example, *
was hardcoded inside the f-string. The solution is stunningly simple actually.
>>> width = 10
>>> filler = '*'
>>> f'{"peter":{filler}<{width}}'
'peter*****'
But note, it has to be a single length string. This is what happens if you try to make it a longer string:
>>> filler = 'xxx'
>>> f'{"peter":{filler}<{width}}'
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
ValueError: Invalid format specifier
18 January 2020 0 comments Javascript, Python
In Python
I'm sure it's been blogged about a buncha times before but, I couldn't find it, and I had to search too hard to find an example of this. Basically, what I'm trying to do is what Python does in this case, but in JavaScript:
def do_something(arg="notset", **kwargs):
print(f"arg='{arg.upper()}'")
do_something(arg="peter")
do_something(something="else")
do_something()
In Python, the output of all this is:
arg='PETER'
arg='NOTSET'
arg='NOTSET'
It could also have been implemented in a more verbose way:
def do_something(**kwargs):
arg = kwargs.get("arg", "notset")
print(f"arg='{arg.upper()}'")
This more verbose format has the disadvantage that you can't quickly skim it and see and what the default is. That thing (arg = kwargs.get("arg", "notset")) might happen far away deeper in the function, making it hard work to spot the default.
In JavaScript
Here's the equivalent in JavaScript (ES6?):
function doSomething({ arg = "notset", ...kwargs } = {}) {
return `arg='${arg.toUpperCase()}'`;
}
console.log(doSomething({ arg: "peter" }));
console.log(doSomething({ something: "else" }));
console.log(doSomething());
Same output as in Python:
arg='PETER'
arg='NOTSET'
arg='NOTSET'
Notes
I'm still not convinced I like this syntax. It feels a bit too "hip" and too one-liner'y. But it's also pretty useful.
Mind you, the examples here are contrived because they're so short in terms of the number of arguments used in the function.
A more realistic thing like be a function that lists, upfront, all the possible parameters and for some of them, it wants to point out some defaults. E.g.
function processFolder({
source,
destination = "/tmp",
quiet = false,
verbose = false
} = {}) {
console.log({ source, destination, quiet, verbose });
// outputs
// { source: '/user', destination: '/tmp', quiet: true, verbose: false }
}
console.log(processFolder({ source: "/user", quiet: true }));
One could maybe argue that arguments that don't have a default are expected to always be supplied so they can be regular arguments like:
function processFolder(source, {
destination = "/tmp",
quiet = false,
verbose = false
} = {}) {
console.log({ source, destination, quiet, verbose });
// outputs
// { source: '/user', destination: '/tmp', quiet: true, verbose: false }
}
console.log(processFolder("/user", { quiet: true }));
But, I quite like keeping all arguments in an object. It makes it easier to write wrapper functions and I find this:
setProfile(
"My biography here",
false,
193.5,
230,
["anders", "bengt"],
"South Carolina"
);
...harder to read than...
setProfile({
bio: "My biography here",
dead: false,
height: 193.5,
weight: 230,
middlenames: ["anders", "bengt"],
state: "South Carolina"
});
15 January 2020 0 comments Javascript
Suppose that you're working on ~/dev/my-cool-project and inside ~/dev/my-cool-project/package.json you might have something like this:
"dependencies": {
"that-cool-lib": "1.2.3",
...But that that-cool-lib is one of your own projects. You're also working on that project and it's over at ~/dev/that-cool-lib. Within that-cool-lib you might be in a git branch or perhaps you're preparing a 2.0.0 release.
Now you're interested if that-cool-lib@2.0.0
is going to work here inside my-cool-project.
What you could do
First, you release this fancy that-cool-lib@2.0.0 to npmjs.com with that project's npm publish procedure. Then as soon as that's done and you can see that the release made it onto https://www.npmjs.com/package/that-cool-lib/v/2.0.0.
Then you go over to my-cool-project and start a new git branch to try the upgrade, npm install that-cool-project@2.0.0 --save so you have this:
"dependencies": {
- "that-cool-lib": "1.2.3",
+ "that-cool-lib": "2.0.0",
...Now you can try it that new version of my-cool-project and if that-cool-lib had any of its own entry point executables or post/pre install steps, they'd be fully resolved.
What you should do
Instead, use install-local. Don't use npm link because it might not install entry point executables and I also don't like the fact that I need to go into that-cool-lib and install it (globally?) first (when you do cd that-cool-lib && npm link). Also, see "What's wrong with npm-link?".
Here's how you do it:
npx install-local ~/dev/that-cool-lib
and it acts pretty much exactly as if you had gotten it from npmjs.com the normal way.
Notes
I almost never use npm these days. Go yarn! So, perhaps I've misinterpreted something.
Also, I try my very hardest to never use npm install -g ... (or yarn global ... for that matter) now that we have npx
. Perhaps if you'd install it locally it'd speed up the use of local-install by 1-3 seconds each time you run this. Again, my skillset of modern npm is fading so I don't think I understand why it takes me 14 seconds the first time I run npx install that-cool-lib and then it takes 14 seconds again when I run the exact same command again. Does it not benefit from any caching? How much of that time is spent on npmjs.com resolving other sub-dependencies that that-cool-lib requires?
Hopefully, this helps other people stuck in a similar boat.
10 January 2020 3 comments Python, Django, Web development
Django's Form framework is excellent. It's intuitive and versatile and, best of all, easy to use. However, one little thing that is not so intuitive is how do you render a bound form with default/initial values when the form is never rendered unbound.
If you do this in Django:
class MyForm(forms.Form):
name = forms.CharField(required=False)
def view(request):
form = MyForm(initial={'name': 'Peter'})
return render(request, 'page.html', form=form)
# Imagine, in 'page.html' that it does this:
# <label>Name:</label>
# {{ form.name }}
...it will render out this:
<label>Name:</label>
<input type="text" name="name" value="Peter">
The whole initial trick is something you can set on the whole form or individual fields. But it's only used in UN-bound forms when rendered.
If you change your view function to this:
def view(request):
form = MyForm(request.GET, initial={'name': 'Peter'}) # data passed!
if form.is_valid(): # makes it bound!
print(form.cleaned_data['name'])
return render(request, 'page.html', form=form)
Now, the form is bound and the initial stuff is essentially ignored.
Because name is not present in request.GET. And if it was present, but an empty string, it wouldn't be able to benefit for the default value.
My solution
I tried many suggestions and tricks (based on rapid Stackoverflow searching) and nothing worked.
I knew one thing: Only the view should know the actual initial values.
Here's what works:
import copy
class MyForm(forms.Form):
name = forms.CharField(required=False)
def __init__(self, data, **kwargs):
data = copy.copy(data)
for key, value in kwargs.get("initial", {}).items():
data[key] = data.get(key, value)
super().__init__(data, **kwargs)
Now, suppose you don't have ?name=something in request.GET the line print(form.cleaned_data['name']) will print Peter and the rendered form will look like this:
<label>Name:</label>
<input type="text" name="name" value="Peter">
And, as expected, if you have ?name=Ashley in request.GET it will print Ashley and produce this rendered HTML too:
<label>Name:</label>
<input type="text" name="name" value="Ashley">
03 January 2020 0 comments Javascript, Node
cheerio is a great Node library for processing HTML. It's faster than JSDOM and years and years of jQuery usage makes the API feel yummily familiar.
What if you have a piece of HTML that you want to split up into multiple blocks? For example, you have this:
<div>Prelude</div>
<h2>First Header</h2>
<p>Paragraph <b>here</b>.</p>
<p>Another paragraph.</p>
<h2 id="second">Second Header</h2>
<ul>
<li>One</li>
<li>Two</li>
</ul>
<blockquote>End quote!</blockquote>
and you want to get this split by the <h2> tags so you end up with 3 (in this example) distinct blocks of HTML, like this:
first one
second one
<h2>First Header</h2>
<p>Paragraph <b>here</b>.</p>
<p>Another paragraph.</p>
third one
<h2 id="second">Second Header</h2>
<ul>
<li>One</li>
<li>Two</li>
</ul>
<blockquote>End quote!</blockquote>
You could try to
cast the regex spell on that and try to, I don't know, split the string by the </h2>. But it's risky and error prone because (although a bit unlikely in this simple example) get caught up in <h2>...</h2> tags that are nested inside something else. Also, proper parsing almost always wins in the long run over regexes.
Use cheerio
This is how I solved it and hopefully A) you can copy and benefit, or B) someone tells me there's already a much better way.
What you do is walk the DOM root nodes, one by one, and keep filling a buffer and then yield individual new cheerio instances.
const html = `
<div>Prelude</div>
<h2>First Header</h2>
<p>Paragraph <b>here</b>.</p>
<p>Another paragraph.</p>
<!-- comment -->
<h2 id="second">Second Header</h2>
<ul>
<li>One</li>
<li>Two</li>
</ul>
<blockquote>End quote!</blockquote>
`;
// load the raw HTML
// it needs to all be wrapped in *one* big wrapper
const $ = cheerio.load(`<div id="_body">${html}</div>`);
// the end goal
const blocks = [];
// the buffer
const section = cheerio
.load("<div></div>", { decodeEntities: false })("div")
.eq(0);
const iterable = [...$("#_body")[0].childNodes];
let c = 0;
iterable.forEach(child => {
if (child.tagName === "h2") {
if (c) {
blocks.push(section.clone());
section.empty();
c = 0; // reset the counter
}
}
c++;
section.append(child);
});
if (c) {
// stragglers
blocks.push(section.clone());
}
// Test the result
const blocksAsStrings = blocks.map(block => block.html());
console.log(blocksAsStrings.length);
// 3
console.log(blocksAsStrings);
// [
// '\n<div>Prelude</div>\n\n',
// '<h2>First Header</h2>\n' +
// '<p>Paragraph <b>here</b>.</p>\n' +
// '<p>Another paragraph.</p>\n' +
// '<!-- comment -->\n' +
// '\n',
// '<h2 id="second">Second Header</h2>\n' +
// '<ul>\n' +
// ' <li>One</li>\n' +
// ' <li>Two</li>\n' +
// '</ul>\n' +
// '<blockquote>End quote!</blockquote>\n'
// ]
In this particular implementation the choice of splitting is by the every h2 tag. If you want to split by anything else, go ahead and adjust the conditional there where it's currently doing if (child.tagName === "h2") {.
Also, what you do with the blocks is up to you. Perhaps you need them as strings, then you use the blocks.map(block => block.html()). Otherwise, if it serves your needs they can remain as individual cheerio instances that you can do whatever with.
13 December 2019 2 comments Javascript, Docker, Python, Django, Web development
Heroku is great but it's sometimes painful when your app isn't just in one single language. What I have is a project where the backend is Python (Django) and the frontend is JavaScript (Preact). The folder structure looks like this:
/
- README.md
- manage.py
- requirements.txt
- my_django_app/
- settings.py
- asgi.py
- api/
- urls.py
- views.py
- frontend/
- package.json
- yarn.lock
- preact.config.js
- build/
...
- src/
...A bunch of things omitted for brevity but people familiar with Django and preact-cli/create-create-app should be familiar.
The point is that the root is a Python app and the front-end is exclusively inside a sub folder.
When you do local development, you start two servers:
./manage.py runserver - starts http://localhost:8000cd frontend && yarn start - starts http://localhost:3000
The latter is what you open in your browser. That preact app will do things like:
const response = await fetch('/api/search');
and, in preact.config.js I have this:
export default (config, env, helpers) => {
if (config.devServer) {
config.devServer.proxy = [
{
path: "/api/**",
target: "http://localhost:8000"
}
];
}
};
...which is hopefully self-explanatory. So, calls like GET http://localhost:3000/api/search actually goes to http://localhost:8000/api/search.
That's when doing development. The interesting thing is going into production.
Before we get into Heroku, let's first "merge" the two systems into one and the trick used is Whitenoise. Basically, Django's web server will be responsibly not only for things like /api/search but also static assets such as / --> frontend/build/index.html and /bundle.17ae4.js --> frontend/build/bundle.17ae4.js.
This is basically all you need in settings.py to make that happen:
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware",
...
]
WHITENOISE_INDEX_FILE = True
STATIC_URL = "/"
STATIC_ROOT = BASE_DIR / "frontend" / "build"
However, this isn't quite enough because the preact app uses preact-router which uses pushState() and other code-splitting magic so you might have a URL, that users see, like this: https://myapp.example.com/that/thing/special and there's nothing about that in any of the Django urls.py files. Nor is there any file called frontend/build/that/thing/special/index.html or something like that.
So for URLs like that, we have to take a gamble on the Django side and basically hope that the preact-router config knows how to deal with it. So, to make that happen with Whitenoise we need to write a custom middleware that looks like this:
from whitenoise.middleware import WhiteNoiseMiddleware
class CustomWhiteNoiseMiddleware(WhiteNoiseMiddleware):
def process_request(self, request):
if self.autorefresh:
static_file = self.find_file(request.path_info)
else:
static_file = self.files.get(request.path_info)
# These two lines is the magic.
# Basically, the URL didn't lead to a file (e.g. `/manifest.json`)
# it's either a API path or it's a custom browser path that only
# makes sense within preact-router. If that's the case, we just don't
# know but we'll give the client-side preact-router code the benefit
# of the doubt and let it through.
if not static_file and not request.path_info.startswith("/api"):
static_file = self.files.get("/")
if static_file is not None:
return self.serve(static_file, request)
And in settings.py this change:
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
- "whitenoise.middleware.WhiteNoiseMiddleware",
+ "my_django_app.middleware.CustomWhiteNoiseMiddleware",
...
]
Now, all traffic goes through Django. Regular Django view functions, static assets, and everything else fall back to frontend/build/index.html.
Heroku
Heroku tries to make everything so simple for you. You basically, create the app (via the cli or the Heroku web app) and when you're ready you just do git push heroku master. However that won't be enough because there's more to this than Python.
Unfortunately, I didn't take notes of my hair-pulling excruciating journey of trying to add buildpacks and hacks and Procfile
s and custom buildpacks. Nothing seemed to work. Perhaps the answer was somewhere in this issue: "Support running an app from a subdirectory" but I just couldn't figure it out. I still find buildpacks confusing when it's beyond Hello World. Also, I didn't want to run Node as a service, I just wanted it as part of the "build process".
Docker to the rescue
Finally I get a chance to try "Deploying with Docker" in Heroku which is a relatively new feature. And the only thing that scared me was that now I need to write a heroku.yml file which was confusing because all I had was a Dockerfile. We'll get back to that in a minute!
So here's how I made a Dockerfile that mixes Python and Node:
FROM node:12 as frontend
COPY . /app
WORKDIR /app
RUN cd frontend && yarn install && yarn build
FROM python:3.8-slim
WORKDIR /app
RUN groupadd --gid 10001 app && useradd -g app --uid 10001 --shell /usr/sbin/nologin app
RUN chown app:app /tmp
RUN apt-get update && \
apt-get upgrade -y && \
apt-get install -y --no-install-recommends \
gcc apt-transport-https python-dev
# Gotta try moving this to poetry instead!
COPY ./requirements.txt /app/requirements.txt
RUN pip install --upgrade --no-cache-dir -r requirements.txt
COPY . /app
COPY --from=frontend /app/frontend/build /app/frontend/build
USER app
ENV PORT=8000
EXPOSE $PORT
CMD uvicorn gitbusy.asgi:application --host 0.0.0.0 --port $PORT
If you're not familiar with it, the critical trick is on the first line where it builds some Node with as frontend. That gives me a thing I can then copy from into the Python image with COPY --from=frontend /app/frontend/build /app/frontend/build.
Now, at the very end, it starts a uvicorn server with all the static .js, index.html, and favicon.ico etc. available to uvicorn which ultimately runs whitenoise.
To run and build:
docker build . -t my_app
docker run -t -i --rm --env-file .env -p 8000:8000 my_app
Now, opening http://localhost:8000/ is a production grade app that mixes Python (runtime) and JavaScript (static).
Heroku + Docker
Heroku says to create a heroku.yml file
and that makes sense but what didn't make sense is why I would add cmd line in there when it's already in the Dockerfile. The solution is simple: omit it. Here's what my final heroku.yml file looks like:
build:
docker:
web: Dockerfile
Check in the heroku.yml file and git push heroku master and voila, it works!
To see a complete demo of all of this check out https://github.com/peterbe/gitbusy and https://gitbusy.herokuapp.com/
