We Made the PyCon TW 2016 Website

Slide 1

Slide 1 text

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Web Lead

Slide 7

Slide 7 text

Not Web Lead

Slide 8

Slide 8 text

େਓతݪҼʁ (ʉ㦝 ʉ )

Slide 9

Slide 9 text

Me • Call me TP • Follow @uranusjr • https://uranusjr.com

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

http://macdown.uranusjr.com

Slide 13

Slide 13 text

www. .com

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

PyCon APAC 2014 PyCon APAC 2015

Slide 16

Slide 16 text

PyCon TW 2016

Slide 17

Slide 17 text

No More CMS • We are all programmers here • Redundant content separation • RDBS • Flat pages • Git is our content database

Slide 18

Slide 18 text

Make This the Last • Do we need a new site every year? • Less dependency = More time-proof • Did not make it — design mistakes :( • More on this later

Slide 19

Slide 19 text

Built to Last

Slide 20

Slide 20 text

Dependency

Slide 21

Slide 21 text

The web framework for perfectionists with deadlines.

Slide 22

Slide 22 text

Third-party Apps • As few as possible • Django has more than you think • Easy to make simple solutions

Slide 23

Slide 23 text

Tests • We don’t have very good tests • Not enough team discipline • Unit tests on important components • Make sure we don’t serve errors • Important for maintenance

Slide 24

Slide 24 text

Test Coverage • I do hope it could be higher • Numbers can be misleading • Django is too declarative • Test the important parts ﬁrst

Slide 25

Slide 25 text

Testing • pytest-django • unittest.mock + pytest-mock • Travis CI • Codecov.io • Staging server (manual inspection)

Slide 26

Slide 26 text

PYTEST IS AWESOME BECAUSE

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Content Management With Templates!

Slide 29

Slide 29 text

# url(r'^(?P.*)/$', content_page) def content_page(request, path): template_path = '/'.join([ CONTENT_TEMPLATE_PREFIX, request.LANGUAGE_CODE, path + '.html', ] return render(request, template_path)

Slide 30

Slide 30 text

GET /events/keynotes/ path = 'events/keynotes' template_path = 'contents/events/keynotes.html' HttpResponse

Slide 31

Slide 31 text

class TemplateExistanceStatusResponse( TemplateResponse): def resolve_template(self, template): try: return super().resolve_template( template=template, ) except TemplateDoesNotExist: raise Http404

Slide 32

Slide 32 text

Do It Yourself

Slide 33

Slide 33 text

Markdown Support • You don’t need server-side rendering • One custom form widget is enough • Render with JavaScript

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

class SimpleMDEWidget(forms.Textarea): class Media: css = {'all': ['simplemde.min.css']} js = ['simplemde.js', 'simplemde-setup.js'] def render(self, name, value, attrs=None): attrs = self.build_attrs(attrs, **{ 'name': name, 'data-simplemde': True, }) return format_html( '\r\n' '{content}', attrs=flatatt(attrs), content=force_text(value), )

Slide 36

Slide 36 text

Rain artisanal range-rover girl wonton soup A.I. silent hacker sensory. Boy media advert systemic realism silent rain shoes range-rover receding plastic j-pop. Cartel Chiba tanto construct receding systemic saturation point market wristwatch stimulate pen jeans motion rifle. Car silent grenade tube meta-claymore mine tank- traps neural sign bicycle modem Shibuya media long-chain hydrocarbons.

Slide 37

Slide 37 text

var nodeList = document.querySelector( 'textarea[data-simplemde]'); Array.prototype.forEach.call(nodeList, (e) => { new SimpleMDE({ 'element': e, // ... Whatever options you want. }); });

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

class EventInfo(models.Model): # ... detailed_description = models.TextField( verbose_name=_('detailed description'), blank=True, help_text=_(...), ) # ...

Slide 40

Slide 40 text

{% if object.detailed_description %}

{% trans 'Description' %}

{% endif %}

Slide 41

Slide 41 text

var render = SimpleMDE.prototype.markdown; var els = document.querySelectorAll('.markdown'); Array.prototype.forEach.call(els, function (e) { var source = e.textContent || e.innerText; e.innerHTML = render(source); });

Slide 42

Slide 42 text

Character counter • Why not CharField(max_length=...) • Character-word ratio • Front-end user experience

Slide 43

Slide 43 text

East Asian Width • Unicode Standard Annex #11 • “Wide” and “narrow” characters • And ambiguous (not going there)

Slide 44

Slide 44 text

Ken Lunde 㼭卌⶛ https://www.linkedin.com/in/kenlunde

Slide 45

Slide 45 text

_EAW_LENS = { 'Na': 1, # Narrow - 1 'H': 1, # Halfwidth - 1 'W': 2, # Wide - 2 'F': 2, # Fullwidth - 2 'N': 1, # Neutral - 1 'A': 2, # Ambiguous - 2 } from unicodedata import east_asian_width as eaw class EAWMaxLengthValidator(MaxLengthValidator): def clean(self, value): return sum( _EAW_LENS[eaw(c)] for c in value )

Slide 46

Slide 46 text

http://d.hatena.ne.jp/takenspc/20111126

Slide 47

Slide 47 text

function getCharacterCount(e) { var text = e.textContent || e.innerText; if (!text) { return 0; } text = text .replace(/^\s+|\s+$/g, '') .replace(/\r?\n/g, '\r\n')); return eastasianwidth.length(text); }

Slide 48

Slide 48 text

Email-Based User • No idea where this came from • A lot copied from Symposion • Some of our own touch

Slide 49

Slide 49 text

Internalisation

Slide 50

Slide 50 text

from django.conf.urls.i18n import i18n_patterns urlpatterns = i18n_patterns( url(r'^$', index, name='index'), # ... more URL patterns. ) urlpatterns += [ url(r'^set-language/$', set_language), url(r'^admin/', include(admin.site.urls)), ]

Slide 51

Slide 51 text

https://tw.pycon.org/2016/zh-hant/events/talks/ Chinese (Traditional) Matched URL path

Slide 52

Slide 52 text

# This is in i18n_patterns(...). # url(r'^(?P.*)/$', content_page) def content_page(request, path): template_path = '/'.join([ CONTENT_TEMPLATE_PREFIX, request.LANGUAGE_CODE, path + '.html', ]) return render(request, template_path)

Slide 53

Slide 53 text

Does English need translation?

Slide 54

Slide 54 text

Yes!

Slide 55

Slide 55 text

Translation • en or en-us? • Non-ASCII characters • English is not the base language

Slide 56

Slide 56 text

Patching Django from django.conf import locale if 'en-us' not in locale.LANG_INFO: locale.LANG_INFO['en-us'] = { 'bidi': False, 'code': 'en-us', 'name': 'English (US)', 'name_local': 'English (US)', }

Slide 57

Slide 57 text

Translations locale/ !"" _src/ # !"" LC_MESSAGES/ # $"" README.txt !"" en_US/ # $"" LC_MESSAGES $"" zh_Hant/ $"" LC_MESSAGES

Slide 58

Slide 58 text

https://www.transifex.com/pycon-taiwan/pycon-tw-2016/

Slide 59

Slide 59 text

GitHub git push Travis CI Trigger master? Transifex tx push Manual Translation tx pull Local Repository

Slide 60

Slide 60 text

GitHub git push Travis CI Trigger master? Transifex tx push Manual Translation tx pull Local Repository Some Remote Repository git push [no-ci]

Slide 61

Slide 61 text

U+1F937 SHRUG (Unicode 9.0)

Slide 62

Slide 62 text

Slide 63

Slide 63 text

class LocaleFallbackMiddleware: def process_request(self, request): if not settings.USE_I18N: return match = FALLBACK_PAT.match(request.path_info) if not match: return lang = match.group('lang') fallback = settings.FALLBACK_LANS[lang] prefix = get_script_prefix() path = request.get_full_path().replace( prefix + lang, prefix + fallback, 1, ) return HttpResponsePermanentRedirect(path)

Slide 64

Slide 64 text

# Settings. FALLBACK_LANS = { 'zh': 'zh-hant', 'en': 'en-us', } # For middleware. FALLBACK_PREFIX_PATTERN = re.compile( r'^/(?P{})(?:/?|/.+)$'.format( '|'.join(settings.FALLBACK_LANS.keys()), ), re.UNICODE, )

Slide 65

Slide 65 text

Lessons Learnt

Slide 66

Slide 66 text

If I Do This Again • Better code • Better dev-op • Better management

Slide 67

Slide 67 text

Better code • Plan to throw (at least) one away • Migration can be messy • Can’t revert design decisions • Coding styles • Indentation (size and style) • Translation unit • Tests! More! Better!

Slide 68

Slide 68 text

Better Dev-op • Transifex integration • Staging server for each branch • R/O production database mirroring? • Tighter production cycle

Slide 69

Slide 69 text

Better Management • Time is a big problem • Need better cohesion • Who is available? • What can I do now? • Tight development cycle without too much managing — How?

Slide 70

Slide 70 text

Next Steps

Slide 71

Slide 71 text

So… 2017? • Start as early as possible • Do things upfront • Repeat as little as possible

Slide 72

Slide 72 text

Sponsorship?

Slide 73

Slide 73 text

pip install conferencekit * Does not work yet

Slide 74

Slide 74 text

⸈Ⰵ㉻⸈Ⰵ㉻⸈Ⰵ㉻⸈Ⰵ㉻⸈Ⰵ㉻ ⸈Ⰵ㉻⸈Ⰵ㉻⸈Ⰵ㉻⸈Ⰵ㉻⸈Ⰵ㉻